jQuery Плагин liMenuHor создает горизонтальное многоуровневое меню с неограниченной вложенностью. Структура меню - самая простейшая, а именно обыкновенный многоуровневый список с ссылками.
Важными достоинствами горизонтального многоуровневого меню liMenuHor являются: правильная реакция на края страницы родительского элемента, наличия маркеров вложения, бесконечная вложенность и симпатичный внешний вид.
В меню присутствует шаблонизация: "white","black" и "gray". Для использования готовых шаблонов в добавок к основному CSS подключите один из шаблонных CSS.
Если вы желаете создать свой внешний вид, подключите один из шаблонных CSS и исправьте его на свое усмотрение.
Пример работы на JSFIDDLE
Подключаемые файлы
Надо заметить, что кроме основного CSS файла "liMenuHor.css", необходимо подключить также и файл шаблона "liMenuHorTheme-white.css", который в свою очередь оформит горизонтальное меню должным образом.
Инициализация плагина
У плагина нет никаких настроек, поэтому инициализация выглядит очень просто
Структура HTML
Структура HTML представлена обыкновенным семантическим списком
Комментарии
Опишите, что именно работает неправильно, т.к. плагин прошел удачную проверку в браузерах IE7,IE8,IE9
IE 9.0.8112.16421, накопительное обновление KB 2761465 (последнее).
В Firefox и Opera все работает нормально!
Вот скрин в IE9
/files/screen/screen_liMenuHor_ie9.gif
Дайте свою ссылку на нерабочий пример
Заметил, что у Вас выпуск обновления 9.0.4 (KB 2618444), а у меня самое последнее - 9.0.12 (KB 2761465). Может в этом дело? Попробуйте обновиться, может и у Вас это баг проявится... Первый раз с таким багом встречаюсь!
Кстати, вертикальное мменю работает великолепно!
Все оказалось банально и просто. В коде плагина я забыл убрать строку для дебага "console.log... ". IE9 на таких вещах спотыкается. Исправил демо и архив. Исправьте у себя пожалуйста
но у меня такой баг:
если подключать jquery-1.8.min. js - все работает нормально. но у меня на сайте подгружается полноценная библиотека jquery, соответственно урезанную я уже не прописываю. и курсор убегает раньше времени. Нельзя выбрать подменю. Меню появляется, если курсор находится точно на родителе.
если отключить полную библиотеку и подключить из архива - все. ок. но для меня это не вариант=) что делать?
1. Во-первых jquery-1.8.min. js - это не урезанная версия, а минифицированна я (без пробелов и переносов строк)
2. Во-вторых напишите, какая версия jquery подключается у вас, в каком браузере проявляется баг, и по возможности киньте ссылку на страницу с неработающим меню
2. В Хроме, Опере и Файрфоксе "убегает", а в ИЭ не показывается вообще. Не скажу какая версия jquery, но может сами посмотрите :) http://b23.ru/h6zc
я думаю, что родитель рано теряет "active", но вот почему...
У вас между блоком ссылки и блоком выпадающих подпунктов зазор из-за
.menu_hor ul {
margin-top: 15px;
} (строка 45)
Поэтому происходит событие "mouseleave"
Перепишите свой CSS таким образом:
.menu_hor ul {
margin-top: 0;
}
.menu_hor a {
padding: 10px 10px 25px;
}
.menu_hor li {
background: url("../images/ menu_dropdown_l evel1.png") no-repeat scroll 100% -7px transparent;
}
Так у вас визуально ничего не изменится, а работать при этом будет правильно
Это FORMAT CSS поменял местами свойства в строке 9 файла liMenuHor.css
Правильный порядок:
.menu_hor li { display: inline-block; //display: inline; //zoom: 1; list-style: none; margin: 0; padding: 0; text-align: left; vertical-align: top; word-spacing: normal; }
Сегодня обновлю архив, чтобы таких проблем больше не возникало
Спасибо за решение моей проблемы, очень оперативно! и еще раз спасибо за продукт
Плагин отличный, то что надо )
Но у меня проблема с позиционировани ем выпадающих менюшек, и я не могу понять, в чем причина... Не могли бы Вы помочь?
Вот сайт: http://goo.gl/n2fYG2
Спасибо!
добавьте в CSS:
.menu_hor {position: relative;}
Спасибо большое! :)
Работает! http://jsfiddle.net/Rd4Af/128/
Вы где-то ошиблись при подключении.
Кидайте ссылку - разберемся.
Выглядит некорректно - наводишь на нижний пункт, а менюшка выскакивает сверху.
Буду признателен, если доработаете этот нюанс.
Добавлено в плагин. Скачайте заново архив
Пожалуйста.
Для адаптивных сайтов рекомендую использовать адаптивное меню /index.php/k2/item/41-limenuresphard
Не могу понять, как сделать плавное исчезновения меню и так же плавное появление. Куда нужно вставить код?
Прошу, подскажите, пожалуйста.
RSS лента комментариев этой записи