Dnes si ukážeme, jak vytvořit jednoduché horizontální vysouvací menu.
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>
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
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.)
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ěď.
position: absolute
alebo
z-index pouzit
Zdravim,
tento navod je super, ale potreboval bych jestli jde nejak upravit na viceurovnove horizontalni menu.
Diky moc.
Zdravím, zrovna jsem tento dotaz řešil přes e-mail. Šlo by to například takto:
.
.
.
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.
opravdu super návod, díky moc!
Je to zajimavé, ale prosím Vás, jak se z toho dá udělat responzivní menu?