Jak na horizontální vysouvací menu

Dnes si ukážeme, jak vytvořit jednoduché horizontální vysouvací menu.

Demo

Příprava html

Nejprve si připravíme html kód, kterému následně přidáme css styly. Kód se bude skládat z obalového divu, kterým vymezíme prostor v menu. A elementů UL a LI, které se využívají pro seznam. Více o seznamech se můžete dozvědět například zde.

HTML kód by mohl vypadat takto:

      <div id="navi">
          <!--
          Author: Jan Matoušek
          Contact: matousek.vr@gmail.com
          License: GPL
          -->
          <ul class="level-1">
              <li class="level-1"><a href="odkaz">A</a>
                  <ul class="level-2">
                      <li class="level-2"><a href="odkaz">A1</a></li>
                      <li class="level-2"><a href="odkazr">A2</a></li>
                      <li class="level-2"><a href="odkaz">A3</a></li>
                      <li class="level-2"><a href="odkaz">A4</a></li>
                  </ul>
              </li>
              <li class="level-1"><a href="odkaz">B</a>
                  <ul class="level-2">
                      <li class="level-2"><a href="odkaz">B1</a></li>
                      <li class="level-2"><a href="odkazr">B2</a></li>
                      <li class="level-2"><a href="odkaz">B3</a></li>
                      <li class="level-2"><a href="odkaz">B4</a></li>
                  </ul>
              </li>
              <li class="level-1"><a href="odkaz">C</a>
              </li>
          </ul>
        </div>
menu bez stylů

menu bez stylů

 

ul s class=“level-1″ je definice první úrovně menu a li s class=“level-1″ jsou jednotlivé položky menu v první úrovni.Pokud položka obsahuje submenu, tak do ni vložíme, kromě odkazu, ještě další seznam (UL) a do něj položky (LI class=“level-2)

 

 

Nastylování

Obalový div

Nejprve si nastylujeme obalový div. Nastavíme mu tedy nějakou výšku a šířku (height, width) a vycentrujeme si ho na střed. K vycentrování elementu na střed se používá margin:auto; Ještě si můžeme zvolit nějaké pozadí. Buď mu můžeme nastavit obrázek, barvu nebo můžeme využít tohoto css gradient generátoru, který nám vygeneruje hezký přechod.

          #navi{
            width: 500px;
            height: 50px;
            margin: auto;

            background: #1e5799; /* Old browsers */
            background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
            background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
          }

Menu – základ

Nejprve si vyresetujeme ul a li elementy, to uděláme tak, že jim nastavíme margin a padding na 0px. li elementu nastavíme list-style: none; Tím odstraníme odrážky

          #navi ul{
            margin: 0;
            padding: 0px;
          }

          #navi li{
            list-style: none;
            margin: 0;
            padding: 0;
          }

Menu – první úroveň

Nyní se budeme věnovat menu první úrovně.

Aby jsme získali horizontální zarovnání, tak nastavíme elementu li se třídou level-1 obtékání z leva (float:left;).  Odkazu v menu ještě nastavíme display:block díky němuž budeme moci odkazu nastavit padding a tím zvětšíme „klikatelnou plochu“.  Dále odkaz zkrášlíme bílou barvou a odstraněním podtržení (text-decoration: none;).

          #navi li.level-1{
            float: left;
          }

          #navi li.level-1 a{
            display: block;
            padding: 15px;
            color: #FFFFFF;
            text-decoration: none;
          }

Menu – druhá úroveň

Nyní si nastylujeme odkaz u 2. úrovně. Musíme mu nastavit padding: 0; a dáme mu nějaký margin, ať nejsou odkazy namačkané na sobě. Nastavíme mu černou barvu a to by mohlo stačit.

          #navi li.level-2 a{
            color: #000000;
            padding: 0px;
            margin: 10px;
          }

 

Teď nastal čas, kdy si skryjeme 2. úroveň. To nebude nic těžkého, stačí elementu ul se třídou level-2 nastavit display:none; a tím ho skryjeme. Nastavíme mu absolutní pozici a to proto, aby nám neovlivňoval položky menu v první úrovni. (můžete si ve výsledném kódu vyzkoušet s a bez) hodnoty top a left nebudem nastavovat, pokud by jsme je nastavili na 0, tak by se nám menu zobrazovalo v horním levém rohu. Pokud tyto hodnoty nejsou nastaveny, tak se menu zobrazí, tak jak má i když má absolutní pozicování.

          #navi ul.level-2{
            position: absolute;
            display: none;
          }

 

Tak a nyní, jak už asi tušíte, potřebujeme menu zobrazovat při přejetí myší. Toho docílíme jednoduše. Tímto zápisem #navi li.level-1:hover ul.level-2. Zápis znamená že po najetí myši (hover) nad elementem li se třídou level-1 se nastaví elementu ul se třídou level-2 požadované vlastnosti. Elementu nastavíme display:block; a tím jej zobrazíme. Podobným zápisem nastavíme pozadí elementu li s třídou level-1.

          #navi li.level-1:hover ul.level-2{
            display: block;
            background-color: #FFFFCC;
          }

          #navi li.level-1:hover{
            background-color: #66CCFF;
          }

 

Pokud se vám článek líbil, budu rád za sdílení a doporučení ostatním. Děkuji

Označeno v Ostatní, Webdesign
6 komentářů “Jak na horizontální vysouvací menu
  1. Jan Matoušek napsal:

    Velmi častou chybou je, že se hover nastavuje na odkaz (a:hover) Zde je nutnost mít zápis: #navi li.level-1:hover ul.level-2 (třídy samozřejmě nemusí být takto, ale hlavní je, že hover musí být na elementu li.)

  2. Ondra napsal:

    Dobrý den. Dovolil sem si použít Vaše logo. Vše chodí jak má, jen pod lištou, kde je menu uložené mi jezdí slider a to menu vzjíždí právě za něj. Poradíte mi, co s tím? Děkuju za odpověď.

  3. Honza napsal:

    Zdravim,
    tento navod je super, ale potreboval bych jestli jde nejak upravit na viceurovnove horizontalni menu.
    Diky moc.

  4. Jan Matoušek napsal:

    Zdravím, zrovna jsem tento dotaz řešil přes e-mail. Šlo by to například takto:

    #navi li{
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative; /* doplněno */
    }
    #navi ul.level-3{
        display: none;
        position: absolute;
        top: 0;
        left: 39px;
        background: red;
        width: 150px;
        float: right;
    }
    
    #navi li.level-2:hover ul.level-3{
      display: block;	
    }
    

    .
    .
    .

    <li class='level-2'>
        <a href='odkaz'>B2</a>
        <ul class='level-3'>
            <li class='level-3'><a href='odkaz'>B2-1</a></li>
            <li class='level-3'><a href='odkaz'>B2-2</a></li>
            <li class='level-3'><a href='odkaz'>B2-3</a></li>
        </ul>
    </li>
    <li class='level-2'><a href='odkaz'>B3</a></li>
    <li class='level-2'><a href='odkaz'>B4</a></li>
    <li class='level-2'>
        <a href='odkaz'>B5</a>
        <ul class='level-3'>
            <li class='level-3'><a href='odkaz'>B5-1</a></li>
            <li class='level-3'><a href='odkaz'>B5-2</a></li>
            <li class='level-3'><a href='odkaz'>B5-3</a></li>
            <li class='level-3'><a href='odkaz'>B5-4</a></li>
        </ul>
    </li>
    

    Je to doplněk ke kódu výše. Nelíbí se mi, že je tam pevná ta pozice (left), ale nenapadá mě u tohoto příkladu, jak to řešit jinak.

  5. Milan napsal:

    opravdu super návod, díky moc!

Napsat komentář k Ondra Zrušit odpověď na komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">

O AUTOROVI BLOGU

Jmenuji se Jan Matoušek a jsem vývojář webových aplikacích.

Mé portfolio