Октябрь 25, 2019 Запись была обновлена
Красивое выдвигающееся меню
На данный момент с помощью 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> |
Вывод
Мне очень нравятся такие меню, но, к сожалению, к моему дизайну они не подходят. Надеюсь вам понравилось данное меню и вы найдете ему должное применение. Одно из плюсов такого меню является то, что оно не занимает место на сайте, а значит это же место можно использовать для чего-либо другого.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
А есть ли возможность сделать второй уровень меню выдвигающимся еще раз вправо, не перекрывая первый уровень?
Георгий, посмотрите вот эту статью — перейти. Может это меню вам подойдет.
Здравствуйте Юрий
Очень понравилось ваше меню, все отлично работает . Но хотелось его немного дополнить, сам я к сожалению в этом ничего не понимаю и как осуществить мою задумку я не знаю, если у вас найдется чуток свободного времени может быть вы согласитесь его подредактировать(если это конечно будет не слишком затруднительно).
Дополнение вот какого плана, сейчас оно отъезжает только в сторону, а можно его как-нибудь сдвинуть в сторону и к низу. Чтобы в верхней части сайта тоже осталось место куда можно накидать кнопок входа и тд…. Вот для примера скину образец чтобы было более понятно(где обозначил красным цветом чтобы туда можно было тоже что нибудь запихать).
http://s012.radikal.ru/i320/1410/f0/22afc69942f6.png
Здравствуйте, Евгений! Я понял что вы хотите сделать. Посмотрел документацию плагина и не нашел там настроек, чтобы сделать таким образом (чтобы уезжало вниз вправо). Только если изменить код плагина. Возможно вы найдете что-нибудь подходящее в этой статье — перейти.
Приветствую, Юрий! Подскажите, как сделать меню по умолчанию развернутым, как на странице плагина http://mmenu.frebsite.nl/ , и чтобы бы сворачивалось при определенной максимальной ширине экрана? Спасибо, за статью.
Добрый день, Виталий!
Если Вы его сделаете по умолчанию развернутым, тогда определенная часть контента будет скрыта изначально. Тут Вам нужно подумать так ли Вам нужно сделать.
Чтобы сворачивалось при определенной максимальной ширине экрана — необходимо использовать media queries.
Я так понял под ИЕ8 работать не будет? Или можно что-то сделать?
Под IE8 необходимо писать много костылей, если Вам это критично, тогда придется самостоятельно найти информацию.
И ещё вопрос: в demo.css есть строка
#page nav { display: none; }
Не возьму в толк , что это за элемент с id=page. в тексте примера такого нет. (что это скрытие nav понятно, но как это работает?)
А кто-то может подсказать, как уменьшить ширину меню? По умолчанию у меня ширина меню 440px если его уменьшить в css до 330px, то получается отступ между меню и остальным контентом в 100px. Т. е. весь сайт сдвигается на 440px, а где поменять эту настройку не пойму.