В данном уроке мы сделаем адаптивное выпадающее меню на jQuery и CSS3.
Разметка HTML
Структура HTML будет строиться с мета тегом viewport для управления шаблоном на мобильных устройствах.
Обычно оптимизированные для мобильных приложений сайты содержат следующие команды:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
</head>
CSS и JavaScript подключаются следующими строчками:
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
<script src="js/jquery-1.7.2.min.js"></script>
JavaScript код, который строит навигационное меню для мобильных устройств выглядит так:
<!-- javaScript -->
<script>
<!-- // Стрим меню для мобильных устройств -->
$(function(){
// Добавляем элемент select
$('<select />').appendTo('nav');
//Добавляем опции в элемент select
$('<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');
});
// Событие onclicking при нажатии на ссылку
$('nav select').on('change',function(){
window.location = $(this).find('option:selected').val();
});
});
// Выводим и скрываем подменю
$(function(){
$('nav ul li').hover(
function () {
// Выводим подменю
$('ul', this).slideDown(150);
},
function () {
// Скрываем подменю
$('ul', this).slideUp(150);
}
);
});
</script>
Само выпадающее меню будет иметь следующую структуру:
<div id="fdw">
<!--Навигация-->
<nav>
<ul>
<li class="current"><a href="http://www.ruseller.com" target="_balnk">Главная<span class="arrow"></span></a>
<ul style="display: none;" class="sub_menu">
<li class="arrow_top"></li>
<li><a class="subCurrent" href="http://www.ruseller.com" target="_balnk">Пророчества</a></li>
<li><a href="http://www.ruseller.com" target="_balnk">Откровения</a></li>
</ul>
</li>
<li><a href="http://www.ruseller.com" target="_balnk">О нас</a></li>
<li><a href="http://www.ruseller.com" target="_balnk">Услуги</a></li>
<li>
<a href="http://www.ruseller.com" target="_balnk">Портфолио<span class="arrow"></span></a>
<ul style="display: none;" class="sub_menu">
<li class="arrow_top"></li>
<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 3 </a></li>
<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 4 </a></li>
<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 1 </a></li>
<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 2 </a></li>
</ul>
</li>
<li>
<a href="http://www.ruseller.com" target="_balnk">Блог<span class="arrow"></span></a>
<ul style="display: none;" class="sub_menu">
<li class="arrow_top"></li>
<li><a href="http://www.ruseller.com" target="_balnk">Дизайн</a></li>
<li><a href="http://www.ruseller.com" target="_balnk">HTML5</a></li>
<li><a href="http://www.ruseller.com" target="_balnk">CSS3</a>
</li><li><a href="http://www.ruseller.com" target="_balnk">jQuery</a></li>
</ul>
</li>
<li><a href="http://www.ruseller.com" target="_balnk">Контакты</a></li>
</ul>
</nav>
</div>
CSS
Для меню используются следующие стили:
#fdw nav select {
display:none; /* Для дисплеев мобильных устройств */
}
#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 =======*/
#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;
}
/*===========================================*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* nav */
#fdw nav ul li{
margin-left:12px;
}
}
/* Для всех мобильных устройств */
@media only screen and (max-width: 767px) {
/* Навигационное меню */
#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;
}
}