Красивое выдвигающееся меню
В этом уроке мы будем использовать jQuery плагин — «jQuery.mmenu.js». Его можно скачать по ссылке — скачать. Как пользоваться? HTML часть Сперва подключим необходимые библиотеки и стили: [HTML]<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>[/HTML] Затем определимся со структурой меню. Для примера, чтобы показать как оно работает, я сделаю меню с вложенными элементами. Но у вас оно может быть и более простое: [HTML]<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>[/HTML] Немного выше меню вставим переключатель, чтобы пользователь мог открыть/закрыть его: [HTML]<div id="header"> <a href="#menu"></a> Страница с примером работы данного плагина </div>[/HTML] С HTML структурой закончили, сейчас переходим к стилям. CSS часть Мы уже подключили стили для меню(они находятся в «jquery.mmenu.css») и зададим их только для переключателя: [CSS]#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; }[/CSS] jQuery часть И осталось самое последнее — всё это заставить работать: [JavaScript]<script type="text/javascript"> $(function() { $('nav#menu').mmenu(); }); </script>[/JavaScript] Вывод Мне очень нравятся такие меню, но, к сожалению, к моему дизайну они не подходят. Надеюсь вам понравилось данное меню и вы найдете ему должное применение. Одно из плюсов такого меню является то, что оно не занимает место на сайте, а значит это же место можно использовать для чего-либо другого. Успехов!
|
Категория: 
Опубликовал: 
Используемый код:
Web-сайт автора: 
Автор: |
СКАЧАТЬ
Размер файла: 9.6 Kb
Посмотреть Альтернативная ссылка |
Комменты
|
|
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
