Днес един колега потърси от мен помощ – опитваше се да създаде rollover ефект за едно навикационно меню, изградено с картинки. Беше намерил някакво описание за постигане на този ефект с javascript, писано предполагам предишния век и вклочващо нещо такова:

if(document.all){
...
}else{
...
}
<a onmouseover="..." onmouseout=".." href="#"><img src="..." alt="" /></a>

За всички начиваещи уеб-разработчици, които ще попаднат на такива описания за постигане на rollover ефект – моля, просто ги пропускайте и намерете правилното решение. А то трябва да отговаря на няколко условия:

• Да изпълзва CSS за постигане на ефекта
• Да използва структуриран HTML за описване на съдържанието
• Ако използва javascript, нека го прави по ненатрапчив начин

Ще се опитам набързо да покажа как да създадете достъпна, правилно структурирана навигация, със задължителния rollover ефект. Първо ще маркираме менюто като неподреден списък:

<ul id="navigation">
	<li><a href="#">начало</a></li>
	<li><a href="#">продукти</a></li>
	<li><a href="#">контакти</a></li>
</ul>

Ще се запитате защо неподреден списък? Защото не е ли навигацията списък с основните раздели в сайта? Нека сега му придадем малко вид на изглед:

ul#navigation {
margin:0;
padding:0;
list-style-type:none;
background: URL(navbg.jpg) repeat-x #ab0e0e;
}

ul#navigation li {
display:inline-block;
margin:0;
padding:0;
}

ul#navigation li a {
display:inline-block;
padding: 5px 10px;
background: URL(navbg.jpg) repeat-x #ab0e0e;
color: #fff;
text-decoration:none;
font-weight:bold;
font-family:sans-serif;
}

ul#navigation li a:hover {
background: URL(navbgon.jpg) repeat-x #8909b8;
color: #ff0;
}

С първото правило указваме стила за ul елемена, основното тук е да махнем черните кръгчета пред отделните елементи в списъка. След това указваме за всички елементи на списъка свойството display да има стойност inline-block. Това значи да се държат като текст, следвайки нормалния поток отляво на дясно, и същевременно да генерират своя кутия с вътрешни и външни отстояния. По същия начин оформяме и връзките, като освен това им задаваме фон (някаква преливка, която нарисувах набързо в Gimp) и цвят на шрифта. Задаваме и малко вътрешно отстояние, за да не се залепва текста по краищата и минимално оформяме текста. И накрая ефекта при преминаване с мишката върху елемента – подменяме фона и цвета на текста и получаваме това, което някога правехме с доста javascript.

В горния пример съм задал шрифта да е просто sans-serif, но ако искаме да използваме някой нестандартен шрифт какво правим? Ми ще се обърнем към някоя от техниките за подмяна на текста с картинки, които съм описал тук. Моят избор е варианта, при който даваме голямо отрицателно начално отместване на текста така, че да излезе извън елемента и оставяме да се вижда предварително подготвената картинса за фон. За целта обаче ще поставим на всяка връзка атрибут id, за да можем да им зададем различни фонови картинки:

<ul id="navigation">
	<li><a id="menu1" href="#">начало</a></li>
	<li><a id="menu2" href="#">продукти</a></li>
	<li><a id="menu3" href="#">контакти</a></li>
</ul>

И ще напишем отделни стилове за всеки линк:

ul#navigation li a {
display:block;
height:25px;
text-indent: -3000px;
}

ul#navigation li a#menu1 {
width:85px;
background: URL(navbg1.jpg) no-repeat top #ab0e0e;
}

ul#navigation li a#menu1:hover {
background: URL(navbg1on.jpg) no-repeat top #8909b8;
}

ul#navigation li a#menu2 {
width:95px;
background: URL(navbg2.jpg) no-repeat top #ab0e0e;
}

ul#navigation li a#menu2:hover {
background: URL(navbg2on.jpg) no-repeat top #8909b8;
}

ul#navigation li a#menu3 {
width:90px;
background: URL(navbg3.jpg) no-repeat top #ab0e0e;
}

ul#navigation li a#menu3:hover {
background: URL(navbg3on.jpg) no-repeat top #8909b8;
}

За да се изобразят правилно връзките в IE се наложи да им променя свойството display на block, което слава богу на повлия на останалите браузъри.

Демонстрираните примери трябва да работят във всички съвременни браузъри, единствено за Firefox 2 трябва освен display: inline-block да се добави и display: -moz-inline-block, тъй като в тази версия лисицата не поддържа директно това свойство. Но както винаги IE има малки проблеми. Оказва се, че display:inline-block работи само за елементи, които обикновенно са inline. За да станат li елементите inline-block в IE се налага лек хак:

zoom:1;
*display:inline;

И така, пълния CSS за елементите на списъка става:

ul#navigation li {
display:-moz-inline-block;
display:inline-block;
zoom:1;
*display:inline;
width:auto;
margin:0;
padding:0;
}

Ако ви трябва сравнение на поддръжката на различните стойности на свойството display в различните браузъри, QuirksMode.org е мястото, където да търсите.

Крайния резултат можете да видите тук. Не направих много хубави изображения, но мисля, че илюстрират достатъчно добре идеята.

Етикети: CSS, howto, HTML, rollover, навигация