Уроки мастерства


Отличное адаптивное меню


Содержание урока

Самый простой способ разработки сайтов с многоуровневой навигацией и дружественным интерфейсом это меню оптимизировано для мобильных устройств с использованием HTML5, CSS3 и jQuery.

Основные характеристики данного меню

  • Легкая установка — Включает в себя 3 строки кода в HTML и навигация работает
  • Многоуровневость на CSS — Многоуровневое меню будет работать на широких экранах, даже если нет JS
  • Маленький вес — Требуется только библиотека jQuery
  • Несколько меню — Вы можете создать для Вашего сайта столько адаптивных многоуровневых меню, сколько Вы захотите
  • Работает на мобильных устройствах — Адаптивное многоуровневое меню умещается на экран мобильных телефонов
  • Бесплатная лицензия — Делай с кодом что хочешь

Шаг 1 — HTML код для вставки в <head></head>

<!-- Include scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="js/responsivemultimenu.js"></script>

<!-- Include styles -->
<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

<!-- Include media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

Шаг 2 — HTML код для вставки в <body></body>


<div class="rmm style">
	<ul>
		<li>
			<a href="#">Books</a>
			<ul>
				<li>
					<a href="#">Audiobooks</a>
				</li>
				<li>
					<a href="#">Cookbooks</a>
				</li>
				<li>
					<a href="#">Catalogs</a>
				</li>
				<li>
					<a href="#">Other</a>
					<ul>
						<li>
							<a href="#">Other 1</a>
						</li>
						<li>
							<a href="#">Other 2</a>
						</li>
					</ul>
				</li>

			</ul>
		</li>
		<li>
			<a href="#">Dvds</a>
		</li>
		<li>
			<a href="#">Music</a>
			<ul>
				<li>
					<a href="#">Cassettes</a>
				</li>
				<li>
					<a href="#">CD</a>
				</li>
				<li>
					<a href="#">Records</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Video games</a>
		</li>
	</ul>
</div>

Пример полного HTML кода для навигации на мобильном устройстве

<!DOCTYPE html>
<html>
<head>
	<title>Responsive Multi Menu</title>

	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">

	<!-- Include scripts -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
	<script type="text/javascript" src="js/responsivemultimenu.js"></script>

	<!-- Include styles -->
	<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

	<!-- Include media queries -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body style="background: #2C2B2C;">

<div>
<div class="rmm style">
<ul>
	<li>
		<a href="Books.html">Books</a>
		<ul>
			<li>
				<a href="Audiobooks.html">Audiobooks</a>
			</li>
			<li>
				<a href="Cookbooks.html">Cookbooks</a>
			</li>
			<li>
				<a href="Catalogs.html">Catalogs</a>
			</li>
			<li>
				<a href="Other.html">Other</a>
				<ul>
					<li>
						<a href="Other.html">Other 1</a>
					</li>
					<li>
						<a href="Other.html">Other 2</a>
					</li>
				</ul>
			</li>

		</ul>
	</li>
	<li>
		<a href="Dvds.html">Dvds</a>
	</li>
	<li>
		<a href="Music.html">Music</a>
		<ul>
			<li>
				<a href="Cassettes.html">Cassettes</a>
			</li>
			<li>
				<a href="CD.html">CD</a>
			</li>
			<li>
				<a href="Records.html">Records</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="Videogames.html">Video games</a>
	</li>
</ul>
</div>
</div>
</body>
</html>
Скачать Demo



Технологии

CSS3
jQuery

Новые комментарии



    Оставить комментарий