| Главная » Файлы » Прочие скрипты » jQuery |
Замечательное многоуровневое горизонтальное меню на jQuery
| 23.06.14, 08:57:22 | |
 Замечательное многоуровневое меню на jQuery. Смотрится очень стильно Для начала посмотрите ДЕМО Установка: После /head на нужных вам страницах вставляйте: Код <link type="text/css" href="/css/menu.css" rel="stylesheet" /> <script type="text/javascript" src="/js/menu.js"></script> <style type="text/css"> * { margin:0; padding:0;} div#menu { margin:20px auto; } </style> Далее следующий код в то место, где должно быть меню: Код <div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>Главная</span></a> <div><ul> <li><a href="#" class="parent"><span>Подменю 1</span></a> <div><ul> <li><a href="#" class="parent"><span>Подменю 1.1</span></a> <div><ul> <li><a href="#"><span>Подменю 1.1.1</span></a></li> <li><a href="#"><span>Подменю 1.1.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Подменю 1.2</span></a></li> <li><a href="#"><span>Подменю 1.3</span></a></li> <li><a href="#"><span>Подменю 1.4</span></a></li> <li><a href="#"><span>Подменю 1.5</span></a></li> <li><a href="#"><span>Подменю 1.6</span></a></li> <li><a href="#" class="parent"><span>Подменю 1.7</span></a> <div><ul> <li><a href="#"><span>Подменю 1.7.1</span></a></li> <li><a href="#"><span>Подменю 1.7.2</span></a></li> </ul></div> </li> </ul></div> </li> <li><a href="#"><span>Подменю 2</span></a></li> <li><a href="#"><span>Подменю 3</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Продукция</span></a> <div><ul> <li><a href="#" class="parent"><span>Подменю 1</span></a> <div><ul> <li><a href="#"><span>Подменю 1.1</span></a></li> <li><a href="#"><span>Подменю 1.2</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Sub Item 2</span></a> <div><ul> <li><a href="#"><span>Подменю 2.1</span></a></li> <li><a href="#"><span>Подменю 2.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Подменю 3</span></a></li> <li><a href="#"><span>Подменю 4</span></a></li> <li><a href="#"><span>Подменю 5</span></a></li> <li><a href="#"><span>Подменю 6</span></a></li> <li><a href="#"><span>Подменю 7</span></a></li> </ul></div> </li> <li><a href="#"><span>Помощь</span></a></li> <li class="last"><a href="#"><span>Контакты</span></a></li> </ul> </div> Нам осталось лишь залить файлы из прикреплённого архива следующим образом: menu.js - в папку js menu.css - в папку css Все картинки в папку images Материал подготовлен Apocalypse | |
| Просмотров: 475 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |