Навигация для мобильного устройства

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

 

Задача

Ниже представленные снимки экрана показывают ситуации с шаблонами на экранах мобильных устройств. Если навигация имеет 3 или 4 кнопки, то ее расположение сохранится в одну строку. Но когда в меню содержится 6 и более пунктов , получается уродливая куча.

 

Решение

1) Выпадающий список

Одним из распространенных способов является конвертация навигации в выпадающий список на основе элемента select.  Такое решение имеет недостаток - элемент select нельзя стилизовать с помощью CSS. Плагины Javascript, наподобие Chosen позволяют модифицировать меню, или придется довольствоваться системными стилями для выпадающего списка. Также пользователь может быть введен в заблуждение, когда широкоэкранная версия структуры меню трансформируется на мобильном устройстве в выпадающий список.

 

2) Вывод в виде блока

Другой популярный способ  - формировать пункты меню как элементы блока с вертикальным расположением пунктов. Однако такой подход занимает большое пространство в заголовке. Если навигация содержит много кнопок, то пользователю придется прокручивать длинный список, чтобы добраться до информации.

 

3) Иконка меню

И последний способ, который мы рассмотрим в нашем уроке - использование иконки меню для включения навигации. Такой подход сохраняет место на странице (что важно для мобильного устройства) и дает полный контроль над внешним видом с помощью CSS. Иконка меню и сама навигация может быть представлена в соответствии с общим стилем сайта.

 

Навигация для мобильного включаемая с помощью jQuery

В данном уроке мы покажем, как создать навигацию для маленького экрана. Будет использоваться jQuery для подготовки иконки меню и включения навигации. Никаких дополнительных тегов HTML для работы навигации не требуется.

Для нашего меню будет использоваться простая структура:

<nav id="nav-wrap">

	<ul id="nav">
		<li><a href="#">Кнопка</a></li>
		<li><a href="#">Кнопка</a></li>
	</ul>

</nav>


Для функционирования меню требуется код JavaScript.  Функция подготавливает элемент <div id="menu-icon"> в теге <nav id="#nav-wrap">. Когда посетитель нажимает кнопку мыши на элементе #menu-icon, выскальзывает навигация.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

	/* Подготавливаем иконку меню */
	$('#nav-wrap').prepend('<div id="menu-icon">Меню</div>');
	
	/* Включаем навигацию */
	$("#menu-icon").on("click", function(){
		$("#nav").slideToggle();
		$(this).toggleClass("active");
	});

});
</script>

В результате работы скрипта изменится структура документа:

<nav id="nav-wrap">

	<div id="menu-icon">Меню</div>

	<ul id="nav">
		<li><a href="#">Кнопка</a></li>
		<li><a href="#">Кнопка</a></li>
	</ul>

</nav>

Для нашей демонстрации используется достаточно простой код CSS. Ключевой момент представлен на рисунке ниже.  Элемент #menu-icon имеет изначально свойство display:none. Используется медиа-запрос для изменения #menu-icon на display:block, если ширина окна просмотра меньше 600px.

В результате получится навигация с представленным функционалом:


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/8c2tDle6k4A/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Навигация для мобильного устройства | | 2012-07-08 16:37:36 | | Статьи Web-мастеру | | Одним из направлений, которое требует особенного внимания при разработке дизайна интерфейса для мобильного устройства, является навигационное меню. Если сайт имеет много секций или страниц, требуется | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: