CSS lodret navigationsfelt

Kursusanbefalinger:

Vertikal navigationsfelt

Eksempel

width: 200px;
  li a {
  Du kan også indstille <ul>'s bredde og fjerne <a>'s bredde, fordi når de vises som blokelementer, tager de hele tilgængelige bredde. Dette vil føre til det samme resultat som i vores tidligere eksempel:
}

Prøv det selv

For at bygge en vertikal navigationsfelt, udover koden fra det forrige kapitel, kan du også indstille stilen for <a>-elementet i listen:

  • li a { Eksempel forklaring:
  • Du kan også indstille <ul>'s bredde og fjerne <a>'s bredde, fordi når de vises som blokelementer, tager de hele tilgængelige bredde. Dette vil føre til det samme resultat som i vores tidligere eksempel: - At vise links som blokelementer gør hele linkområdet klikbart (og ikke kun teksten), og vi kan også specificere bredde (og hvis nødvendigt også indrykning, margin, højde osv.).

- Standardmæssigt tager blokelementer hele den tilgængelige bredde. Vi skal specificere en bredde på 60 pixels.

Eksempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Du kan også indstille <ul>'s bredde og fjerne <a>'s bredde, fordi når de vises som blokelementer, tager de hele tilgængelige bredde. Dette vil føre til det samme resultat som i vores tidligere eksempel:
} 
width: 200px;
  li a {
}

Prøv det selv

width: 60px;

Vertikal navigationsfelt eksempel

Eksempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Opret en grundlæggende vertikal navigationsfelt med en grå baggrundsfarve og ændr linkets baggrundsfarve, når brugeren flytter musen over det:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Skift linkets farve, når musen holdes over */
  li a:hover {
  background-color: #4CAF50;
}

Prøv det selv

background-color: #555;

Aktiv/current navigationslink

Eksempel

Tilføj "active"-klassen til den aktuelle link, så brugeren ved, hvilken side de er på:
  .active {
  background-color: #4CAF50;
}

Prøv det selv

color: white;

Centrér linket og tilføj kantlinje text-align:center til <li> eller <a>, så linket centreres.

Tilføj border Egenskab tilføjes til <ul>, og en kantlinje tilføjes omkring navigationsfeltet. Hvis du også ønsker at tilføje en kantlinje til navigationsfeltet, tilføj border til alle <li>-elementer border-bottom，sidste element undtaget：

Eksempel

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {}}
  border-bottom: none;
}

Prøv det selv

Fuld højde fast lodret navigationsfelt

Opret en fuld højde 'klæbrig' side navigation:

Eksempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Hele højde */
  position: fixed; /* Gør det klæbrigt, selv når det ruller */
  overflow: auto; /* Aktiverer rullespind, hvis indholdet i sidebaren er for meget */
}

Prøv det selv

Bemærk:Dette eksempel kan muligvis ikke fungere korrekt på mobile enheder.