CSS vertikalt navigationsfält

Kursrekommendationer:

Vertikal navigationsmeny

Exempel

width: 200px;
  li a {
  Du kan också ställa in bredden på <ul> och ta bort bredden på <a>, eftersom de när de visas som blockelementer kommer att ta upp all tillgänglig bredd. Detta kommer att ge samma resultat som i våra tidigare exempel:
}

Prova själv

För att bygga en vertikal navigationsmeny, förutom koden från föregående kapitel, kan du också ställa in stilen för <a>-elementen i listan:

  • li a { Exempel förklaring:
  • Du kan också ställa in bredden på <ul> och ta bort bredden på <a>, eftersom de när de visas som blockelementer kommer att ta upp all tillgänglig bredd. Detta kommer att ge samma resultat som i våra tidigare exempel: - Visa länken som ett blockelement gör att hela länkområdet kan klickas (inte bara texten), och vi kan också specificera bredd (om nödvändigt kan vi också specificera inre marginal, yttre marginal, höjd med mera).

- Som standard kommer blockelement att ta upp all tillgänglig bredd. Vi behöver specificera en bredd på 60 pixlar.

Exempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Du kan också ställa in bredden på <ul> och ta bort bredden på <a>, eftersom de när de visas som blockelementer kommer att ta upp all tillgänglig bredd. Detta kommer att ge samma resultat som i våra tidigare exempel:
} 
width: 200px;
  li a {
}

Prova själv

width: 60px;

Vertikal navigationsmeny-exempel

Exempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Skapa en grundläggande vertikal navigationsmeny med en grå bakgrundsfärg och ändra länkens bakgrundsfärg när användaren flyttar musen över länken:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Ändra länkens färg när musen hålls över */
  li a:hover {
  background-color: #4CAF50;
}

Prova själv

background-color: #555;

Aktiv/aktuell navigationslänk

Exempel

Lägg till klassen "active" till den aktuella länken för att användaren ska veta vilken sida de befinner sig på:
  .active {
  background-color: #4CAF50;
}

Prova själv

color: white;

Centrera länken och lägg till kantlinje text-align:center till <li> eller <a>, för att centrera länken.

Lägg till border Lägg till egenskapen till <ul>, och lägg till kantlinje runt navigationsfältet. Om du också vill lägga till kantlinje inom navigationsfältet, lägg till border-bottom，utom den sista elementen:

Exempel

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

Prova själv

Heltids höjd fast vertikal navigations栏

Skapa en heltids höjd 'klistrig' sidostavigering:

Exempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full höjd */
  position: fixed; /* Gör det klistrigt, även när det rullas */
  overflow: auto; /* Aktivera rullgardin om sidostolpen innehåller för mycket innehåll */
}

Prova själv

Observera:Detta exempel kan inte fungera korrekt på mobila enheter.