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ů

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