Горизонтальное выпадающее меню jQuery
03.02.2011 12:24При создании сайтов, многие вебмастера всё чаще и чаще прибегают к помощи технологий jQuery в решении различных проблем. Есть несколько причин популярности jQuery. Во-первых, кросс браузерность, то есть поддерживается почти всеми существующими браузерами. Во-вторых, нет проблем с поисковыми роботами, индексация страниц происходит без каких-либо ошибок. HTML-код не засоряется сторонними включениями, а JavaScript выносится в отдельный файл, что очень удобно. В-третьих, получаем ряд преимуществ в дизайне.
Не редко, при наведении курсора на любое меню, можно заметить плавное, медленное его появление. В основном такие и подобные эффекты реализуются с помощью jQuery. Вот пример подобного горизонтального выпадающего меню.
Теперь о том как установить такое меню к себе на сайт. HTML разметка ничем не отличается от обычной, для данного вида горизонтального многоуровневого меню:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<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>
</ul>
</li>
<li><a href="#">Обучение</a>
<ul>
<li><a href="#">Уроки</a></li>
<li><a href="#">Видеоуроки</a>
<ul>
<li><a href="#">Работа с HTML</a></li>
<li><a href="#">Работа с CSS </a></li>
<li><a href="#">Работа с PHP</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Автоматизация</a></li>
<li><a href="#">Секреты</a></li>
</ul>
<br style="clear: left" />
</div>
Как видите, мы в контейнере div создали, своего рода, каркас меню, и заранее определили сколько уровней оно будет иметь. Далее необходимо придать, нужный облик, в котором хотелось бы видеть горизонтальное выпадающее меню. То есть внешний вид, цвет, размер и т.д. Это делается при помощи таблиц стилей CSS.
Чтобы меню заработало как надо и посетители Вашего сайта смогли увидеть тот эффект появления подменю, показанный в демо версии, нужно добавить jQuery библиотеку и скрипт активации меню. Но давайте всё разложим попорядку.
1. Скачайте файл с горизонтальным выпадающим меню.
2. Вставте, представленную выше, HTML разметку в любом месте страницы Вашего сайта, там где бы Вы хотели видеть меню.
3. Укажите путь к стилям CSS, которые находятся в скачанном Вами файле и называется jqueryslidemenu.css. Адрес прописывается между тегами <head>...</head> следующим образом:
<link rel="stylesheet" type="text/css" href="/jqueryslidemenu.css"/>
4. Подключаем последнюю версию библиотеки jQuery с серверов гугла и скрипт активации меню jqueryslidemenu.js , находящийся в скачанном Вами файле. Прописываем между тегами <head>...</head> строки:
<script type=''text/javascript'' src=''http://ajax.googleapis.com/ajax/
libs/jquery/1/jquery.min.js''></script>
<script type="text/javascript" src="/jqueryslidemenu.js"></script>
Вот и всё, пользуйтесь на столько, на сколько Вашей фантазии хватит.
21 Комментариев
Андрей
2011-02-20 20:21:22
Добрый день, хотелось бы узнать, как сделать заполнение меню по всей странице( меню было плавающее, как весь дизайн сайта), иначе на особо хороших мониторах полоска занимает половину страницы, а вторую половину текст...Некрасиво получаестя, и почему то появились какие то точки справа от выпадающих колонок....Прошу, если не сложно, давйте совет.
Admin
2011-02-22 12:30:23
Андрей, Если хотите сделать меню плавающим, то и размеры ячеек/колонок, в файле CSS, ставте в процентном соотношении, не фиксируя определённым значением.
Андрей
2011-02-23 20:02:16
Спасибо большое за совет и за меню в целом, прекрасно сделано..!) очень бы хотелось узнать всё же, как убрать точки, которые появляются при открытии любой из колонок меню(как будто подпункты в ворде), ссылка на сайт www.намт.рф , заранее благодарен!) И очень хотелось бы узнать как установить на сайт такое меню типа ВОПРОС-ОТВЕТ, без регистраций пользователей, вообщем как это у вас...)
Admin
2011-02-24 11:41:26
Андрей, чтобы убрать точки(так называемые буллеты), откройте CSS файл Вашего сайта(у Вас, я так понял, это general.css) и поисчите там строки li{ list-style-type: disc;} Попробуйте поменять disc на none. Теперь насчёт "меню типа ВОПРОС-ОТВЕТ", если я правильно понял, Вы имели ввиду форму обратной связи. Если погуглить в интернете можно найти массу примеров и способов установки данной формы. Попробуйте набрать в поисковике "установка гостевой книги", "форма комментариев" или "форма обратной связи".
Андрей
2011-02-24 20:33:18
Спасибо, дельные советы и всё получилось...)
Admin
2011-02-25 08:16:02
Всегда пожалуйста:)
Андрей
2011-03-31 14:56:19
Ув. пользователи. Подскажите, пожалуйста, как решить проблем с изображениями. Установил данное меню на ucoz. На главной странице оно отображается корректно, но вот на остальных не видно стрелочек. Вместо них значок, как будто изображение не найдено. Так и выщло, пкм по этому значку, а путь к изображению прописан такой, как к странице. Т.е. если главную стр. открываю, то всё норм, потому, что рисунки в корне. А если открываю, к примеру, форум, то путь к изображению просит www.xxxxxx.xxxx.xx/forum. Как решить эту проблему, что бы картинки с корня брались?
rasin
2011-04-01 07:02:34
Может в CSS что-то неправильно указали или попробуйте абсолютные пути прописать...
Андрей
2011-04-01 13:04:42
В css вообще ничего связанного с изображениями не нашел, в js есть что-то, но я в этом ни бум бум :(
kroha
2011-04-02 17:01:11
Попробуйте открыть файл jqueryslidemenu.js В самом начале, там строчки такие есть:
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
Вот и пропишите полные пути к картинкам. Например, http://сайт.ru/down.gif и http://сайт.ru/right.gifАндрей
2011-04-05 14:32:34
Спасибо. Это уже пробовал. Проблема решилась проще :) Нужно было перед названием картинки в этом коде, всего лишь поставить "/" :)
Павел
2011-04-21 12:09:22
Скажите а как отцентрировать меню.
а то оно привязано к левому краю?
заранее спасибоПавел
2011-04-21 12:19:10
всё отвечать не нужно разобрался
заменил
добавил класс .menul{ margin-left:100px;}
соединение классов рулит:)
Soronorus
2011-04-21 14:19:12
странность в другом если с другой страницы вызвать эти скрипты на этом же сайте
то менюха перестаёт правильно работать появляется прозрачность и пункты не реагируют на клик мыши
Alex
2011-05-04 05:50:20
Не работает в IE6(
Пробовал выполнить инструкции из предыдущего меню (подключил vipad.js) и добавил стили для li.jshover. Но ничего...
Что можно сделать?
Сергей
2011-05-05 01:58:43
огромное вам спасибо за такое классное меню!!! Всё очень круто и что главное, всё работает!!! Респект Вам!!!
Admin
2011-05-05 08:32:01
Alex, чтобы меню заработало в IE6 попробуйте поменять кодировку в CSS файле. Так как комменты там на русском, а шестёрка этого не понимает.
juweller
2011-05-08 18:06:29
Я от таких вещей очень далек. Не пинайте сильно подскажите пожайлуста ;).... пытался делать все по инструкции получилось вот так http://wwwrrrwww.at.ua... 1)стрелок нет почему-то( в корень сайта загружал их)
2) Не пойму как в этом теперь новом меню присвоить страницы ....помогите плиз
Владимир
2012-01-29 13:31:32
Спасибо Админ за меню, но у меня возникла небольшая проблема. в мозилле загружается все отлично, а вот в опере загружаются не только стрелки но и слово "изображение" как в случае когда картинки не загружаются! получается такая двойственность. Подскажите если не сложно что делать? пробывал делать как kroha советовал...не получилось
Admin
2012-02-01 07:25:26
Владимир, Проверял в опере - работает отлично. Возможно, в дизайне меню Вы используете изображения, вот они и не загружаются, поэтому появляется такая надпись.
draff
2011-02-16 17:16:55
Большое спасибо,ну и пару плюсиков где нужно по геге.))
а то я замучился переделывать чужие шаблоны под себя.теперь буду делать как написано здесь.