Как сделать выдвигающееся меню


Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Как сделать выдвигающееся меню



Август 14, 2015 Запись была обновлена

Юрий Немец

11090

Красивое выдвигающееся меню

На данный момент с помощью jQuery можно сделать на сайте всё что угодно, нужно лишь определиться надо ли это вашему сайту. Мы все стремимся сделать сайт наиболее удобный для пользователя, чтобы ему было приятно перемещаться по сайту и это было максимально легко. Меню играет большую роль когда посетитель «гуляет» по вашему сайту. И в этом уроке мы создадим выдвигающееся меню, которое может прятаться и появляться когда это необходимо пользователю.

Также интересные выдвигающиеся меню:

Пример можно увидеть здесь:

В этом уроке мы будем использовать jQuery плагин — «jQuery.mmenu.js». Его можно скачать по ссылке — скачать.

Как пользоваться?

HTML часть

Сперва подключим необходимые библиотеки и стили:

1 2 3 4 5 <link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" /> <link type="text/css" rel="stylesheet" href="css/demo.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mmenu.js"></script>

Затем определимся со структурой меню. Для примера, чтобы показать как оно работает, я сделаю меню с вложенными элементами. Но у вас оно может быть и более простое:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <nav id="menu"> <ul> <li><a href="#">Страница 1</a></li> <li class="Selected"> <a href="#">Страница 2</a> <ul> <li><a href="#">Страница 10</a></li> <li> <a href="#">Страница 11</a> <ul> <li><a href="#">Страница 13</a></li> <li><a href="#">Страница 14</a></li> <li><a href="#">Страница 15</a></li> </ul> </li> <li><a href="#">Страница 12</a></li> </ul> </li> <li><a href="#">Страница 3</a></li> <li><a href="#">Страница 4</a></li> <li><a href="#">Страница 5</a></li> <li><a href="#">Страница 6</a></li> <li><a href="#">Страница 7</a></li> <li><a href="#">Страница 8</a></li> <li><a href="#">Страница 9</a></li> </ul> </nav>

Немного выше меню вставим переключатель, чтобы пользователь мог открыть/закрыть его:

1 2 3 4 <div id="header"> <a href="#menu"></a> Страница с примером работы данного плагина </div>

С HTML структурой закончили, сейчас переходим к стилям.

CSS часть

Мы уже подключили стили для меню(они находятся в «jquery.mmenu.css») и зададим их только для переключателя:

1 2 3 4 5 6 7 8 9 10 11 12 13 #header a { background: center center no-repeat transparent; background-image: url( data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC ); display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 10px; }

jQuery часть

И осталось самое последнее — всё это заставить работать:

1 2 3 4 5 <script type="text/javascript"> $(function() { $('nav#menu').mmenu(); }); </script>

Вывод

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

Успехов!

Красивое выдвигающееся меню 5.00/5 (100.00%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+


Источник: http://www.sitehere.ru/krasivoe-vydvigayushheesya-menyu



Как сделать выдвигающееся меню фото



Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Как сделать выдвигающееся меню

Похожие статьи: