Вы находитесь здесь:Плагины jQuery»liMenuHor - горизонтальное многоуровневое jQuery меню

liMenuHor - горизонтальное многоуровневое jQuery меню

Воскресенье, 26 Август 2012 18:58 Автор 

jQuery Плагин liMenuHor создает горизонтальное многоуровневое меню с неограниченной вложенностью. Структура меню - самая простейшая, а именно обыкновенный многоуровневый список с ссылками.
Важными достоинствами горизонтального многоуровневого меню liMenuHor являются: правильная реакция на края страницы родительского элемента, наличия маркеров вложения, бесконечная вложенность и симпатичный внешний вид.
В меню присутствует шаблонизация: "white","black" и "gray". Для использования готовых шаблонов в добавок к основному CSS подключите один из шаблонных CSS. Если вы желаете создать свой внешний вид, подключите один из шаблонных CSS и исправьте его на свое усмотрение.

Пример работы на JSFIDDLE

Подключаемые файлы

Надо заметить, что кроме основного CSS файла "liMenuHor.css", необходимо подключить также и файл шаблона "liMenuHorTheme-white.css", который в свою очередь оформит горизонтальное меню должным образом.





Инициализация плагина

У плагина нет никаких настроек, поэтому инициализация выглядит очень просто


Структура HTML

Структура HTML представлена обыкновенным семантическим списком

Прочитано 21210 раз Последнее изменение Среда, 03 Декабрь 2014 18:58
Оцените материал
(3 голосов)

Комментарии   

 
Amiga
# Amiga 24.01.2013 23:25
Не работает в IE9!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 25.01.2013 08:52
Цитирую Amiga:
Не работает в IE9!

Опишите, что именно работает неправильно, т.к. плагин прошел удачную проверку в браузерах IE7,IE8,IE9
Ответить | Ответить с цитатой | Цитировать
 
 
Amiga
# Amiga 25.01.2013 11:14
Да просто меню не выпадает, когда подводишь мышку к кнопкам. Ни в обычном режиме, ни в режиме совместимости...
IE 9.0.8112.16421, накопительное обновление KB 2761465 (последнее).
В Firefox и Opera все работает нормально!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 26.01.2013 01:00
Цитирую Amiga:
Да просто меню не выпадает, когда подводишь мышку к кнопкам. Ни в обычном режиме, ни в режиме совместимости...
IE 9.0.8112.16421, накопительное обновление KB 2761465 (последнее).
В Firefox и Opera все работает нормально!

Вот скрин в IE9
/files/screen/screen_liMenuHor_ie9.gif
Дайте свою ссылку на нерабочий пример
Ответить | Ответить с цитатой | Цитировать
 
 
Amiga
# Amiga 26.01.2013 11:18
Происходит вот что.Как только я включаю средства разработчика (отладочную панель), то меню сразу начинает работать во всех режимах (без перезагрузки страницы и если отладочную панель закрыть), и продолжает работать даже если обновляю страницу. Но если закрыть браузер и открыть страницу снова, то опять меню не выпадает!
Заметил, что у Вас выпуск обновления 9.0.4 (KB 2618444), а у меня самое последнее - 9.0.12 (KB 2761465). Может в этом дело? Попробуйте обновиться, может и у Вас это баг проявится... Первый раз с таким багом встречаюсь!
Кстати, вертикальное мменю работает великолепно!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 03.02.2013 15:04
Цитирую Amiga:
Происходит вот что.Как только я включаю средства разработчика (отладочную панель), то меню сразу начинает работать во всех режимах (без перезагрузки страницы и если отладочную панель закрыть), и продолжает работать даже если обновляю страницу. Но если закрыть браузер и открыть страницу снова, то опять меню не выпадает!
Заметил, что у Вас выпуск обновления 9.0.4 (KB 2618444), а у меня самое последнее - 9.0.12 (KB 2761465). Может в этом дело? Попробуйте обновиться, может и у Вас это баг проявится... Первый раз с таким багом встречаюсь!
Кстати, вертикальное мменю работает великолепно!

Все оказалось банально и просто. В коде плагина я забыл убрать строку для дебага "console.log... ". IE9 на таких вещах спотыкается. Исправил демо и архив. Исправьте у себя пожалуйста
Ответить | Ответить с цитатой | Цитировать
 
 
Amiga
# Amiga 04.02.2013 21:43
Спасибо! Перекачал архив. Теперь все прекрасно работает!
Ответить | Ответить с цитатой | Цитировать
 
 
Арина
# Арина 11.03.2013 02:04
Спасибо Автору за такую чудесную штуку. очень нужна была.
но у меня такой баг:
если подключать jquery-1.8.min. js - все работает нормально. но у меня на сайте подгружается полноценная библиотека jquery, соответственно урезанную я уже не прописываю. и курсор убегает раньше времени. Нельзя выбрать подменю. Меню появляется, если курсор находится точно на родителе.
если отключить полную библиотеку и подключить из архива - все. ок. но для меня это не вариант=) что делать?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 11.03.2013 08:17
Цитирую Арина:
Спасибо Автору за такую чудесную штуку. очень нужна была.
но у меня такой баг:
если подключать jquery-1.8.min. js - все работает нормально. но у меня на сайте подгружается полноценная библиотека jquery, соответственно урезанную я уже не прописываю. и курсор убегает раньше времени. Нельзя выбрать подменю. Меню появляется, если курсор находится точно на родителе.
если отключить полную библиотеку и подключить из архива - все. ок. но для меня это не вариант=) что делать?

1. Во-первых jquery-1.8.min. js - это не урезанная версия, а минифицированна я (без пробелов и переносов строк)
2. Во-вторых напишите, какая версия jquery подключается у вас, в каком браузере проявляется баг, и по возможности киньте ссылку на страницу с неработающим меню
Ответить | Ответить с цитатой | Цитировать
 
 
Арина
# Арина 11.03.2013 15:18
1. не знала, спасибо=)
2. В Хроме, Опере и Файрфоксе "убегает", а в ИЭ не показывается вообще. Не скажу какая версия jquery, но может сами посмотрите :) http://b23.ru/h6zc

я думаю, что родитель рано теряет "active", но вот почему...
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 11.03.2013 19:43
Цитирую Арина:
1. не знала, спасибо=)
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;
}

Так у вас визуально ничего не изменится, а работать при этом будет правильно
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 11.03.2013 19:51
Цитирую Арина:
а в ИЭ не показывается вообще.

Это 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; }
Сегодня обновлю архив, чтобы таких проблем больше не возникало
Ответить | Ответить с цитатой | Цитировать
 
 
Арина
# Арина 12.03.2013 20:59
Цитирую LiMasscode:

Правильный порядок:
.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; }
Сегодня обновлю архив, чтобы таких проблем больше не возникало


Спасибо за решение моей проблемы, очень оперативно! и еще раз спасибо за продукт
Ответить | Ответить с цитатой | Цитировать
 
 
That
# That 03.08.2013 10:28
Меню хорошее. Основной css файл тоже все-таки придется править если захочется под свои нужды переделывать. сам css код сложен, дублируются стили в двух файлах перебивают друг друга и вообще запутаться легко но разобраться конечно можно. было бы неплохо добавить в горизонтальное менюhor задержку с выпадением блоков (регулировку задержки выпадения) как сделано в аналогичном вертикальном меню. использую два этих меню на своем проекте, спасибо масскоду!
Ответить | Ответить с цитатой | Цитировать
 
 
That
# That 29.08.2013 09:19
Как сделать задержку выпадания подменю? На таких меню нужна задержка выпадания окна - немного в сторону курсор и меню улетело, нужна задержка
Ответить | Ответить с цитатой | Цитировать
 
 
Operafan
# Operafan 17.02.2014 09:44
Здравствуйте!
Плагин отличный, то что надо )
Но у меня проблема с позиционировани ем выпадающих менюшек, и я не могу понять, в чем причина... Не могли бы Вы помочь?
Вот сайт: http://goo.gl/n2fYG2
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 17.02.2014 14:19
Цитирую Operafan:
Здравствуйте!
Плагин отличный, то что надо )
Но у меня проблема с позиционированием выпадающих менюшек, и я не могу понять, в чем причина... Не могли бы Вы помочь?
Вот сайт: http://goo.gl/n2fYG2
Спасибо!

добавьте в CSS:
.menu_hor {position: relative;}
Ответить | Ответить с цитатой | Цитировать
 
 
Operafan
# Operafan 17.02.2014 20:46
Цитирую LiMasscode:

добавьте в CSS:
.menu_hor {position: relative;}

Спасибо большое! :)
Ответить | Ответить с цитатой | Цитировать
 
 
Евгений
# Евгений 11.10.2014 02:29
Не работает на jQuery 1.10. Подскажите. Что сделать можно?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 14.10.2014 18:00
Цитирую Евгений:
Не работает на jQuery 1.10. Подскажите. Что сделать можно?

Работает! http://jsfiddle.net/Rd4Af/128/
Вы где-то ошиблись при подключении.
Кидайте ссылку - разберемся.
Ответить | Ответить с цитатой | Цитировать
 
 
Николай
# Николай 02.12.2014 10:04
Пользуюсь вашим плагином, но есть одно "но" - если у сайта адаптивный дизайн и меню образует две и более строчки, то св-во top у элемента ul в выпадающем меню остается одно и тоже.
Выглядит некорректно - наводишь на нижний пункт, а менюшка выскакивает сверху.

Буду признателен, если доработаете этот нюанс.
Ответить | Ответить с цитатой | Цитировать
 
 
Вячеслав
# Вячеслав 17.06.2018 16:01
Как вы задолюали со своим адаптивным "дизайном". Вы сами хоть видите насколько уродский сайт выглядит с вашим адаптивным дизайном. Это болезнь, которая не лечится. Кто вам навязал это уродство? битриксы?))))
Ответить | Ответить с цитатой | Цитировать
 
 
Николай
# Николай 02.12.2014 10:17
Плагин тупит, даже в Вашем примере это видно. Когда самые верхние пункты не помещаются в одну строчку, то при наведение на пункты, которые были перенесены на следующую строку их подменю неправильно позиционируется относительно родителя. Как исправить эту проблему?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 03.12.2014 18:59
Цитирую Николай:
Плагин тупит, даже в Вашем примере это видно. Когда самые верхние пункты не помещаются в одну строчку, то при наведение на пункты, которые были перенесены на следующую строку их подменю неправильно позиционируется относительно родителя. Как исправить эту проблему?

Добавлено в плагин. Скачайте заново архив
Ответить | Ответить с цитатой | Цитировать
 
 
Николай
# Николай 04.12.2014 03:05
LiMasscode, спасибо большое, работает отлично!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 04.12.2014 09:22
Цитирую Николай:
LiMasscode, спасибо большое, работает отлично!

Пожалуйста.
Для адаптивных сайтов рекомендую использовать адаптивное меню /index.php/k2/item/41-limenuresphard
Ответить | Ответить с цитатой | Цитировать
 
 
Николай
# Николай 04.12.2014 11:00
LiMasscode, спасибо большое, работает отлично!
Ответить | Ответить с цитатой | Цитировать
 
 
Вячеслав
# Вячеслав 19.09.2018 18:23
Привет!
Не могу понять, как сделать плавное исчезновения меню и так же плавное появление. Куда нужно вставить код?
Прошу, подскажите, пожалуйста.
Ответить | Ответить с цитатой | Цитировать
 
 
Вячеслав
# Вячеслав 19.09.2018 19:05
Разобрался.
Ответить | Ответить с цитатой | Цитировать
 
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryliMenuHor - горизонтальное многоуровневое jQuery меню