Веб-дизайнеру
Веб-разработчику
Дополнительно
Красивое выпадающее меню на CSS3 и JQuery
Скачать
Демо
Как создать выпадающее меню? Этот вопрос наверное задавал каждый начинающий веб-мастер. И если Вы искали ответ на этот вопрос, то значит Вы попали точно по адресу! Почему? Потому, что в этом уроке мы создадим красивое выпадающее меню с использованием последних новшеств CSS3, а также библиотеку JQuery качества меню, а также правильного отображения при разных разрешениях экрана. Подобное меню, только другого дизайна, мы уже создавали в этой статье “Горизонтальное выпадающее меню на CSS3″.
При создании меню мы будем использовать следующие плагины:
- JQuery-плагин 1.7.2.
Давайте начнем с HTML разметки.
HTML структура
Обычный мобильный оптимизированный сайт содержит что-то вроде следующего:
|
1 2 3 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> </head> |
Подключаем CSS стили и JavaScript следующим, в общем обычным способом:
|
1 2 |
<link rel="stylesheet" type="text/css" href="/web-developer/css/styles.css" media="all" /> <script src="/web-developer/css/js/jquery-1.7.2.min.js"></script> |
JavaScript функции, чтобы выбрать nav для мобильных устройств и показывать или скрывать подменю:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!-- javaScript --> <script> <!-- // building select nav for mobile width only --> $(function(){ // building select menu $('<select />').appendTo('nav'); // building an option for select menu $('<option />', { 'selected': 'selected', 'value' : '', 'text': 'Choise Page...' }).appendTo('nav select'); $('nav ul li a').each(function(){ var target = $(this); $('<option />', { 'value' : target.attr('href'), 'text': target.text() }).appendTo('nav select'); }); // on clicking on link $('nav select').on('change',function(){ window.location = $(this).find('option:selected').val(); }); }); // show and hide sub menu $(function(){ $('nav ul li').hover( function () { //show its submenu $('ul', this).slideDown(150); }, function () { //hide its submenu $('ul', this).slideUp(150); } ); }); //end </script> <!-- end --> |
Выпадающее меню будет иметь следующую структуру:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div id="fdw"> <nav> <ul> <li class="current"><a href="#">Главная<span class="arrow"></span></a> <ul style="display: none;" class="sub_menu"> <li class="arrow_top"></li> <li><a class="subCurrent" href="#">Главная</a></li> <li><a href="#">Разработки</a></li> </ul> </li> <li><a href="#">О нас</a></li> <li><a href="#">Сервисы</a></li> <li> <a href="#">Портфолио<span class="arrow"></span></a> <ul style="display: none;" class="sub_menu"> <li class="arrow_top"></li> <li><a href="#">Портфолио 1</a></li> <li><a href="#">Портфолио 2</a></li> <li><a href="#">Портфолио 3</a></li> <li><a href="#">Портфолио 4</a></li> </ul> </li> <li> <a href="#">Блог<span class="arrow"></span></a> <ul style="display: none;" class="sub_menu"> <li class="arrow_top"></li> <li><a href="#">Дизайн</a></li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a> <li><li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">Контакты</a></li> </ul> </nav> </div> |
Каскадные Таблицы Стилей (CSS):
Создать красивое выпадающее меню без стилей просто невозможно, поэтому вот они (стили всмысле 
):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
/*===== nav style ======*/ #fdw nav select { display:none; /* this is just for the mobile display */ } #fdw nav ul { display:block; z-index:999999; } #fdw nav ul li { display:inline-block; padding:50px 3px 30px; margin-left:30px; position:relative; } #fdw nav ul li a:link, #fdw nav ul li a:visited { color:#444; font:normal 20px 'Yanone Kaffeesatz', sans-serif; text-transform:uppercase; display:inline-block; position:relative; } #fdw nav ul li a:hover, #fdw nav ul li a:active { color:#e25d29; text-decoration:none; } #fdw nav ul li span { position:absolute; right:-12px; bottom:6px; width:7px; height:8px; margin:0 0 0 3px; float:right; display:block; background:url('images/nav_arrow.png') no-repeat left -8px; font:0/0 a; } #fdw nav ul li.current { border-bottom:2px solid #e25d29; } #fdw nav ul li.current a { color:#e25d29; cursor: default; } #fdw nav ul li.current a span { background:url('../images/nav_arrow.png') no-repeat left 0; } #fdw nav ul li.current ul li a { cursor:pointer; } /*===== sub_menu Style =======*/ #fdw nav ul li ul.sub_menu { position:absolute; top:90px; left:0; margin:0; padding:0; background:#fff; border:1px solid #ececec; border-top:5px solid #e25d29; display:none; z-index:999999; -moz-box-shadow: 0px 6px 7px #121012; -webkit-box-shadow: 0px 6px 7px #121012; box-shadow: 0px 6px 7px #121012; } #fdw nav ul li ul.sub_menu li.arrow_top { position:absolute; top:-12px; left:12px; width:13px; height:8px; display:block; border:none; background:url('images/arrow_top.png') no-repeat left top; } #fdw nav ul li ul.sub_menu li { float:none; margin:0; padding:0; border-bottom:1px solid #ececec; } #fdw nav ul li ul.sub_menu li a { white-space: nowrap; width: 150px; padding:12px; font:13px Arial, tahoma, sans-serif; text-transform:capitalize; color:#777; } #fdw nav ul li ul.sub_menu li a:hover { background:#f9f9f9; color:#333; } #fdw nav ul li ul.sub_menu li a.subCurrent { color:#e25d29; cursor:default; } #fdw nav ul li ul.sub_menu li a.subCurrent:hover { background:none; } |
Функция запроса CSS будет иметь следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@media only screen and (min-width: 768px) and (max-width: 959px) { /* nav */ #fdw nav ul li{ margin-left:12px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { /* nav menu ul & select */ #fdw nav ul { display:none; } #fdw nav select { width:100%; display:block; margin-bottom:30px; cursor:pointer; padding:6px; background:#f9f9f9; border:1px solid #e3e3e3; color:#777; } } |
Готово! У нас красивое выпадающее меню на JQuery и CSS3. Ознакомьтесь с демонстрацией, и загружайте его на свой компьютер (сейчас или в будущем оно Вам обязательно пригодится). Надеюсь, этот урок Вам понравился и был полезен!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
Здраствуйте! Скажите пожалуйста, а подчеркивание кнопок двигается в зависимо от места положения посетителя?
/
Здравствуйте! Сейчас точно сказать не могу, но если Вы решите реализовать подобное меню, то с данным моментом поможем.
Да, я хочу поставить это меню на свой сайт, но получается так, что переходя по ссылкам, подчеркнутым и в красном свете остается только кнопка “главная”. К примеру, я бы хотел, чтобы при нажатии допустим на кнопку “о нас”, посетитель переходил на эту страницу и подсвечивалась с подчеркиванием именно эта кнопка (даже если нажималось подменю этой кнопки. Сайт-черновик:
/
Извините за задержку с ответом.
Используйте следующий скрипт (пробелы в теге script удалите):
Может я что то не так делаю, но ничего не происходит! Его поставить туда же где и родной скрипт или вместо него ?
/
При копировании одинарные кавычки стали отображаться неправильно (в коде они с наклоном у Вас на сайте), Вам необходимо заменить их на обычные одинарные ‘
Скажите Влад, вариантов больше нет?
/
Попробуйте это (пробелы уберите, и если что, подредактируйте кавычки):
Влад, подскажите пожалуйста как отключить подчеркивание кнопок, чтобы я задействовал менюшку на сайте, пока таким, какое есть.
/
Здравствуйте! Честно говоря сейчас очень загружен, очень мало времени. Чтобы удалить подчёркивание, удалите следующее из тега
li–.
Спасибо! Надеюсь когда-нибудь моя мечта реализируется
Удачи Вам !