Первым делом, хотелось бы отметить тот факт, что данная тематика у нас рассматривается в первые на сайте, так как раньше мы рассматривали фиксированное меню на JQuery и меню для сайта Superfish, но в них не было адаптивности под мобильные устройства и они подходили только в том случае, если уже была разработана отдельно мобильная версия, но это как правило, сейчас не очень актуально и не совсем подходящий вариант под современный front-end.
Поэтому, предлагаю Вашему вниманию рассмотреть тематику адаптивного меню плагина ClickNav, который просто блестяще справляется с данной ситуацией и можно смело говорить, что подойдет для адаптивной верстки под заточенный дизайн сайта. Прежде чем, мы приступим к изучению самого кода, хочу чтобы Вы перешли на официальный сайт, данного плагина, и внимательно ознакомились с его примерами и документацией. Также Вы можете посмотреть сначала нашу демо версию, может что то Вам понравится и в ней. По сути, мануала там не так уж и много, но главное что все по делу расписано и рассмотрено.
К примеру, из основным возможностей данного мобильного меню, имеется:
и другие функциональные особенности и приоритеты.
По умолчанию в комплект данного плагина входят два файла: стили CSS - slicknav.css и библиотека JQuery - jquery.slicknav.js.
Поэтому, мы сразу их подключаем.
<link type="text/css" rel="stylesheet" href="css/slicknav.css"> <script src="js/jquery.slicknav.js"></script>
Правда перед подключением библиотеки самого плагина, подключаем еще и библиотеку JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
После этого, уже по стандарту подключаем наш постоянный файл demo.css, в котором мы для демонстрации пропишем необходимые стили и сам скрипт JQuery, который также будет необходим для демонстрации.
<link type="text/css" rel="stylesheet" href="css/demo.css"> <script src="js/slicknav.js"></script>
Все, требующиеся для нормальной работы плагина SlickNav, стили, библиотеки и скрипты мы подключили, теперь перейдем к коду HTML. Для этого создадим навигацию с помощью атрибута nav, ну, а внутри него уже по умолчанию через маркированный список ul li создаем меню.
<nav> <ul id="menu"> <li><a href="#">Главная</a></li> <li><a href="#">События</a></li> <li><a href="#">Авторы</a></li> <li><a href="#">О проекте</a></li> </ul> </nav>
Переходим к стилям и хочу сразу же заметить, что вариантов для использования просто море. Кстати, как на сайте разработчика указано, что можно применять библиотеку-JavaScript Modernizr и с помощью нее получать в разработке при взаимодействии с HTML5 и CSS3, красивое эстетичное адаптивное меню.
Стилей не так уж и много, но тут самое главное подчеркнуть, что имеется основы, которые нужны обязательны! Как на сайте данного плагина написано, что потребуется прописывать следующие необходимые стили, но для нашего примера я их немного изменю.
Немного может потребуется с меня объяснений, к примеру: классу slicknav_menu, по умолчанию прописывается свойство display: none, которое скрывает пункты мобильного меню. Соответственно, данному плагину присущи медиа-запросы, так как и по тематике понятно, что принцип разработки предназначен для мобильных устройств. Поэтому, для нашего примера, мы устанавливаем максимальную ширину в 721 пиксель.
.slicknav_menu {
display:none;
}
@media screen and (max-width: 721px) {
nav{
background:#fff;
border-radius:0;
padding:0;
}
#menu {
display:none;
}
.slicknav_menu {
display:block;
}
}
Далее мы уже применяем наши собственные стили, которые будут оформлять наше мобильное меню.
nav {
width:100%;
background:#4c4c4c;
border-radius:10px;
padding:8px 0px 9px;
}
nav >ul#menu{
margin:auto;
width:390px;
}
ul#menu li a{
text-decoration:none;
color:#fff;
padding:8px 9px 9px;
display:block;
}
ul#menu li a:hover{
background:#ccc;
color:#222;
border-radius:5px;
}
ul#menu li{
float:left;
padding:0 10px;
list-style-type: none;
}
Переходим к заключительной части нашего плагина, разработке и ознакомлению с параметрами и методами при написании скрипта. В отличие от методов, параметров, действительно, хоть убавляй.
Надеюсь, документацию Вы уже хоть немного изучили, поэтому понимаете, что вам может потребоваться для разработки своего собственного адаптивного меню. Перед тем, как перейдем к рассмотрению параметров скрипта, хочу напомнить, что по умолчанию не забудьте подключить JQuery библиотеку плагина jquery.slicknav.js, а то без нее ничего работать не будет!
Сразу же, первым делом, давайте ознакомимся с кодом. Как мы понимаем, сначала мы обращаемся к идентификатору menu функции slicknav, в которой уже прописаны два параметра.
Первый параметр, prependTo с опцией nav, означает, что сам скрипт будет находится только в том месте, где находится атрибут nav в HTML. Второй параметр parentTag с опцией div, указывает, на родителя тега и за что он отвечает. В данном случае родителем будет тег div в HTML.
Также, Вы можете рассмотреть самостоятельно другие параметры, которые там есть, к примеру: параметр duplicate по умолчанию идет как true, если его поставить в опцию false, то адаптивное меню будет выключено.
$(document).ready(function(){
$('#menu').slicknav({
prependTo:'nav',
parentTag:'div',
});
});
Перейдем к методам, к примеру нам нужно, чтобы наше мобильное меню было всегда развернуто. Прописываем следующее и получаем необходимый результат.
$(document).ready(function(){
$('#menu').slicknav({
prependTo:'nav',
parentTag:'div',
});
$('#menu').slicknav('open');
});
В общем, кому понравился данный плагин, применяйте его в своей разработке, он не сложный и любой новичок, в принципе, без особых проблем с ним сможет справиться. Желаю всем удачи, до будущих тем друзья!