laptop blog

Proste rozwijane poziome menu w CSS

Czas czytania: 4 minut

W tym tygodniu pokażę wam jak zbudować proste poziome rozwijane menu (ang. top dropdown) korzystając z CSS i HTML. Dla nie wtajemniczonych chodzi o takie zwykłe górne menu na stronę internetową.

Nie będzie ono szczególnie imponujące gdyż skupiłam się główniej na zasadach oraz mechanice a nie na ozdobnikach. Dzięki temu będziecie mogli w łatwy sposób je zmodyfikować i wykorzystać na dowolnej stronie.

Jak zbudować poziome rozwijane menu

Menu, które stworzymy będzie jak wspomniałam dość proste i raczej pozbawione specjalnych efektów, tak aby jak najlepiej pokazać zasady jego działania. Ułatwi wam to później samodzielną budowę.

Naszą pracę zaczniemy od zbudowania szkieletu HTML naszego menu. W większości przypadków menu oparte są o zwykła listę HTMLodnośnikami. Jednak nie jest powiedziane, że tak będzie zawsze. Menu może składać się również z samych anchorów lub anchorów otoczonych <div>.

Menu na bazie listy

Na początek więc tworzymy zwykłą listę HTML (podlinkowałam wam wpis o wypunktowanych listach powyżej). I dodajemy w niej odnośniki.

W związku, że budujemy rozwijane menu część odnośników będzie musiała posiadać zagnieżdżona drugą listę. Tak jak na poniższym przykładzie:

Jak widzicie 2 punkty posiadają dodatkową drugą listę w środku. Jeśli nie wiecie jak tworzyć takie elementy nie wpadajcie w panikę 🙂 . Nie należą one w cale do zbyt skompilowanych. Nasz kod obecnie prezentuje się następująco:

<ul class="menu">
<li>
  <a href="">Link 1</a>
</li>
<li>
  <a href="">Link 2</a>
</li>
<li>
  <a href="">Link 3</a>
   <ul>
    <li>
       <a href="">Link 3 1</a>
    </li>
    <li>
      <a href="">Link 3 2</a>
    </li>
   </ul>
</li>
<li>
   <a href="">Link 4</a></li>
<li>
   <a href="">Link 5</a>
</li>
<li>
   <a href="">Link 6</a>
    <ul>
     <li>
        <a href="">Link 6 1</a>
     </li>
     <li>
        <a href="">Link 6 2</a>
     </li>
   </ul>
</li>
<li>
   <a href="">Link 7</a>
</li>
</ul>

Jak widać powyższy kod nie wygląda za ciekawie – posiadamy jedynie wypunktowaną listę składającą się z znaczników <ul> oraz <li>. Jest to więc tradycyjne wypunktowanie z zagnieżdżeniem – drugim wcięciem.

Po usunięciu fragmentu kodu widać, że element <li> posiada w sobie drugą listę.

<li> 
 <ul>
  <li> 
  </li> 
 </ul> 
</li>

Taka lista będzie dodatkowo jeszcze przesunięta w stosunku do listy obiektu nadrzędnego (rodzica).

Dodatkowym znacznikiem jaki się tu pojawia jest <a> dzięki, któremu linkujemy do wybranych elementów (stron, podstron). O tym znaczniku pisałam już w innym wpisie dlatego odsyłam was do niego.

Oscylowanie listy

Teraz w pliku ze stylami strony umieszczamy następujący kod:

.menu{
  padding: 0px;
  margin:0px;
  displayinline-block;
}
.menu li{
  float:left;
  list-style:none;
}
.menu li a{
  padding: 20px 15px;
  display: inline-block;
  text-decoration:none;
  color: #ff5252;
}
.menu li:hover a{
    background: #333;
    color: #fff;
}
.menu li ul{
   margin: 0;
   padding: 0;
}

W tej chwili nasza lista zaczyna przypominać już zwykłe menu, chociaż nie do końca:

Wszystko jest delikatnie mówiąc rozjechane. Powodem tej sytuacji jest nasza druga lista. Musimy coś z nią zrobić. W gotowym menu powinna się ona chować i nachodzić nad elementy strony.

Dlatego teraz uzupełnimy nasz kod CSS o kilka zmiennych.

.menu li ul{
   margin: 0;
   padding: 0;
   position: absolute;
   z-index: 100;
  display:none;
}
.menu li:hover ul{
  display:block;
}
.menu li ul li{
  display:block;
  width: 100%;
}
.menu li ul li a{
  width: 100%;
}

Jak widać zmodyfikowałam „.menu li ul” poprzez dodanie mu position: absolute; oraz przesunęłam na wyższą warstwę z-index: 100;.

Druga lista ma także ustawioną opcję dislay:none; w efekcie od tej chwili jest ona na stronie niewidoczna. Status ten może jednak ulec zmianie .menu li:hover ul. O statusie :hover również pisałam już wielokrotnie. Jest to bowiem bardzo użyteczne zjawisko w CSS i chyba najczęściej wykorzystywane.

Jak widać na obrazku powyżej mamy teraz w jednym, rzędzie elementy listy (poza Link 7 – ale tym się zajmę za chwilę). Natomiast po najechaniu kursorem myszy na obiekt z drugą listą pokazuje się coś takiego.

Jak widać jeszcze musimy nad tym popracować.

Zacznę od zmniejszenia odległości pomiędzy elementami budowanego menu. W moim przypadku powodem jest margin na elementach li. Dlatego do kodu dopiszę margin:0; przy .menu li.

Kolejne zmiany to:

.menu{
  padding: 0px;
  margin:0px;
  position:relative;
}
.menu li{
  float:left;
  list-style:none;
  margin:0; 
}
.menu li a{
  padding: 20px 15px;
  display: inline-block;
  text-decoration:none;
  position:relative;
  z-index: 1;
  color: #ff5252;
  text-transform:uppercase;
}
.menu li:hover a{
    background: #333;
    color: #fff;
}

Tu się jednak na chwilę zatrzymam. Jakiś czas temu stworzyłam krótki kurs budowy strony internetowej. W ramach jego jednym z elementów było menu. Pojawił się tam też znacznik <nav>. <nav> to znacznik stosowany w HTML5. I wydaje mi się, że powinno się go tu dodać.

<nav>
 <ul class="menu">
<li>
  <a href="">Link 1</a>
</li>
<li>
  <a href="">Link 2</a>
</li>
<li>
  <a href="">Link 3</a>
  <ul>
     <li>
        <a href="">Link 3 1</a>
     </li>
     <li>
        <a href="">Link 3 2</a>
     </li>
</li>
  </ul>
<li>
   <a href="">Link 4</a></li>
<li>
   <a href="">Link 5</a>
</li>
<li>
   <a href="">Link 6</a>
    <ul>
     <li>
        <a href="">Link 6 1</a>
     </li>
     <li>
        <a href="">Link 6 2</a>
     </li>
   </ul>
</li>
<li>
   <a href="">Link 7</a>
</li>
</ul> 

</nav>

Mnie ten znacznik nie jest potrzebny, ale jeśli budujecie menu dla swojej strony to powinien się on tam znaleźć.

Jak widać nie jest to zbyt skomplikowany kod ?

Jak widać udało nam się je uruchomić.

Poniżej możecie zobaczyć rozszerzoną wersję mojego kody o kilka animacji.

See the Pen
Easy dropdown menu
by Aura (@Julka85)
on CodePen.

Teraz może trochę objaśnień:

– stworzyliśmy poziome menu rozwijane na bazie wypunktowanej listy (można zrobić podobne z pomocą DIV)
– będzie na całą szerokość kontenera ponieważ nie zostało ograniczone
– jego wygląd w dużej mierze zależy od nas samych i naszych potrzeb
– menu działa na zasadzie hover effect – czyli efekt rozwijania uaktywnia się po najechaniu kursorem myszy w określone miejsce (obiekt)

Oczywiście, to że nie wykołatałam w tym przykładzie JavaScript nie oznacza, że nie można go dodać w kolejnych etapach np. dodając ciekawe efekty na hover. Przykładem tym chciałam jedynie pokazać, że można utworzyć prostą i funkcjonalną nawigację strony internetowej jedynie z wykorzystaniem HTML i CSS.