Как сделать выпадающее меню
есть код
<ul id="ul1"> <li id="bx_2037796212_355"><a href="/catalog/product/bar_accessories/">Барные аксессуары (98)</a></li> <ul id='ul2'> <li id="bx_2037796212_356"><a href="/catalog/product/bar_decorations/">Барные украшения (39)</a></li> <li id="bx_2037796212_357"><a href="/catalog/product/toothpicks_skewers_chopsticks_for_sushi/">Зубочистки, шампуры, палочки для суши (17)</a></li> <li id="bx_2037796212_358"><a href="/catalog/product/candles/">Свечи (42)</a></li> </ul> <li id="bx_2037796212_297"><a href="/catalog/product/household_chemicals/">Бытовая химия (241)</a></li> <ul id='ul2'> <li id="bx_2037796212_312"><a href="/catalog/product/soap/">Мыло (19)</a></li> <li id="bx_2037796212_310"><a href="/catalog/product/rinser/">Ополаскиватели (8)</a></li> <li id="bx_2037796212_313"><a href="/catalog/product/refreshers/">Освежители (14)</a></li> <li id="bx_2037796212_311"><a href="/catalog/product/bleachers/">Отбеливатели (18)</a></li> <li id="bx_2037796212_314"><a href="/catalog/product/perfumes_and_cosmetics/">Парфюмерия и косметика (6)</a></li> <li id="bx_2037796212_316"><a href="/catalog/product/other_bithimiy/">Прочее (1)</a></li> <li id="bx_2037796212_306"><a href="/catalog/product/funds_for_furniture/">Средства для мебели (6)</a></li> <li id="bx_2037796212_303"><a href="/catalog/product/means_for_cleaning_floors_and_carpets/">Средства для мытья полов и ковров (14)</a></li> <li id="bx_2037796212_298"><a href="/catalog/product/dishwashing_detergent/">Средства для мытья посуды (18)</a></li> <li id="bx_2037796212_305"><a href="/catalog/product/dishwasher_detergent1/">Средства для посудомоечных машин (6)</a></li> <li id="bx_2037796212_300"><a href="/catalog/product/tools_for_plumbing_and_tile/">Средства для сантехники и керамической плитки (22)</a></li> <li id="bx_2037796212_304"><a href="/catalog/product/tools_for_microwave_ovens_stoves_kitchen_and_office_equipment/">Средства для СВЧ печей, плит, кухни и оргтехники (22)</a></li> <li id="bx_2037796212_302"><a href="/catalog/product/means_for_removing_blockages_in_pipes_and/">Средства для труб и удаления засоров (8)</a></li> <li id="bx_2037796212_301"><a href="/catalog/product/tools_for_toilets/">Средства для туалетов (9)</a></li> <li id="bx_2037796212_308"><a href="/catalog/product/means_for_descaling/">Средства для удаления накипи (5)</a></li> <li id="bx_2037796212_315"><a href="/catalog/product/insect/">Средства от насекомых (2)</a></li> <li id="bx_2037796212_307"><a href="/catalog/product/wipers/">Стеклоочистители (16)</a></li> <li id="bx_2037796212_309"><a href="/catalog/product/washing_powders/">Стиральные порошки (41)</a></li> <li id="bx_2037796212_299"><a href="/catalog/product/universal_detergents/">Универсальные моющие средства (6)</a></li> </ul> <li id="bx_2037796212_399"><a href="/catalog/product/stationery/">Канцтовары (121)</a></li> <ul id='ul2'> <li id="bx_2037796212_401"><a href="/catalog/product/forms/">Бланки (21)</a></li> <li id="bx_2037796212_400"><a href="/catalog/product/paper/">Бумага (18)</a></li> нужно чтобы <ul id="ul2"> был скрыт а при наведении на какой ни будь <li> из <ul id="ul1"> раскрывался пункт меню <ul id="ul2"> относящийся к этому пункту. делаю такой код раскрываются все пункты сразу $("#ul2 li").hide(); $("#ul1").hover(function(){ $('#ul2 li').toggle('slow');}); Помогите решить вопрос. желательно с комментариями. |
1. Id у элементов должны быть УНИКАЛЬНЫМИ!!! (id='ul2' у кучи ул-ек это не правильно)
2. для jquery есть уже очень много плагинов для выпадающих меню (гугль поиск в помощь). Я например пользуюсь superfish. Выглядит это примерно так: <ul class="nav"> <li><a href='#' class="a_header"><?php echo $language;?></a> <ul> <li><a href="./index.php?route=common/home&language=en">English</a></li> <li><a href="./index.php?route=common/home&language=ru">Русский</a></li> <li><a href="./index.php?route=common/home&language=ua">Україньска</a></li> </ul> </li> </ul> $('.nav').superfish({ hoverClass : 'sfHover', pathClass : 'overideThisToUse', delay : 0, animation : {height: 'show'}, speed : 'normal', autoArrows : false, dropShadows : false, disableHI : false, /* set to true to disable hoverIntent detection */ onInit : function(){}, onBeforeShow : function(){}, onShow : function(){}, onHide : function(){} }); $('.nav').css('display', 'block'); |
Id у элементов должны быть УНИКАЛЬНЫМИ!!! - У меня списки выводятся в цикле и ни как id не прописать для каждого ula. Читал в нете что можно получить id элемента на который наводишь так
var Perem = this.id; Это я получу идентификатор на который навел. А как получить идентификатор списка который к нему относится(список который должен появится)? |
Что именно вы не поняли из фразы про уникальные ID? Да и к тому же вам дали пример готового решения вашей проблемы...
|
Ну скиньте цикл, в котором создаются UL. Хочу посмотреть как это, когда "ни как id не прописать" :) . Да, если это происходит через пых - то код создания списков тоже в студию.
>>А как получить идентификатор списка который к нему относится(список который должен появится)? Если я правильно понял о чем идет речь - то: $(this).children("li").attr('id'); или $(this).children("ul").attr('id'); Смотря что вы считаете списком, который должен появиться. З.Ы. с повторяющимися ID нет гарантии что код будет работать корректно. |
Почти сделал вот код при наведении список показывается а как сделать чтобы список пропадал после увода мыши?
$("#ul1 li").hover( function(){ $(this).next().slideDown(100); }, function(){ $("#ul2 li").blur(); }); Пробовал и blur и remove не помогает |
mouseout??? возможно.
|
mouseout??? возможно.
да возможно. но я пробовал ничего не получается. как сделать чтобы после увода мыши все события становились на свои места |
Часовой пояс GMT +3, время: 01:46. |