Hur skapas: Nederlagsmenynavigationsfält

Lär dig hur du skapar en nederlagsmenynavigationsfält

Skapa en nederlagsmenynavigationsfält

När användaren flyttar muspekaren över element inom navigationsfältet visas en nederlagsmeny.

Steg 1 - Lägg till HTML:

<div class="navbar">
  <a href="#home">Hem</a>
  <a href="#news">Nyheter</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Länk 1</a>
      <a href="#">Länk 2</a>
      <a href="#">Länk 3</a>
    </div>
  </div>
</div>

Exempel förklaring:

Använd vilket element som helst för att öppna nederlagsmenyn, till exempel <button>, <a> eller <p>-element.

Skapa en nederlagsmeny med en container-element (t.ex. <div>) och lägg till nederlagsmenylänkar i den.

Omslut knappen och en annan <div>-element med ett <div>-element för att korrekt positionera nederlagsmenyn med CSS.

Steg 2 - Lägg till CSS:

/* Navigationsfältets container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Länkar inom navigationsfältet */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Nederlagscontainer */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Nederlagsknapp */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* För vertikal justering på mobiler är detta mycket viktigt */
  margin: 0; /* Vigtigt för vertikal justering på mobiler */
}
/* Lägg till en röd bakgrundsfärg till navigationslänkarna när muspekaren hålls över */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Innehåll i rullgardinsmenyn (som standard dold) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Länkar i rullgardinsmenyn */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Lägg till en grå bakgrundsfärg till länken i rullgardinsmenyn när muspekaren hålls över */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Visa rullgardinsmenyn när muspekaren hålls över */
.dropdown:hover .dropdown-content {
  display: block;
}

Prova själv

Exempel förklaring:

Vi har redan satt bakgrundsfärg, inre marginaler och andra stilar för navigationsfältet och navigationslänkarna.

Vi har redan satt bakgrundsfärg, inre marginaler och andra stilar för knappen för rullgardinsmenyn.

.dropdown klassen är .dropdown-content kapsel. Eftersom detta är en <div>-element, inte en <a>-element, måste vi göra det flytande för att säkerställa att det förblir vid sidan av länken.

.dropdown-content klassen innehåller den faktiska rullgardinsmenyn. Den är som standard dold och visas när muspekaren hålls över (se nedan).Observera att minsta bredd är satt till 160px. Du kan fritt ändra denna inställning.

Vi använde inte kanter, utan box-shadow egenskapen, så att rullgardinsmenyn ser ut som ett 'kort'. Vi använder också z-index Placera rullgardinsmenyn framför andra element.

:hover Väljare används för att visa rullgardinsmenyn när användaren håller muspekaren över knappen för rullgardinsmenyn.

Klickbara rullgardinsmenyer i navigationsfältet

Prova själv

Relaterade sidor

Tutorial:CSS dropdown menu

Tutorial:Hur skapar du en klickbar rullgardinsmeny

Tutorial:CSS navigation bar

Tutorial:Hur skapar du en responsiv toppnavigationsmeny