Sådan oprettes: Lodret menu

Sådan oprettes en lodret knapgruppe

Trin 1 - Tilføj HTML：

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

Trin 2 - Tilføj CSS：

.vertical-menu {
  width: 200px; /* Du kan også indstille bredde, hvis du ønsker det */
}
.vertical-menu a {
  background-color: #eee; /* Grå baggrund farve */
  color: black; /* Sort tekstfarve */
  display: block; /* Vis links en efter en */
  padding: 12px; /* Tilføj lidt indre margin */
  text-decoration: none; /* Fjern linkets understregning */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Mørkegrå baggrund farve ved museoverførsel */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Tilføj grøn farve til 'aktiv/current' link */
  color: white;
}

Try it yourself

Lodret rullemenu

Hvis du ønsker en lodret rullemenu, skal du angive en specifik højde og tilføje overflow 属性：

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

Try it yourself

Related pages

Tutorial:How to create a sidebar navigation bar