Мультиуровневое CSS меню с использованием jQuery

Для создания этого мультиуровневого горизонтального меню используется обыкновенный HTML для разметки. CSS и немного jQuery превращают его в полностью функциональное меню с выпадающими подменю. Плавный эффект появления подменю включен по умолчанию. Также подменю самостоятельно подстроятся горизонтально, в случае если они находятся слишком близко к правому краю окна. Это все происходит только благодаря совместной работы CSS и Javascript.

Демо (щелкните по картинке, чтобы перейти к реальному меню):

Важно: убедитесь, что страница содержит валидный тип документа (doctype) для правильного отображения меню.

Внешние файлы: для правильной работы меню необходимы дополнительные файлы, которые необходимо загрузить заранее в ту же папку, где хранятся страницы с данным меню.

* jquerycssmenu.css
* jquerycssmenu.js (внутри данного файла необходимо проверить правильность указания путей к двум картинкам, представленным ниже)

 

CSS / Javascript: этот код должен находится в разделе

<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>

HTML:

 <div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.dynamicdrive.com
Перевел: Максим Шкурупий
Урок создан: 28 Марта 2009
Просмотров: 48863
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 28 Марта 2009 21:38
    dima
    а полностью на сss можна?
  • 29 Марта 2009 11:53
    madjel
    Извините за оффтоп, хотел поинтересоваться, будут ли уроки по модулю JsHttpRequest , если да то когда?
  • 29 Марта 2009 12:31
    Дмитрий
    Интересно интересно....
  • 29 Марта 2009 17:04
    turbopaskal
    kickerps Скинь пожалуйста мне урок по регистрации rama_92@inbox.ru Спасибо
  • 29 Марта 2009 20:34
    Евгений
    madjel, на сайте разработчика все понятно и доступно написано - dklab.ru, стоит только посидеть немного и вчитаться. Кстати, здесь комменты реализованы через эту библиотеку
  • 30 Марта 2009 06:47
    dima
    Евгений, т.е. при отключенном js работать добавление не будет. очень удобно тем, что обновление страницы быстро происходит, в отличии от отправки http-заголовка средствами php или html
  • 30 Марта 2009 19:37
    Виталий
    to dima. Полностью на CSS можно. Только нужно все ньюансы отображения в разных браузерай учесть.
  • 28 Апреля 2009 14:18
    NDreY
    Здравствуйте, может кто подскажет, что значит "Важно: убедитесь, что страница содержит валидный тип документа (doctype) для правильного отображения меню." Я пробовал изменить путь к изображениям стрелок и у меня перестало работать меню в опере, в IE все работает без проблем подскажите плз, не могу сам разобраться.
  • 28 Апреля 2009 14:19
    Сергей_Патин
    Это значит, что в начале документа должны быть такие строки: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
  • 28 Апреля 2009 14:25
    NDreY
    Сергей_Патин - спасибо... все понял.
  • 29 Апреля 2009 11:47
    NDreY
    Здравствуйте.Я пробовал изменить путь к изображениям стрелок и у меня перестало работать меню в опере, в IE все работает без проблем подскажите плз, не могу сам разобраться.
  • 14 Июля 2009 10:51
    AssFucker
    Помогите его переделать в вертикальное!
  • 27 Апреля 2011 01:13
    psyhoho
    Подскажите, возможно ли сделать, что бы пункты 3го уровня вываливались не вправо...а вниз не нарушая иерархии.Спасибо
^ Наверх ^