CSS horisontellt navigationsfält

Horisontellt navigationsfält

Det finns två sätt att skapa ett horisontellt navigationsfält: användaInlineellerFlytandeListobjekt.

Inline listobjekt

Ett sätt att bygga ett horisontellt navigationsfält är att specificera <li>-elementen som inline, förutom den "standard"-kod som nämndes i föregående kapitel:

Exempel

li {
  display: inline;
}

Prova själv

Exempel förklaring:

display: inline; - Som standard är <li>-element blockelement. Här tar vi bort radbrytningarna innan och efter varje listobjekt så att de kan visas på en rad.

Flytande listobjekt

Ett annat sätt att skapa ett horisontellt navigationsfält är att flytta <li>-elementen och specificera layouten för navigationslänkarna:

Exempel

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Prova själv

Exempel förklaring:

  • float: left; - Använd float för att få blockelementen att glida nära varandra
  • display: block; - Genom att visa länken som ett blockelement kan hela länkområdet klickas (inte bara texten), och det är möjligt att specificera fyllning (om nödvändigt kan också höjd, bredd, marginaler osv. specificeras)
  • padding: 8px; - Gör blockelementen mer estetiskt tilltalande
  • background-color: #dddddd; - Lägg till en grå bakgrundsfärg till varje element

Tips:Om du vill ha en bakgrundsfärg som täcker hela bredden, lägg till background-color till <ul> istället för varje <a>-element:

Exempel

ul {
  background-color: #dddddd;
}

Prova själv

Horisontell navigationsfältsexempel

Skapa en grundläggande horisontell navigationsfält med en mörk bakgrundsfärg och ändra bakgrundsfärgen på länken när användaren håller muspekaren över den:

Exempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Ändra länkens färg till #111 (svart) när musen hålls över */
li a:hover {
  background-color: #111;
}

Prova själv

Aktiv/current navigationslänk

Lägg till "active"-klassen till den aktuella länken så att användaren vet vilken sida de är på:

Exempel

.active {
  background-color: #4CAF50;
}

Prova själv

Justera länkar till höger

Justera länkar till höger genom att flytta listobjekten till höger (float:right;）：

Exempel

<ul>
  <li><a href="#home">Hem</a></li>
  <li><a href="#news">Nyheter</a></li>
  <li><a href="#contact">Kontakt</a></li>
  <li style="float:right"><a class="active" href="#about">Om</a></li>
</ul>

Prova själv

kanterna

Lägg till border-right Egenskapen till <li> för att skapa en länkavskiljare:

Exempel

/* Lägg till en grå höger kantbrygga till alla listobjekt, utom det sista (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Prova själv

Fast navigationsfält

Håll navigationsfältet på sidans topp eller botten, även om användaren rullar sidan:

Fast vid toppen

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Prova själv

Fast vid botten

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Prova själv

Observera:Fast position kan inte fungera normalt på mobila enheter.

Grå horisontell navigationsfält

Exempel på en grå horisontell navigationsfält med tunn grå kant.

Exempel

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Prova själv

Klibbig navigationsfält

Lägg till position: sticky;För att skapa en klibbig navigationsfält.

Klibbiga element växlar mellan relativ och fast position baserat på rullposition. Det är relativt placerat tills det når den angivna avståndspositionen i viewporten - då 'klistrar' det sig på lämplig plats (t.ex. position:fixed).

Exempel

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Prova själv

Observera:Internet Explorer, Edge 15 och tidigare versioner stöder inte enklippning. Safari kräver -webkit-prefix (se exempel ovan). Du måste också specificera övreochhögerochnedre eller vänster Minst en, för att göra enklippning fungerar.

Mer exempel

Responsiv toppstavigeringsmeny
Hur man använder CSS mediafrågor för att skapa en responsiv toppstavigeringsmeny.
Responsiv sidostavigeringsmeny
Hur man använder CSS mediafrågor för att skapa en responsiv sidostavigeringsmeny.
Rullgardinsnavigationsfält
Hur man lägger till en rullgardinsmeny i navigationsfältet.