Subbay.ru
Четверг, 23.11.2017, 17:10
Мини-чат

Вход на сайт

Архив записей

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » 2017 » Октябрь » 28 » Вертикальное и горизонтальное всплывающее меню на jquery
11:45
Вертикальное и горизонтальное всплывающее меню на jquery

Всплывающее меню — это отличное решение для построения полноценной навигации с различными уровнями вложенности, которое зарекомендовало себя еще лет 10 назад. При разработке сайтов в нашей студии мы также используем этот прием для реализации удобного перемещения по разделам веб-ресурса: medprem.ru, okphoto.ru.
Сегодня я хочу предложить вашему вниманию готовый способ реализации горизонтального и вертикального всплывающего меню с помощью javascript и css.

Всего лишь с помощью одной строчки javascript-кода ваш список, размеченный с помощью тэгов <ul> и <li>превращается в выпадающий список. Не забываем подключить jquery-фреймворк и файл slidemenu.js. Если вы хотите создать горизонтальное меню, то в функции buildmenu в третьем параметре нужно указать цифру «1», если вертикальное — «2».

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="slidemenu.js"></script>
<script>
jqueryslidemenu.buildmenu("myslidemenu", arrowimages, 1)
</script>

А вот и код разметки.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Публикации</a>
 <ul>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Статьи</a></li>
 <li><a href="#">Интервью</a></li>
 <li><a href="#">Репортажи</a></li>
 </ul>
</li>
<li><a href="#">Блоги</a></li>
<li><a href="#">Разделы</a>
 <ul>
 <li><a href="#">Раздел 2.0</a></li>
 <li><a href="#">Раздел 2.1</a>
 <ul>
 <li><a href="#">Раздел 2.1.1</a></li>
 <li><a href="#">Раздел 2.1.2</a></li>
 <li><a href="#">Раздел 3.1.1</a>
 <ul>
 <li><a href="#">Раздел 3.1.1.1</a></li>
 <li><a href="#">Раздел 3.1.1.2</a></li>
 <li><a href="#">Раздел 3.1.1.3</a></li>
 <li><a href="#">Раздел 3.1.1.4</a></li>
 <li><a href="#">Раздел 3.1.1.5</a></li>
 </ul>
 </li>
 <li><a href="#">Раздел 2.1.4</a></li>
 </ul>
 </li>
 </ul>
</li>
<li><a href="#">Форум</a></li>
</ul>
<br style="clear: left" />
</div>
Просмотров: 30 | Добавил: Rockfeller
Всего комментариев: 0
avatar
Бегущая строка в HTMLWWW.SUBBAY.RU
Copyright Subbay.ru © 2017
uCoz