Меню на 3 нива само с CSS
10-01-2011
Така , това е урок напсан лично от мен (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 ефект, няма да обяснявам
точно как става номера, направо го вижте.Ей тука ще напиша ей така едно безмислено изречение , в което ще кажа ,че кода е написан за уеб-торист.нет от Йордан Щерев, с цел да не се краде по други форуми.
Интересното тук е ,че съм добавил <span>. Той ми е необходим именно за да се направи менюто разтегливо, като за да работи под ИЕ също е флоатнато и е блоков
елемент, много е важно да се флоатна, защото в ИЕ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;
Стилизираме си <li> списъка да е на 1 ред, т.е те взимат стила на <li>-тата, които им се падат родители, просто донаместваме падинги и други, ако има.
В цсс-а вече задавам стила на <а> таговете, като тук използвам следната структура в цсс-а .navigation ul.drop a , като може и по-просто да се напише :-).

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

Следващото ниво на структорно ниво е аналогочно на по-горното. В съответното <li> добавяме нов смисък. на лито , добавяме клас, който да контролира показването на списъка.
Съответно <ul> тага му ссе задават съответните стилове, като в моя случай списъка заема широчината на най-дългия линк в него, като за целта съм ползвал 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), за един проект.
- Урока е написан специално за потребителите на www.web-tourist.net

Свали демо!






/ Трябва да сте регистриран за да напишете коментар /
От: adrian
23:21 12-01-2011
Екстра е урокът.
Само малко промени може да се направят, за да може ако напишеш някой по-дълъг линк в основното меню да не остава без фон.

.navigation a.base{
padding-left:10px;
display:block;
float:left;
height:26px;
color:#3e3d40;
text-decoration:none;
font:normal 14px Georgia,Verdana;
background: url(../images/navigation.png) no-repeat left 0px;
}

става:

.navigation a.base{
padding-left:10px;
display:block;
float:left;
height:26px;
color:#3e3d40;
text-decoration:none;
font:normal 14px Georgia,Verdana;
background: #D4E0E3 url(../images/navigation.png) no-repeat left 0px;
}

и

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

става

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

и така като се направи може линковете да стават колкото искат дълги без притеснения, че ще стане повече от картинката. По този начин можем да заменим и картинката с тази: http://web-tourist.net/userfiles/3/3363.png
От: shterev
23:50 12-01-2011
И така става, но пък ако картинката има градиент метода ти е неподходящ и е по добре да се удължи картинката :)
От: adrian
11:50 13-01-2011
Така е, но в случая няма :)

Иначе идеята за dropdown menu само с css винаги ми се е струвала плашеща, а явно не било толкова трудно (дори три нива :) )
От: batmanabg
13:16 22-07-2011
Полезен урок.
1