Hur skapa: Stor meny

Lär dig hur du skapar en stor meny (en fullvidd rullgardin i navigationsfältet).

Skapa en stor meny

Skapa en rullgardin som visas när användaren hoverar över elementen i navigationsfältet.

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">Rullgardin</button>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Stor meny</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Kategori 1</h3>
          <a href="#">Länk 1</a>
          <a href="#">Länk 2</a>
          <a href="#">Länk 3</a>
        </div>
        <div class="column">
          <h3>Kategori 2</h3>
          <a href="#">Länk 1</a>
          <a href="#">Länk 2</a>
          <a href="#">Länk 3</a>
        </div>
        <div class="column">
          <h3>Kategori 3</h3>
          <a href="#">Länk 1</a>
          <a href="#">Länk 2</a>
          <a href="#">Länk 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Exempel förklaring:

Man kan använda vilket element som helst för att öppna rullgardinsmenyn, t.ex. <button>-, <a>- eller <p>-element.

Använd container-elementet (t.ex. <div class="dropdown-content">) för att skapa en rullgardinsmeny och lägg till ett nätverk (kolumner), sedan lägg till rullgardinslänkar inom nätverket.

Använd <div class="dropdown"> elementet för att omge knappen och container-elementet (<div class="dropdown-content">) för att korrekt positionera rullgardinsmenyn med CSS.

Steg 2 - Lägg till CSS:

/* Container för navigationsfältet */
.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;
}
/* Rullgardinsmeny container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Rullgardinsmenyknapp */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Vigtigt för vertikal justering på mobila enheter */
  margin: 0; /* Vigtigt för vertikal justering på mobila enheter */
}
/* Lägg till röd bakgrundsfärg för navigationslänkar när musen är över */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Vertikalt dolda rullgardinslista innehåll */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Stora menyrubrik (om nödvändigt) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Visa rullgardinsmenyn vid muspekarens övergång */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Skapa tre lika breda kolumner och låt dem flyta bredvid varandra */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Ställ in stilar för länkar inom kolumnen */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Lägg till bakgrundsfärg vid muspekarens övergång */
.column a:hover {
  background-color: #ddd;
}
/* Rensa flödet efter kolumnen */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Prova själv

Exempel förklaring:

Vi har satt bakgrundsfärg, padding och andra stilar för navigationsmenyn och navigationslänkar.

Vi har satt bakgrundsfärg, padding och andra stilar för rullgardinsmenyns knapp.

.dropdown-content Klassen innehåller den faktiska rullgardinsmenyn. Den är som standard dold och visas när muspekaren hålls över (se nedan). Den är placerad precis under rullgardinsmenyns knapp och bredden är satt till 100%, för att täcka hela skärmen.

Vi använder inte kanter utan box-shadow egenskap, gör att rullgardinsmenyn ser ut som en "kort“. Vi använder också z-index Placera rullgardinsmenyn framför andra element.

:hover Väljare som visas när användaren håller muspekaren över rullgardinsmenyns knapp.

.column Klasser används för att skapa tre bredvid varandra flytande kolumner i rullgardinsmenyn (för att visa olika kategorier).

Relaterade sidor

Tutorial:CSS rullgardin

Tutorial:Hur skapar man en klickbar rullgardinsmeny

Tutorial:CSS navigationsfält

Tutorial:Hur skapar man en responsiv toppnavigationsmeny