Меню на 3 нива само с CSS

Автор: shterev

Така , това е урок напсан лично от мен (Shterev), който цели да покаже структурата и изграждането на меню, което има 2 нива на под менюта.
Необходим ни е само CSS2, за което съм и използвал една картинка за главните бутони – може да се направи и с css3, но тогава ефекта от заоблянето,
няма да го има в IE или ще трябва да слагате javascript-и допълнителни.
Менюто работи под всички браузъри освен ИЕ6. където просто трябва да се добави javascript код, който да играе ролята на :hover.

За структура съм използвал <ul> списъци.

Имаме главен <ul> , в него имаме нормални ,<li> , който съответно имат и <а> тагове.
На главния <ul> слагам клас ‘navigation’, а <li> тата задаваме един default стил.
На онези <li> тагове, които ще имат падащи менюта им се добава друг стил/клас – в случая ‘showdrop’.
На <а> таговете на главните бутони слагам клас ‘base’ , за да ми е по-удобно в цсс-а.
До тук менюто изглежда така:

Структура:
<ul class="navigation">
<li><a class="base" href="#"><span>За нас</span></a></li>
<li><a class="base" href="#"><span>Връзка с обществеността</span></a></li>
<li><a class="base" href="#"><span>Продукти</span></a></li>
</ul>

В цсс-а какво правим?
Ами просто аз в този случай съм направил една картинка със заоблени краища, и менюто е подобно от предния ми урок, самоче картинката е една (спрайт).
Та задаваме ширина и височина на .navigation , както и релативна позиция, която ще ни помогне при позициониранеот на <ul> от 3 -тото ниво.
На <li> тата задаваме да са са флоатнати в ляво, и съответно падинг, колкото е необходим.

На главните <а> слагаме клас .base и съответно да са блокови елементи, за да можем да им зададем размери, картинка.Те също са флоатнати и НЯМАТ ширина (width), по простата причина, че текста в тях ще се разтяга. Задал съм им една картинка за нормално състояни и за :hover ефект, няма да обяснявам точно как става номера, направо го вижте.Ей тука ще напиша ей така едно безмислено изречение , в което ще кажа ,че кода е написан за уеб-торист.нет от Йордан Щерев, с цел да не се краде по други форуми.
Интересното тук е ,че съм добавил . Той ми е необходим именно за да се направи менюто разтегливо, като за да работи под ИЕ също е флоатнато и е блоков елемент, много е важно да се флоатна, защото в ИЕ6 менюто се чупи.
Следваща стъпка е добавянето на нов списък <ul>с клас ‘drop’ , който е в съответното <li> , а на това ли добавяме клас ‘showdrop’. Тук имаме и разделител ‘ | ‘ .

Структура:
<ul class="navigation">
<li class="showdrop">
<a class="base" href="#"><span>За нас</span></a>
<ul class="drop">
<li class="showsuper"> <a href="#">Нашия екип</a></li>
<li class="showsuper" >
&nbsp; | &nbsp;
<a href="#">Счетоводна отчетност</a>
</li>
</ul>
<li><a class="base" href="#"><span>Връзка с обществеността</span></a></li>
<li><a class="base" href="#"><span>Продукти</span></a></li>
</ul>

Особеното на тоя <ul> е, че той трябва да ми заема цялата ширина, като му задавам ширина. Вече имаме абсолютна позиция, за да може да е под основните бутони.

Този списък не стрябва да се вижда , като му задавам display:none;
Стилизираме си списъка да е на 1 ред, т.е те взимат стила на -тата, които им се падат родители, просто донаместваме падинги и други, ако има.
В цсс-а вече задавам стила на <а> таговете, като тук използвам следната структура в цсс-а .navigation ul.drop a , като може и по-просто да се напише :-).
Така как става номера когато посочим <li class=“showdrop“>да се показва <ul class=“drop“>, ами много просто – на .showdrop задаваме следния цсс:
.navigation li.showdrop:hover ul.drop{ display:block; } – просто при посочване списъка да става блоков елемент и съответно той става видим.
До тук изградихме меню на 2 нива – главно и едно падащо.

Следващото ниво на структорно ниво е аналогочно на по-горното. В съответното <li> добавяме нов смисък. на лито , добавяме клас, който да контролира показването на списъка.
Съответно
тага му ссе задават съответните стилове, като в моя случай списъка заема широчината на най-дългия линк в него, като за целта съм ползвал white-space: nowrap;
Другата осовеност е,че този списък също има position:absolutе; за да мога да го позиционирам да е под съответните линкове.На литата вече махам флоатинга , за да станат едно под друго.
Структурата вече е както в демото.
Една тънкост/особеност ще забележите,че при посочване на линковете от 2-то и 3-тот ниво главния бутон си стои все едно е посочен.
За да стане този ефект, просто задавам когато главното <li> e почочено , на <а> тага в него да се сменя бекграунда, съответно и на спана в <а> тага.

Ето го и кода:

.navigation li:hover a.base{ background-position:left -52px; color:#fefefe; }
.navigation li:hover a.base span{ background-position:right -78px; color:#fefefe; }

От демото най-ясно се вижда ефекта на цялото меню.
Със сигурност ще имате неяснотии и въпроси. Ако имате въпроси питайте 🙂

• Кода е писан лично от мен (Shterev), за един проект.
• Урока е написан специално за потребителите на web-tourist.net

Свали демо!