1 августа 2015
10763
адаптивное меню, slicknav, мобильное меню

Адаптивное меню SlickNav

JQuery
Демонстрация » Скачать »

Первым делом, хотелось бы отметить тот факт, что данная тематика у нас рассматривается в первые на сайте, так как раньше мы рассматривали фиксированное меню на JQuery и меню для сайта Superfish, но в них не было адаптивности под мобильные устройства и они подходили только в том случае, если уже была разработана отдельно мобильная версия, но это как правило, сейчас не очень актуально и не совсем подходящий вариант под современный front-end.

 

Поэтому, предлагаю Вашему вниманию рассмотреть тематику адаптивного меню плагина ClickNav, который просто блестяще справляется с данной ситуацией и можно смело говорить, что подойдет для адаптивной верстки под заточенный дизайн сайта. Прежде чем, мы приступим к изучению самого кода, хочу чтобы Вы перешли на официальный сайт, данного плагина, и внимательно ознакомились с его примерами и документацией. Также Вы можете посмотреть сначала нашу демо версию, может что то Вам понравится и в ней. По сути, мануала там не так уж и много, но главное что все по делу расписано и рассмотрено.

 

К примеру, из основным возможностей данного мобильного меню, имеется:

  • Многоуровневая вложенность меню
  • Гибкость и простота в использовании
  • Кроссбраузерность
  • Управление с клавиатуры 

и другие функциональные особенности и приоритеты.

 

Первая часть. Подключение стилей и библиотек. HTML.

 

По умолчанию в комплект данного плагина входят два файла: стили 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>

 

Вторая часть. Стили СSS.

 

Переходим к стилям и хочу сразу же заметить, что вариантов для использования просто море. Кстати, как на сайте разработчика указано, что можно применять библиотеку-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 библиотеку плагина 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');
});

 

В общем, кому понравился данный плагин, применяйте его в своей разработке, он не сложный и любой новичок, в принципе, без особых проблем с ним сможет справиться. Желаю всем удачи, до будущих тем друзья!



Источник материала »