Много често можете да намерите падащи навигационни елементи в шаблоните. Разработчиците използват този тип скрито меню, за да показват допълнителни скрити връзки, които са тематично свързани с основния елемент. Можете да намерите примери за плъзгащи се панели или различни менюта в стил акордеон, които прилагат този принцип на навигация.
Но в този урок ще изградим просто падащо меню с помощта на jQuery. Той ще работи с помощта на анимационна техника за генериране на забавени ефекти. CSS3 преходните ефекти също се прилагат заедно с JavaScript кода. Резултатът е шаблон за навигация на сайта.
HTMLПърво, нека изградим основен HTML5 шаблон. Ще ни трябва най-новата версия на jQuery, която получаваме от Google API. Добавяме и стилов файл styles.css, който ще бъде представен по-долу:
Хоризонтална лента за навигация | Сайт материали за сайта
Сега нека да разгледаме структурата, изградена около неподредения списък в горната част на страницата. Целият списък е поставен в HTML5 елемент за по-добри SEO резултати.
Структурата на кода е доста проста. Всеки елемент от списъка включва ефект на подчертаване, когато курсорът на мишката се постави върху него. Всички вътрешни UL елементи се съдържат в оригиналния елемент от списъка, така че фокусът на въвеждане не се губи при преместване към елементи от падащото меню.
Стилове за навигацияЛистът със стилове съдържа код за нулиране на стойностите на свойствата по подразбиране. Много разработчици включват файл от Eric Meye, но за наша употреба той е твърде тромав. Освен това кодът се съхранява на друг сървър, което само по себе си е лошо решение в случая.
Html, тяло, div, span, аплет, обект, iframe, h1, h2, h3, h4, h5, h6, p, блоков цитат, pre, a, abbr, акроним, адрес, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, форма, етикет, легенда, таблица, надпис, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, раздел, резюме, време, маркировка, аудио, видео ( марж: 0; подложка: 0; граница: 0; размер на шрифта: 100%; шрифт: наследяване; вертикално подравняване: основна линия; контур: няма; -webkit-font- изглаждане: коригиране на размера на webkit: 100%; -webkit-box: border-box; ("images/bg.png"); размер на шрифта: 1; фигура, долен колонтитул, горен колонтитул, hgroup, меню, навигация, раздел ( дисплей: блок; ) ol, ul ( list-style: none; ) blockquote, q ( кавички: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) strong ( font -тегло: получер;) таблица (border-collapse: collapse; border-spacing: 0;) img (border: 0; max-width: 100%;)
Има интересно свойство в кода -webkit-font-smoothing. Той е предназначен да изглажда шрифтовете при изпълнение на код в браузъри, работещи с Mac OS X или iOS.
Сега да преминем към нашето меню.
#ddmenu ( дисплей: блок; ширина: 100%; височина: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15) ); box-shadow: 0 1px rgba (20, 20, 0.2); тегло на шрифта: #8aa8bd; размер на шрифта: 1px 0 # fff; 1px; line-decoration: none; 0.2s linear; linear; hover > a ( цвят: #7180a0; фон: #d9e2ee; ) #ddmenu ul (позиция: абсолютна; горна: 88px; ширина: 130px; фон: # fff; дисплей: няма; подложка: 7px 0; border-radius: 3px граница: 1px плътен rgba(0, 0, 0.2); )
Добавяме селектор #ddmenu ul, за да изберете всички вътрешни елементи във всеки елемент от списъка, тъй като е важно да се определи разстоянието за тях чрез абсолютно позициониране. Също така добавяме линеен преход за всички връзки, който се появява, когато задържите курсора на мишката върху тях.
Сега нека да разгледаме създаването на индекса на горния елемент. Формира се с помощта на свойството ротация и универсална рамка с тъмен фон за сянката. Използвайки офсетно позициониране, един елемент от нашата структура се позиционира над друг и формира визуално представяне на показалеца в падащото меню.
#ddmenu ul:after (съдържание: ""; ширина: 0; височина: 0; позиция: абсолютна; дъно: 100%; ляво: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color : #fff transparent;) #ddmenu ul:before ( съдържание: ""; височина: 0; позиция: абсолютна; лява: 4px; border-width: 0 10px 10px 10px; border-style : плътен; цвят на границата: rgba(0, 0, 0, 0,1) прозрачен; ; ) #ddmenu ul a ( display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; - o-преход: всички 0,2s линейни; преход: всички 0,2s линейни; ) #ddmenu ul a:hover (фон: #e9edf3;
JavaScript$(document).ready(function())( $("a").on("click", function(e)( e.preventDefault(); )); $("#ddmenu li").hover( функция () ( clearTimeout ($.data(this,"timer")); $("ul",this).stop(true,true).slideDown(200); ), функция () ( $.data(this , "таймер", setTimeout($.proxy(function() ( $("ul",this).stop(true,true).slideUp(200); ), this), 100));
Първата част от кода прихваща щраквания върху връзки и ги спира да бъдат обработвани по подразбиране (зареждане на страници на URL).
Втората част от кода прави цялата магия. Прикачваме манипулатор на събития за процеса на задържане на мишката върху елемент от списък. Манипулаторът ще спре активната в момента анимация и ще изведе нов суб с помощта на .slideDown(). Също така задаваме малко забавяне, така че да реагира само на действителния избор на артикул.
За да напишете сами навигация под формата на вертикално падащо меню в jQuery с падащ списък от подкатегории, трябва да разберете самия принцип на работа на този механизъм. Но първо, нека да разгледаме навигационната структура:
Навигация
Както може би се досещате, нашето падащо меню е базирано на списъци с водещи символи. Когато задържите курсора на мишката върху етикет
- тест 1
- тест 2
- тест 3
- тест 4
Но как, питате вие? Да, всъщност всичко е много просто. Първо, нека да разгледаме стиловия лист на нашия списък за навигация, той ще изглежда така:
Тяло (фон: rgb(244, 244, 244); семейство шрифтове: Verdana; тегло на шрифта: 100; ) /*---Навигация---*/ #меню (ширина: 200px; поле: 0; подложка: 2px;) #menu li (list-style-type: none;) .menu (position: relative; background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; фон: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); 1px solid #2AC4B3; .menu:hover (фон: #00c; фон: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); фон: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu span (ширина: 11px; височина: 11px; дисплей: блок; абсолютна височина: 8 пиксела; ширина: 1 пиксел; абсолютна позиция: 198 пиксела; фон: линейно -градиент(отгоре, rgb(198, 255, 242), #2AC4B3); фон: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); фон: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); рамка: 1px плътен #fff; ) .menu ul li:hover ( фон: #00c; фон: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); фон: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB); фон: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu a (padding: 5px; display: block; text-); украса: няма; цвят: бял; .menu a:hover ( цвят: бял; ) /*---КРАЙ---*/
От листа със стилове можете да видите, че падащият списък първоначално не е скрит, но ние ще коригираме тази точка, като използваме:
$(document).ready(function())( $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")" ) ; $("#menu li").hover(function())( $(this).children("ul").show(); /*Еквивалентно на $("ul", this).show() ;*/ $(this).find("span").css("background", "url("right.png")"); /*Еквивалентно на $("span", this).css("background ", "url"); ("right.png")");*/ ),function())( $(this).children("ul").hide(); /*Еквивалентно на $("ul" ", this).hide(); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this ).css("background", " url("down.png")");*/ )) ))
Сега нека разгледаме подробно кода на jQuery за падащото меню, защото... Може би за някои няма да е съвсем ясно. В самото начало е написана следната конструкция:
$(документ).готов(функция())( ))
Той определя командите, които трябва да бъдат изпълнени, след като страницата се зареди напълно. Това беше направено така, че да не се появяват различни видове грешки, когато е невъзможно да се намери обект поради факта, че той просто все още не е зареден.
$(".menu ul").скрий();
Какво означава този запис? Конструкцията “$()” ви позволява да избирате елементи. Следователно в самото начало трябва да скрием нашия падащ списък. Взимаме конструкцията “$()” и записваме в нея обекта, който ни интересува. В нашия случай този обект ще бъде списък с водещи символи с клас „меню“. След това пишем метода “hide()”, който ни позволява да скрием обекта, който ни интересува.
$(".menu span").css("background", "url("down.png")");
Какво прави тя? Той търси таг, на чийто родителски елемент е присвоен класът „menu“ и, използвайки метода „css("background", "url("down.png")")", присвоява на свойството стил "background" стойността " url("down. png")". "down.png" е икона, показваща, че списъкът може да бъде разширен.
След това идва конструкцията, която ще разшири нашия списък, изглежда така:
$("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"),function())($(this).children("ul").hide(); $(this).find("span").css(" фон" , "url("down.png")");
Търсим таг, чийто родителски елемент е присвоен id="menu". Следва методът "hover" и две функции в скоби. Първата функция ще бъде изпълнена при задържане на мишката, а втората ще бъде изпълнена, ако курсорът на мишката напусне елемента, който ни интересува.
Първата функция казва:
$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");
Конструкцията “$(this)” означава, че се интересуваме от елемента, над който в момента се движим (this от английски this).
След това търсим наследници на етикета, а именно: етикет и променяме фона му на друга икона.
След това се записва функция, която прави всичко както е било първоначално, след като курсорът на мишката напусне елемента на списъка:
Function())( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")") ;)
За да работи написаният код в jQuery и нашето падащо меню да работи правилно, трябва да изтеглите библиотеката от jquery.com и да я свържете, като напишете реда след отварящия таг.
Добре, всичко свърши! В заключение бих искал да отбележа, че ако вашият сайт е доста тежък, тогава може би скриптът ще се стартира твърде късно (сайтът ще отнеме много време за зареждане) и потребителите ще видят как първо се отваря напълно и едва след това се скрива, което , виждате ли, е много грозно. Следователно е необходимо да преместите всички jQuery команди зад тази конструкция: “$(document).ready(function()())”. Ще изглежда така:
$(document).ready(function())( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"),function())($(this).children("ul").hide(); $(this).find("span").css(" фон" , "url("down.png")");
Връзката на нашия скрипт трябва да бъде преместена от тага до самия край, преди затварящия таг, или можете да свържете скрипта веднага след списъка с водещи символи.
(изтегляния: 314)
Днес бих искал да направя селекция от сравнително ново поколение навигация за сайта - менюта на цял екран. Използват се в случаите, когато няма сама навигация на страницата, има само един бутон, при натискане на който се отваря меню. Подобен принцип може да се види в -framework: когато лентата за навигация вече не се побира, блокът със списъка с елементи от менюто просто се скрива. На негово място се появява бутон с изображение на, като правило, три ивици. При натискане се появява пълното меню. В много съвременни уебсайтове менюто винаги е скрито, дори на големи екрани. Това беше направено, за да не се зарежда страницата. Въпреки че не трябва да правите това във всичките си проекти сега. Ако менюто е второстепенно, можете да го скриете, но ако имате голям сайт със сложна структура, по-добре не използвайте тази опция. Така. Разбрахме общия принцип на работа, но този тип меню е доста стандартно, искам нещо ново. Неотдавна започнах да забелязвам сайтове, където навигацията не просто изчезва, а се отваря изцяло на цял екран в изскачащ прозорец. Нещо като популярни плъзгащи се панели, но цялото това нещо заема цялата площ на работната зона. Зад сайтовете започнаха да се появяват отделни jQuery плъгини и css3 решения, за които всъщност става дума в тази тема.
Лично аз много харесвам това изпълнение на навигационното меню, тъй като е удобно за потребители с мобилни устройства и изглежда много впечатляващо на големи монитори. Появяват се все повече сайтове с менюта на цял екран, има и повече безплатни jQuery плъгини и концепцията постепенно се превръща в тенденция.
Така. Предлагаме на вашето внимание 20 jQuery добавки за менюта на цял екран в изскачащ прозорец.
Много хубаво допълнение към дизайна на прозореца е анимираната SVG икона. По подразбиране изглежда като три ленти, но когато се щракне, иконата се трансформира в стрелка, което показва, че менюто може да бъде скрито. Закръглена анимирана навигация. Този скрипт има много готин и необичаен външен вид. Когато щракнете върху бутона на менюто, иконата, използвайки css3, излъчва вълна през целия монитор, която прераства на фона на елементите от менюто. Същият скриващ ефект.
Тази навигация работи чудесно на мобилни устройства, но като се има предвид, че ефектът на външния вид е доста тежък, мисля, че всичко ще бъде бавно на по-старите телефони (не съм го тествал, така че ще се радвам, ако напишете опита си в коментарите) .
За съжаление не работи правилно на мобилни телефони: ако има много елементи от менюто и не се побират на екрана, тогава вертикалното превъртане не се появява и навигацията просто се прекъсва.
След като получих няколко заявки, реших да напиша статия за това как да направя падащо меню. Най-добрият и лесен начин да създадете такова меню е да разчитате на jQuery.
Нека първо да разгледаме HTML маркирането
Просто падащо меню, базирано на jQuery Просто падащо меню
Съдържание
Има прост неподреден списък от ul, неговите li тагове са в основата на навигационното меню. След това добавете кода по-долу към подходящия таг li, това ще структурира падащия списък.
Ако обърнете внимание, ще забележите две неща:
1. Тагът li има падащ клас.
2. Родителската връзка има клас ddIcon.
Класът падащо меню се използва в jQuery за показване/скриване на падащо меню. Вторият клас, ddIcon, се използва за показване на показалец към падащото меню.
Няма нищо особено в стиловете на менюто - обичайните стилове са:
Контейнер (ширина: 960px; margin: 0 auto; padding-top: 50px;) .container h1 (размер на шрифта: 30px; цвят: #666; margin-bottom: 1em;) .container nav (border-radius: 4px; цвят на фона: #fff; височина: 37px; .container nav ul li (позиция: относителна; float: ляво;) .container nav ul li a (font-size: 12px; text-decoration: none; font-weight: bold ; преобразуване на текста: 13px 15px; display: 1px solid #f9f9f9 ") no-repeat 86% 52%; .container nav ul a:hover ( цвят на фона: #cc333f; цвят: #fff;) .container nav ul li.active a (background -color: #cc333f; color: #fff;) .container nav ul li:first-child a (border-radius: 4px 0 0 4px; ) .container nav ul li .subNav (позиция: абсолютна; цвят на фона: # cc333f; подложка: 15px 15px 20px; ляво: 0px; дисплей: няма); ) .container nav ul li .subNav h4 ( margin-bottom: 0.5em; ) .container nav ul li .subNav h4 a ( font-size: 11px; color: #edc951; text-transform: capitalize; border-bottom: 1px плътен #D33B47; padding: #fff; a ( float: none; border: none; display: block; capitalize; color: 7px 15px; -moz-transition: color 0.5s; line-height: 1.3; : #390206; ) .container .section ( clear: both; padding: 10px;) .container .section article p (font-size: 16px; color: #488fb8; line-height: 1.3; ) .container .section article p (padding-top: 20px; font-size: 20px; цвят: #333; височина на линията: 1.3; )
Сега трябва да се съживим падащо меню. Най-простата функция jQuery ще ни помогне с това.
$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css(( " display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":" относителен ", "z-index":"1001")); $(this).addClass("active"); ) ), function())( $(".subNav").css(("display": "няма ")); $(this).removeClass("active"); $("nav ul li").css("position":"relative", "z-index":"1")); )) ;));
За всеки елемент от списъка е възможно да създадете свое собствено падащо меню: вътре в елемента li поставете блок с класа .subnav и присвоете класа .dropdown на самия li.
Зареждане...
