Падащо (dropdown) меню с jQuery и CSS

Всеки уеб сайт има нужда от меню. То обикновено представлява група от линкове, които водят посетителя към различни страници от нашия сайт. Колкото и пресилено да звучи обаче, менюто е един от най-важните елементи. Без него, ориентацията ще бъде много по-трудна, а това ще направи посетителите недоволни. Добре структурираното и подредено меню пък ще им помогне не само да разгледат всички страници от нашия сайт, но и да открият желаната информация много по-бързо.

В този урок ще създадем едно просто, но добре подредено падащо меню.

Менюто в това упражнение е тествано и работи под Firefox 3.6+, Chrome 21, Internet Explorer 8+, Opera 12 и Safari 5.

Планиране

Първата стъпка от създаването на каквото и да било е правилното планиране. Какво имам в предвид? Много е важно да помислиш, какво точно искаш да включиш в менюто. Структурата му. Подредбата на бутоните. Мястото му в страницата. Вертикално или хоризонтално, големина, цвят. Всичко това е от значение.

Понякога се оказва доста трудно да промениш нещо, след като вече си го завършил. Затова, точно тук е момента да отделиш 5 минути и да помислиш как точно искаш да изглежда менюто в твоя сайт. Как ще пасва на дизайна? Помисли кои ще бъдат главните страници. Има ли нужда от подменю и как ще изглежда то? Категоризирай информацията и постави страниците, които са свързани с определена тема като подменю.

Реда също има значение. Добра практика е първият бутон винаги да води към началната страница. Следващите бутони имат еднаква тежест, но обикновено, колкото по-напред се намира, толкова е по-видим.

Виж менюто в този сайт. Страниците “HTML”, “CSS”, “CSS3” и “jQuery” са събрани в категория “Кодиране”. “Контакти” се намира под “За сайта”, защото е логично човек да го потърси там. “За мен” пък е самостоятелен бутон.

Ок. Достатъчно теория. Сега е твой ред. Вземи лист и химикалка и се опитай да скицираш менюто на твоята страница. Не се притеснявай, ако изглежда грозно. Целта тук е да си дадеш насока, към която да се придържаш.

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

Идеята тук е следната: когато посетителя отвори уеб сайта, ще вижда менюто в нормалното му състояние (фиг. 1). В случай, че реши да взаимодейства с менюто и постави курсора на мишката върху бутона “Обувки” (или “Часовници”), ще се покаже подменю, което ще му предостави допълнителен избор (фиг. 2).

Според мен, менюто на скицата изглежда спретнато. Информацията е добре подредена и всичко е там, където предполагаме, че ще бъде. Малката иконка наподобяваща стрелка ни подсказва, че към конкретното меню има подменю, което ще се покаже при поставяне на мишката върху него.

Следващата стъпка е да превърнем тази скица в HTML код.

HTML Структура

След като вече имаме плана е време да преминем към писането на кода. Създай нов HTML документ. Ако не си сигурен/-а как става това, разгледай урока “Моята първа уеб страница”.

След като създадеш нов HTML документ, следващата стъпка е да добавим менюто. Според мен е най-добре да го представим като неподреден списък, а всеки линк от менюто ще бъде отделна точка от този списък.

Отвори HTML документа, който създаде и в елемента <body> добави следното:

copyИзчистенПрозорец

<div id="container">
    <div id="header">
        <h2>Падащо (dropdown) меню с jQuery и CSS</h2>
    </div>
    <div id="menu-content">
        <ul id="main-menu">
            <li><a href="#">Начало</a></li>
            <li><a href="#">Обувки</a>
                <ul class="sub-menu">
                    <li><a href="#">Nike</a></li>
                    <li><a href="#">Puma</a></li>
                    <li><a href="#">Adidas</a></li>
                    <li><a href="#">Kappa</a></li>
                </ul>
            </li>
            <li><a href="#">Часовници</a>
                <ul class="sub-menu">
                    <li><a href="#">Casio</a></li>
                    <li><a href="#">Rolex</a></li>
                    <li><a href="#">Swatch</a></li>
                </ul>
            </li>
            <li><a href="#">Дрехи</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">За нас</a></li>
        </ul>
    </div>
</div>

<div id="container">    <div id="header">        <h2>Падащо (dropdown) меню с jQuery и CSS</h2>    </div>    <div id="menu-content">        <ul id="main-menu">            <li><a href="#">Начало</a></li>            <li><a href="#">Обувки</a>                <ul class="sub-menu">                    <li><a href="#">Nike</a></li>                    <li><a href="#">Puma</a></li>                    <li><a href="#">Adidas</a></li>                    <li><a href="#">Kappa</a></li>                </ul>            </li>            <li><a href="#">Часовници</a>                <ul class="sub-menu">                    <li><a href="#">Casio</a></li>                    <li><a href="#">Rolex</a></li>                    <li><a href="#">Swatch</a></li>                </ul>            </li>            <li><a href="#">Дрехи</a></li>            <li><a href="#">Блог</a></li>            <li><a href="#">За нас</a></li>        </ul>    </div></div>

Към първия <ul> таг добавих id="main-menu", за да мога по-лесно да избера и манипулирам вътрешните HTML елементи. Също така, към <ul> тага на всяко подменю добавих class="sub-menu". Това не е задължително, но аз го предпочитам, защото така менюто става по смислено.

Резултата до тук е следния:

Структура на менюто представена чрез неподреден списък

Прилагане на основен стил чрез CSS

Всичко върви по план. Време е да дадем на нашето меню малко стил. За целта прикачи външен CSS файл (ако не знаеш как, виж урока “Прилагане на CSS чрез външен файл”) и в него добави следното:

copyИзчистенПрозорец

body {
    background-image: url("background.jpg");
    font-family: "Lucida Sans Unicode", Verdana, sans-serif;
}
h2 {margin-bottom: 20px;}
#container {
    margin: 50px auto 0;
    width: 550px;
}
#main-menu, .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;    
}
#main-menu li {
    float: left;
    margin-right: 3px;
    position: relative;
}
#main-menu li a {
    background: url("normal.jpg") repeat-x;
    border: 1px solid #c15e20;
    color: #f3f3f3;
    font-size: 14px;
    display: block;
    height: 31px;
    line-height: 31px;
    padding: 0 14px;
    text-decoration: none;
}
#main-menu li a:hover {
    background: url("hover.jpg") repeat-x;
    border: 1px solid #0093d8;
    color: #231f20;
}
#main-menu li a .indicator  {
    background: url("indicator.png") 0% 60% no-repeat;
    padding: 4px;
    position: relative;
    left: 3px;
}
#main-menu li a .hover-indicator  {
    background: url("hover-indicator.png") 0% 60% no-repeat;
}
#main-menu .sub-menu {
    display: none;
    padding-top: 1px;
    position: absolute;
    width: 150px;
}
#main-menu .sub-menu li {
    float: none; 
    padding-bottom: 1px;
}

body {	background-image: url("background.jpg");	font-family: "Lucida Sans Unicode", Verdana, sans-serif;}h2 {margin-bottom: 20px;}#container {	margin: 50px auto 0;	width: 550px;}#main-menu, .sub-menu {	list-style: none;	margin: 0;	padding: 0;	}#main-menu li {	float: left;	margin-right: 3px;	position: relative;}#main-menu li a {	background: url("normal.jpg") repeat-x;	border: 1px solid #c15e20;	color: #f3f3f3;	font-size: 14px;	display: block;	height: 31px;	line-height: 31px;	padding: 0 14px;	text-decoration: none;}#main-menu li a:hover {	background: url("hover.jpg") repeat-x;	border: 1px solid #0093d8;	color: #231f20;}#main-menu li a .indicator  {	background: url("indicator.png") 0% 60% no-repeat;	padding: 4px;	position: relative;	left: 3px;}#main-menu li a .hover-indicator  {	background: url("hover-indicator.png") 0% 60% no-repeat;}#main-menu .sub-menu {	display: none;	padding-top: 1px;	position: absolute;	width: 150px;}#main-menu .sub-menu li {	float: none; 	padding-bottom: 1px;}

Не се стряскай от целия този код. Повечето е доста елементарно.

Кода от 1 до 9 ред прилага стил върху цялата страницата. Работата му е следната:

1-4 ред - Задаваме фон и шрифт на <body> елемента.
5 ред - Добавяме 20px разстояние от долната страна на h2 заглавието.
6-9 ред - Добавяме 50px разстояние от горната страна на <div> с id="container" и го центрираме. Също така, правим ширината му 500px.

Кода на 10-14 ред премахва индикаторите преди всяка точка (виж снимката по-горе) от списъка и занулява всякакво външно (margin) и вътрешно (padding) разстояние.

Сега започва по-сериозната част.

Селектора на ред 15 - #main-menu li, ще избере всеки <li> елемент, който се намира в <ul> с id="main-menu". Стила, който прилагаме върху тези елементи е следния:

16 ред – Тук използваме трика от урок “Обграждане на текст около снимка”. Чрез прилагане на float: left;, всеки <li> елемент ще обгради предходния т.е. ще застанат на едно ниво. Това е един от популярните начини за създаване на хоризонтално меню чрез CSS.
17 ред – Добавя 3px разстояние от дясно на всеки <li> елемент. Така всеки линк от менюто ще изглежда като отделен бутон.
18 ред – Това е малко по-особено и изисква повече познания. Накратко, position: relative; ще ни даде по-добър контрол върху позиционирането на подменюто.

Кода на редове 20-30 стилизира нормалното състояние на всички линкове.

21 ред – Добавя изображение за фон, което се повтаря по хоризонтала.
22 ред – Добавя 1px рамка от всички страни.
23 и 24 ред – Променя цвета и размера на текста.
25 ред – Прави елемента блоков. Така ще заеме цялата ширина на родителския елемент.
26 ред – Мисля, че това е ясно. Прави височината 31px.
27 ред – Тук виждаме друг трик, който се използва доста често. Това свойство определя височината на реда. Когато височината на реда е равна на височината на елемента, текста ще застане в центъра (по вертикала). Хубаво е да го запомниш. Ще ти свърши полезна работа.
28 ред – Добавя 14px вътрешно разстояние от ляво и дясно на текста. Това ще направи бутона да изглежда малко по-голям и ще увеличи зоната на клик.
29 ред – Премахва долната черта, която по подразбиране се прилага върху всеки линк.

Кода на редове 31-35 стилизира hover състоянието на всички линкове. Това е момента, в който посетителя постави стрелката на мишката върху определен линк.

Кода на редове 36-44 ще бъде отговорен за малката стрелка, която ще поставим в бутоните, под които ще се показва допълнително меню. Тази стрелка ще бъде добавена динамично чрез jQuery. Това ще го разгледаме по-долу.

Кода на редове 45 – 54 е отговорен изцяло за подменютата.

46 ред – Скриваме всички подменюта при зареждане на страницата.
47 ред – Добавя 1px разстояние отгоре, за да не изглеждат “залепени за главното меню.
48 ред – избираме абсолютно позициониране, за да можем по-лесно да определим местоположението им.
49 ред – променя ширината на 150px.
52 ред – Тъй като тук искаме бутоните да бъдат един под друг, а не един до друг, трябва да премахнем стойността на float, която приложихме на ред 16.
53 ред – Добавя 3px разстояние от долната страна на всеки бутон. Така ще изглеждат разделени.

Наистина покрихме доста неща до тук. Ако имаш въпроси относно някой от редовете, задай ги в коментарите след урока.

Резултата е следния:

Прилагане на основен CSS стил

Според мен е наистина страхотно. В нормалното си състояние менюто е оранжево, а при поставяне на мишката върху някой от бутоните, цвета се сменя на син.

Това, което липсва тук са стрелкичките, които ни дават сигнал за наличие на допълнително меню, както и самото допълнително меню. Това ще го добавим чрез jQuery в следващата стъпка.

Добавяне на функционалност с jQuery

За да се възползваш от силата на jQuery са са ти нужни 2 неща:

Линк към самата jQuery библиотека. Също както използваме външен CSS файл за прилагане на стил, така можем и да използваме външен JavaScript файл за прилагане на функционалност. За да използваш jQuery в твоя сайт, задължително трябва да добавиш връзка към jQuery библиотеката. В този урок ще работим с файл, който предварително сме свалили.
Отвори HTML файла и добави следното в <head> елемента:
```
copyИзчистенПрозорец
```
```
<script type="text/javascript" src="jquery1.7.1.min.js"></script>
```
```
<script type="text/javascript" src="jquery1.7.1.min.js"></script>
```
Тук предполагам, че jQuery файла се намира в същата папка с HTML документа. Ако са в различна, тогава трябва да промениш пътя съобразно с това. jQuery файла е в работните файлове към урока. Ако искаш, също можеш да го свалиш от официалния сайт на jQuery.
След като вече имаш jQuery на разположение, трябва да създадеш нов JavaScript файл, който също да го прикачиш. Отвори любимия си редактор и създай празен JavaScript файл. Запази го под името custom.js. След като го направиш, отвори отново HTML файла и ведната горния ред добави следното:
```
copyИзчистенПрозорец
```
```
<script type="text/javascript" src="custom.js"></script>
```
```
<script type="text/javascript" src="custom.js"></script>
```

Сега отвори custom.js и постави този код:

copyИзчистенПрозорец

$(document).ready(function () {    
    $('.sub-menu').prev('a').append('<span class="indicator"></span>');
    
    $('#main-menu li:has(.sub-menu)').hover(function () {
        $(this).find('a .indicator').addClass('hover-indicator');
        $(this).find('ul:first').slideDown('fast').addClass('active');    
    }, function () {
        $(this).find('a .hover-indicator').removeClass('hover-indicator');
        $(this).children('ul.active').slideUp('fast').removeClass('active');    
    });
});

$(document).ready(function () {		$('.sub-menu').prev('a').append('<span class="indicator"></span>');		$('#main-menu li:has(.sub-menu)').hover(function () {		$(this).find('a .indicator').addClass('hover-indicator');        $(this).find('ul:first').slideDown('fast').addClass('active');	    }, function () {		$(this).find('a .hover-indicator').removeClass('hover-indicator');        $(this).children('ul.active').slideUp('fast').removeClass('active');		});});

Логиката тук е следната:

1 ред – Специална jQuery функция, която ще се стартира, след като страницата зареди напълно. Края на функцията е на ред 12.
2 ред – Тук jQuery търси за нас всички <a> елементи, които се намират преди .sub-menu. Към този списък прикачваме <span> с class="indicator". В CSS стила имаме селектор (ред 36), който ще стилизира този <span>.
4 ред – тук създаваме събитие (event), което ще следи за “поставяне на мишката върху <li> елемент, който съдържа в себе си елемент с class="sub-menu"”. Когато това условие е удовлетворено, ще се изпълни кода на редове 5 и 6. Кода на редове 8 и 9 ще се изпълни при обратното условие - когато мишката бъде премахната.
5 ред – Добавяме нов клас “hover-indicator” към линка с class="indicator". Така ще заместим стрелкичката, която добавяме чрез кода на ред 36 от CSS файла.
6 ред – Намираме първият <ul> елемент, който се намира в избраното меню, добавяме му ефект slideDown и клас “active”. Стойността на slideDown в момента е “fast”. Това определя скоростта на изпълнение. Тази стойност може да бъде заместена с “slow” или цифров еквивалент в милисекунди (например 500). Експериментирай за да видиш как точно работи.
8 и 9 ред – Противоположното на редове 5 и 6. Търсим class="hover-indicator" и го премахваме. Също така, търсим <ul> елементи с class="active", върху който прилагаме ефекта slideUp. Този ефект ще скрие подменюто. Накрая премахваме класа “active”.

Резултата е следния - Демо.