CSS vandret navigationsfelt

Horisontal navigationslinje

Der er to måder at oprette en horisontal navigationslinje på: ved at brugeIndlejretellerFlydendeListeelementer.

Indlejret listeemne

En måde at bygge en horisontal navigationslinje på er at specificere <li>-elementerne som inline, udover den "standard" kode fra det forrige kapitel:

Eksempel

li {
  display: inline;
}

Prøv det selv

Eksempel forklaring:

display: inline; - Standardmæssigt er <li>-elementer blokelementer. Her fjerner vi linjeskiftet før og efter hver listeemne, så de kan vises på en linje.

Flydende listeemne

En anden måde at oprette en horisontal navigationslinje på er at flytte <li>-elementerne og angive layout for navigationslinks:

Eksempel

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

Prøv det selv

Eksempel forklaring:

  • float: left; - Brug float for at få blokelementer til at glide tæt på hinanden
  • display: block; - Vis links som blokelement gør, at hele linkområdet kan klikkes (ikke kun teksten), og det giver os mulighed for at specificere fyldning (hvis nødvendigt, kan vi også specificere højde, bredde, margin osv.)
  • padding: 8px; - Gør blokelementer mere æstetisk tiltalende
  • background-color: #dddddd; - Tilføj en grå baggrundsfarve til hver element

Tips:Hvis du ønsker en baggrundsfarve, der dækker hele bredden, skal du tilføje background-color til <ul> i stedet for hver <a>-element:

Eksempel

ul {
  background-color: #dddddd;
}

Prøv det selv

Horisontal navigationslinje eksempel

Opret en grundlæggende horisontal navigationslinje med en mørk baggrundsfarve og ændr baggrundsfarven på linket, når brugeren flytter musen over det:

Eksempel

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;
}
/* Skift linkfarven til #111 (sort) når musen hæves */
li a:hover {
  background-color: #111;
}

Prøv det selv

Aktiv/current navigationslink

Tilføj "active"-klassen til den aktuelle link, så brugeren ved, hvilken side de er på:

Eksempel

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

Prøv det selv

Rigtigstil links

Rigtigstil links ved at flytte listeemnerne til højre (float:right;）：

Eksempel

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

Prøv det selv

kantadskiller

Tilføj border-right egenskab til <li> for at oprette en linkadskiller:

Eksempel

/* Tilføj en grå højre kant til alle listeemner, undtag det sidste (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Prøv det selv

Fast navigationslinje

Lad navigationslinjen forblive på siden af siden, selvom brugeren ruller i siden:

Fast på toppen

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

Prøv det selv

Fast på bunden

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

Prøv det selv

Bemærk:Fast position kan muligvis ikke fungere korrekt på mobile enheder.

Grå horisontal navigationslinje

Eksempel på en grå horisontal navigationslinje med en fin grå kant.

Eksempel

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

Prøv det selv

klebrig navigationslinje

tilføj position: sticky;for at oprette en klebrig navigationslinje.

Klebrige elementer skifter mellem relativ og fast position baseret på rulningsposition. Det er relativt placeret, indtil det møder den angivne afstand i visningsområdet - derefter 'sætter' det sig på den passende position (f.eks. position:fixed).

Eksempel

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

Prøv det selv

Bemærk:Internet Explorer, Edge 15 og tidligere versioner understøtter ikke fastgørelse. Safari kræver -webkit- præfiks (se eksemplet ovenfor). Du skal også specificere top、højre、nederst eller venstre Mindst én, for at gøre fastgørelse fungerer.

Flere eksempler

Responsiv top导航
Sådan bruges CSS medieforespørgsler til at oprette et responsivt top导航.
Responsiv side导航
Sådan bruges CSS medieforespørgsler til at oprette et responsivt side导航.
Rullemenu
Sådan tilføjes en rullemenu til navigationsfeltet.