CSS навигация

CSS навигация

В HTML и CSS

За кого е предназначен този урок?

Този урок е за начинаещи дизайнери, които все още се мъчат като грешни дяволи с RollOver Image ефекта на JavaScript. Тук ще разгледаме как да създаваме менюта само от текст, неподредени списъци и стилови таблици.

Какво ще създадем?

Ще създадем една хоризонтална навигация – такава, каквато се използва за създаване на списъкови менюта без да налага употребата на изображения за текста. Подобни менюта са подходящи за сайтове, с динамично зареждащи се менюта – чрез php списък или такива, които се надяваме да получат по-голямо внимание от търсачки като Google и Yahoo!. Списъковите менюта са лесни за създаване и четене, както от разработчиците, така и от паяците.

Да започваме…

Най-напред ще създадем чистия ни HTML. В него, за разлика от RollOver Image ефекта ще трябва да поставим неподреден списък <ul>, в който в елементите <li> поставяме линковете си:

<ul>
	<li><a href="link-1.html">Начало</a></li>
	<li><a href="link-2.html">За IG Designers</a></li>
	<li><a href="link-3.html">Уеб дизайн</a></li>
	<li><a href="link-4.html">Лого дизайн</a></li>
	<li><a href="link-5.html">Предпечат</a></li>
	<li><a href="link-6.html">Контакти</a></li>
</ul>

Вече имаме необходимите ни линкове. Сега ни остава да ги облечем в дизайн. Нека разгледаме елементите един по един и да помислим как те се представят в HTML:

  • <ul> е тагът, отварящ неподреден списък – всички елементи в него трябва да са <li>. Така казваме на HTML, че всичко между <ul> и </ul> трябва да следва логиката на списъците с булет;
  • <li> казва на HTML, че имаме елемент от списък. В него поставяме съдържанието;
  • <a> е реалния линк към документа, който искаме да посочим в менюто.

Ако сега запаметим нашия .html документ, той ще изглежда много далеч от това, което искаме да постигнем – просто списък с линкове без оформление, без визия, без дизайн. Нека поправим това.
CSS навигация без наложен стил

Рамкиране на менюто

ul {
   margin:0;
   padding:0;
}
ul li {
   list-style: none;
   float: left;
}

Така зададена, стиловата дефиниция казва на елемента <ul> да няма никакви отстояния от околните елементи, а <li> елементите да нямат списъков стил – да няма пред тях познатия булет (точицата, която сме свикнали да виждаме пред такива списъци) и да плават наляво или просто списъка да се появява на един ред, като най-горния ни елемент да поеме най-лявата възможна позиция и следващите да се нареждат след него.

CSS навигация с наложен float:left

Оразмеряване на бутоните

Бутоните ни в менюто представляват самите <a>елементи. Чрез CSS ще накараме линковете ни да приличат на бутони – да имат конкретна широчина и височина; фон, който се променя според това къде се намира мишката и как потребителят взаимодейства с бутона и т.н.

ul li a {
   display:block;
   padding: 10px 5px;
   text-decoration: none;
   background: url(btn_down.png) repeat-x;
   color: #000;
}
ul li a:hover {
   display:block;
   padding: 10px 5px;
   text-decoration: underline;
   background: url(btn_up.png) repeat-x;
   color: #fff;
}

CSS ни дава възможност да контролираме всичко в елементите – включително и това как да изглежда текста в бутоните ни. Затова с тази дефиниция казваме на елемента <a> в нормално състояние да се показва като блок/кутийка, която да им а вътрешно отстояние от рамките си (padding) от 10 пиксела отгоре и отдолу и 5 пиксела отляво и отдясно и да е с фон изображението btn_down.png. Настройките за текста са text-decoration: none; и color: #000; или текста вътре в бутоните няма да бъде подчертан и ще бъде с черен цвят.

Когато потребителят мине с мишката през бутона използваме фиктивния клас a:hover. С него променяме настройките за фона – задаваме btn_up.png; за текста – казваме му да е подчертан. Така бутона се променя според поведението на потребителя и имитира напълно ефекта RollOver Image.

CSS навигация с наложен background: url(btn_down.png) repeat-x;

Заключение

Завършен, нашия .html документ ще съдържа меню, което да взаимодейства с потребителя без да използва изображения, способно да се зарежда от php скрипт, годно за превод от програми като Google Translate и много по-лесно за претърсване от паяците на търсачките. Ако го прегледаме в браузър, нашето завършено меню ще изглежда така:

CSS навигация в браузъра

За Гергин Борисов

+359 877080887

Здравейте, аз съм Гергин Борисов, на 24 години от София и се занимавам с уеб и лого дизайн, предпечат и отскоро - с блога си. Занимавам се с дизайн от 2006та година насам, като преди това (от 2004та) работех в сферата на предпечата с баща ми, фотографът Александър Борисов.