CSS - Хоризонтално падащо меню
Всеки, който е създавал падащи менюта е запознат с количеството код необходимо за създаването на такъв род менюта. Възможно е с използването на структуриран HTML и прост CSS да се създаде интересно меню, лесно за редактиране и ъпдейтване, което работи с повечето браузери, включително и Internet Explorer

Ето един пример


Създаване на менюто
Първата и най-важна част е създаване структурата на менюто. Най-добрият начин е с използване на неподреден списък, като подменюто е списък намиращ се непосредствено до предхождащият го линк. Сложно ли звучи? Всъщност е много просто:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>

Това е то: малко прост HTML, който е достъпен и лесен за редактиране.

Визуално интересен?
Ако видите резултата от кода по горе ще откриете доста скучен списък, а аз ви обещах, че ще е визуално интересен! Нека добавим малко стил.

Първата стъпка е да премахнем indent-а и bullet-ите от неподреденият списък и да дефинираме широчината на менюто.
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

Следващото което ще направим е да позиционираме. За щастие, менюто ще застане в вертикална посока, а това е точно каквото искаме. Както и да е.. Трябва да позиционираме менюто като "relative", защото подменютата ще са точно до предхождащите ги линкове.

ul li {
position: relative;
}

Следващата стъпка са подменютата. Искаме те да се появяват в дясно от предхождащият ги линк, когато поставим мишката върху него:

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

Използвайки атрибутите "left" и "top", ние можем да позиционираме всяко под меню точно до предхождащият го линк. Може би сте забелязали, че съм сложил 149 пикесла на "left" (1 пиксел по-малко от широчината на менюто), това позволява на подменюто да застъпи главното и да не се получи двоен border. (ще видите за какво говоря по-късно)

За да скрия подменютата съм използвал "display: none;"
Вече имаме структура, но все още менюто изглежда просто. Нека да стилизираме линковете.

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

Стилизирах линковете по мой вкус, но те могат да бъдат променени. Важното тук е "display: block;" тъй като искаме всеки линк да заема определеното му място.

Вече нещатаизглеждат малко по-добре, въпреки че потребителите използващи Internet Explorer за Windows няма да се съгласят. За жалост, IE тълкува разстоянията между нашият добре оформен HTML списък като празно място, забелязвате че нашите бутони не стоят леко раздалечени един от друг в браузера. Както и да е, има начин с който да избегнем този бъг:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */


Използваме хакът Holly, който скрива тези правила за всички браузери освен за IE. Перфектно. Забелязвате, че сме добавили "height: 1%" , което за нещастие (отново!) води до друг проблем с IE, изискващ поставянето на височина за да могат линковете да се изобразяват като блок елемнти.

Също сте забелязали липсата на линия в долната част на менюто, това ще се оправи с добавянето на border-bottom. Затова ul ще стане:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

С малко късмет, всеки ще може да види не функциониращото меню.

Да го накараме да заработи
И сега, забавната част. Ще трябва да направи подменюто да се показва когато мишката се намира върху линка.
li:hover ul { display: block; }
Воала! Ето го и работещото меню в дейстрив.

Йо! Работи! Чувам 1% от вас как викат. Страхотно!

ОК, тази кръпка за IE разваля всичко и не работи правилно. IE позволява използването на :hover само за линкове, така че li:hover няма да ни свърши работа тук.

Малък JavaScript е нужен за да накараме IE да заработи правилно:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

И така, сега :hover правилото ще добие следния вид:

li:hover ul, li.over ul {
display: block; }

Допълнително ще трябва да асоциираме JavaScripta с главното ul, и то ще стане:
<ul id="nav">


Да се надяваме, че сега всеки ще може да види менюто в правилният му вид.

IE 5.01 подскачащ бъг
Всеки, който ползва IE 5.01 под Windows забелязва, че менюто подскача когато поставите мишката върху него. Проблема може да се реши лесно, като променим предишния хак ето така:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


Мистерията на бъга за IE6.0
Пишейки тази статия, открих странен бъг, който смятам, че е само при IE 6.0. Трябва да се декларира background за li в противен случай, когато подменюто се появи линковете изчезват преди да успеете да щракнете върху тях. Странно! Пробвайте и вие.

Направете го по свой начин

Tова е то! Метод, по-който да направим добре изглеждащо падащо меню съобразено със стандартите. Всичко което трябва да направите сега е да добавите малко стил.

Урокът е публикуван със съгласието на автора http://www.alistapart.com .

/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:25 22-07-2011
Полезен урок.
1