Блогът на Гонзо

Създаване на достъпна навигация с нестандартен шрифт

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

Днес един колега потърси от мен помощ – опитваше се да създаде 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 е мястото, където да търсите.

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

Споделяне

Етикети: , , , ,

6 коментара по “Създаване на достъпна навигация с нестандартен шрифт

  1. Radoslav Popov

    Има и още един трик, който преди използвах редовно. Вместо две картинки за един линк, които се сменят при hover, една картинка с двата ефекта, която се поставя за background и й се сменя background-position-а при hover. Така не се губи време за презареждане на вторите картинки.

  2. Гонзо

    Е да, това е вече към темата за оптимизиране на зареждането. Част от препоръките за намаляване на времето за зареждане на страницата са свързани с намаляване на HTTP заявките. Другото, за което помакат CSS sprites е предварителното зареждане на картинките за hover ефекта. Но аз не обърнах внимание на тази техника, защото не е съществена за конкретния пример.

  3. Иво Чими

    Бихте ли споделили, как във вашия пример се постига следния ефект: след натискане на даден бутон, той да остане „светнал“, т.е. да се запази бекграунда при натиснато състояние, докато не се натисне някой друг бутон.
    Благодаря!

  4. Гонзо

    Много просто, ще трябва да се добавят правила за състоянието active на връзките, нещо такова:

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

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

  5. Гонзо

    Всъщност горния пример не е съвсем верен, active е състоянието, когато линка елемента е натиснат с мишката, а това, което ни интересува е focus. Чрез задаване на специален стил за това състояние може да се подобри ползваемостта, особено за потребители, използващи само клавиатурата.

Comments are closed.