Hur man skapar: Navigationsfältets "Mer"-knapp
- Föregående sida Nästa sida/ föregående sida knappar
- Nästa sida Blockknapp
Lär dig hur du skapar en "Mer"-knapp.
Navigationsfältets "Mer"-knapp
Skapa en navigeringsmeny
När användaren flyttar muspekaren över element i navigationsfältet visas en navigeringsmeny.
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">Mer
<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 navigeringsmenyn, till exempel <button>、<a> eller <p>-element.
Skapa en navigeringsmeny med en container-element (t.ex. <div>) och lägg till navigeringsmenylänkar i den.
Förpacka knappen och en annan <div>-element med ett <div>-element för att använda CSS för att korrekt positionera navigeringsmenyn.
Steg 2 - Lägg till CSS:
/* Navigationsfältcontainer */
.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;
}
/* Navigeringsmenycontainer */
.dropdown {
float: left;
overflow: hidden;
}
/* Navigeringsmenyknapp */
.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; /* Viktigt för vertikal justering på mobiler */
}
/* Lägg till en röd bakgrundsfärg för navigationslänkar när muspekaren hänger */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Innehållet i rullgardinsmenyn (som standard är dolt) */
.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 inom 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 för rullgardinsmenylänkar när muspekaren hänger */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Visa rullgardinsmenyn när muspekaren hänger */
.dropdown:hover .dropdown-content {
display: block;
}
Exempel förklaring:
Vi har redan satt bakgrundsfärg, padding och andra stilar för navigationsfältet och navigationslänkar.
Vi har redan satt bakgrundsfärg, padding och andra stilar för rullgardinsmenyknappen.
.dropdown klassen är .dropdown-content innehållare. Eftersom detta är en <div>-element och 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ängor (se nedan).Observera att minsta bredd är satt till 160px. Du kan fritt ändra denna inställning.
Vi använde inte kanter utan använde 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 flyttar muspekaren över rullgardinsmenyknappen.
Relaterade sidor
Tutorial:CSS rullgardin
Tutorial:Hur skapar man en klickbar rullgardinsmeny
Tutorial:CSS navigationsfält
- Föregående sida Nästa sida/ föregående sida knappar
- Nästa sida Blockknapp
