Целта на днешното занятие е да създадем едно семпло, но много еластично от към функционалност меню. Под семпло имам предвид само външния вид, като естествено вие може да си го промените както пожелаете. За сметка на това обаче менюто ще поддъжа безброй подменюта, което е и големият плюс, а самото добавяне на ново подменю става с копирането на няколко реда код. И за финал, за да е по-мазничко съм добавил малко jquery ефектчета.
Менюто е тествано и работи на всички по-популярни браузъри – Firefox 3.6, Chrome 4, Opera 10, Safari 4, IE 6, IE 7 и IE 8. Освен това може да се ползва за всичко – не е задължително да е главно меню. С малко пипане може да стане хоризонтална навигация, а ако го обърнете на 180 градуса може да се получи помощна лента, забита в дъното на екрана в стил Facebook. Изобщо възможностите са доста и се постарах да покрия колкото се може повече. Ако искате да ровичкате обаче, да предупредя, че трябва да имате поне минимални познания по CSS, HTML и JS, тъй като има някои тънкости. Разбира се винаги може и да попитате, ще се постарая да отговоря. Освен това, ако на някой не му харесва нещо или се сеща за по-културно решение – приемам всякакви идеи и корекции!
| View DemoDownload |
Стъпка 1: HTML
Той представлява един съвсем прост и елементарен списък с няколко поднива, които символизират подменютата. За всеки случай съм копирал и целия работен документ за тези, които не знаят къде да го поставят.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Dropdown Menu w/ CSS & jQuery by RIP</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/simple-dropdown-menu.js"></script> </head> <body> <div id="menu"> <div id="menu_r"> <div id="menu_l"> <ul class="main"> <li><a id="home" href="#">Начало</a></li> <li> <a href="#">Новини</a> <ul class="sub"> <li><a href="#">Свят</a></li> <li> <a href="#">България</a> <ul class="sub"> <li><a href="#">София</a></li> <li><a href="#">Пловдив</a></li> <li><a href="#">Варна</a></li> <li> <a href="#">Бургас</a> <ul class="sub"> <li><a href="#">Риби</a></li> <li><a href="#">Жълъди</a></li> <li><a href="#">Кифли</a></li> <li><a href="#">Патладжани</a></li> </ul> </li> </ul> </li> <li> <a href="#">Наука</a> <ul class="sub"> <li><a href="#">Космос</a></li> <li><a href="#">Клониране</a></li> </ul> </li> <li><a href="#">Спорт</a></li> </ul> </li> <li> <a href="#">Статии</a> <ul class="sub"> <li><a href="#">Кратки</a></li> <li><a href="#">Дълги</a></li> </ul> </li> <li><a href="#">Каталог</a></li> <li><a href="#">Архив</a></li> <li><a href="#">Форум</a></li> <li><a href="#">Блог</a></li> </ul> </div> </div> </div> </body> </html>
На какво трябва да се обърне внимание тук? Като за начало погледнете си пътищата към javascript, image и css файловете. Ако ги местите и се чудите защо не работят, вероятно това е причината.
Стъпка 2: CSS
Тъй като целта ни е да направим едно безкрайно меню, CSS-а е малко по-дълъг от обикновено. Разбира се ако му накичите още някоя глезотийка редовете ще скочат, но това в крайна сметка няма значение… просто не се заблуждавайте, че е нещо много сложно. За урока съм го стилизирал по-семпличко и без много изображения, за да схванете логиката, а всеки, който иска може да си добави картинки и в подменютата. Между другото за по-голяма оптимизация съм направил sprite от картинките на менюто. Sprite с две думи, освен популярната напитка, представлява една огромна картинка (например хвърлете едно око на YouTube-ската тук), която се зарежда веднъж и впоследствие с помощта на CSS и background-position, ние позиционираме необходимата ни част на необходимото място. Прави се предимно с цел оптимизация, но много трябва да се внимава, защото е малко пипкава работа, особено под по-старите браузъри.
body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, sans-serif;
line-height: 1.3em;
background: #FFF;
color: #666;
}
ul { margin: 0; padding: 0; list-style: none; }
#menu {
background: url(../img/menu.png) repeat-x left -72px;
width: 800px;
margin: 100px auto;
}
#menu_r {
background: url(../img/menu.png) no-repeat right -36px;
}
#menu_l {
background: url(../img/menu.png) no-repeat left 0;
height: 36px;
}
ul.main li {
position: relative;
float: left;
background: url(../img/menu_li.png) no-repeat right top;
padding: 0 3px 0 0;
}
ul.main li a, ul.main li a:link, ul.main li a:visited {
float: left;
padding: 0 25px;
color: #666;
font-size: 12px;
height: 36px;
line-height: 36px;
font-weight: 700;
outline: none;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
}
ul.main li a:hover {
color: #00b2fc;
background: url(../img/menu.png) repeat-x left -108px;
}
ul.main li a span.arrow {
color: #999;
}
ul.main li a#home:hover {
background: url(../img/home_hover.png) no-repeat left top;
}
ul.main li ul.sub {
display: none;
position: absolute;
top: 36px;
left: -2px;
width: 200px;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
}
ul.main li ul.sub li {
position: relative;
padding: 0;
background: none;
}
ul.main li ul.sub li a, ul.main li ul.sub li a:link, ul.main li ul.sub li a:visited {
float: none;
display: block;
width: 180px;
border-bottom: 1px solid #d9d9d9;
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 11px;
background: #f8f8f8;
}
ul.main li ul.sub li a:hover {
color: #666;
background: #efefef;
}
ul.main li ul.sub li ul.sub {
position: absolute;
top: -1px;
left: 200px;
border-top: 1px solid #d9d9d9;
}
Тук е трудно, а и безсмислено да се коментира кой ред какво прави, защото нещата са навързани. За това пак – ако има въпроси и предложения, насреща съм.
Стъпка 3: jQuery
Тъй като jQuery е една от най-добрите Javascript библиотеки, аз съм я използвал с актуалната й версия 1.4.2. Приложил съм всички файлове в архива за сваляне, но ако имате желание да го свалите отделно, ето линк за компресираната версия или за отворения файл, по който може да човъркате.
Тук JQ се ползва много малко и буквално, както виждате са 10 реда, но създава приятен ефект.
$(document).ready(function ()
{
$('.main li:has(ul) > a').addClass('more');
$('a.more').append('<span class="arrow"> »</span>');
$('.main li').hover(function () {
$(this).find('ul:first').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).addClass('active_list');
}, function () {
$(this).children('ul.active_list').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).removeClass('active_list');
});
});
Идеята тук е да търсим всяко LI, което е родителски елемент на A и съдържа в себе си UL. Така ако е изпълнено условието на линка се добавя клас „more“, на колко клас на следващия ред добавяме стрелкички до името на бутона. Това го правим с цел да се разбере, че този бутон съдържа в себе си информация и подтиква юзъра да провери каква е тя.
След това създаваме плавния ефект на Slide Up & Down. Търсим всеки първи списък и му пускаме анимация, която го слайдва надолу и му добавя клас „active_list“. След това търсим списък с вече добавения клас „active_list“ и поставяме условие, ако мишока не е върху него да се изпълни анимацията за затваряне или иначе казано прибиране нагоре. След това просто изтриваме класа „active_list“ и всичко е готово.
Накратко е това. В javascript файла, който се намира в архива съм закоментирал ред по ред кое какво прави мааалко по-разширено. Нещата не са никак сложни, стига да имате малко понятие.
Плюсовете на менюто са, че може лесно да се интегрира, а с готовата структура бързо се преправя, така, че да пасне за нуждите на всеки.