Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2011, 21:55
Интересующийся
Отправить личное сообщение для voloxa89 Посмотреть профиль Найти все сообщения от voloxa89
 
Регистрация: 16.08.2011
Сообщений: 25

Как сделать выпадающее меню
есть код
<ul id="ul1">
	<li id="bx_2037796212_355"><a href="/catalog/product/bar_accessories/">Барные аксессуары&nbsp;(98)</a></li>
<ul id='ul2'>	<li id="bx_2037796212_356"><a href="/catalog/product/bar_decorations/">Барные украшения&nbsp;(39)</a></li>
	<li id="bx_2037796212_357"><a href="/catalog/product/toothpicks_skewers_chopsticks_for_sushi/">Зубочистки, шампуры, палочки для суши&nbsp;(17)</a></li>
	<li id="bx_2037796212_358"><a href="/catalog/product/candles/">Свечи&nbsp;(42)</a></li>

</ul>	<li id="bx_2037796212_297"><a href="/catalog/product/household_chemicals/">Бытовая химия&nbsp;(241)</a></li>
<ul id='ul2'>	<li id="bx_2037796212_312"><a href="/catalog/product/soap/">Мыло&nbsp;(19)</a></li>
	<li id="bx_2037796212_310"><a href="/catalog/product/rinser/">Ополаскиватели&nbsp;(8)</a></li>
	<li id="bx_2037796212_313"><a href="/catalog/product/refreshers/">Освежители&nbsp;(14)</a></li>
	<li id="bx_2037796212_311"><a href="/catalog/product/bleachers/">Отбеливатели&nbsp;(18)</a></li>

	<li id="bx_2037796212_314"><a href="/catalog/product/perfumes_and_cosmetics/">Парфюмерия и косметика&nbsp;(6)</a></li>
	<li id="bx_2037796212_316"><a href="/catalog/product/other_bithimiy/">Прочее&nbsp;(1)</a></li>
	<li id="bx_2037796212_306"><a href="/catalog/product/funds_for_furniture/">Средства для мебели&nbsp;(6)</a></li>
	<li id="bx_2037796212_303"><a href="/catalog/product/means_for_cleaning_floors_and_carpets/">Средства для мытья полов и ковров&nbsp;(14)</a></li>
	<li id="bx_2037796212_298"><a href="/catalog/product/dishwashing_detergent/">Средства для мытья посуды&nbsp;(18)</a></li>

	<li id="bx_2037796212_305"><a href="/catalog/product/dishwasher_detergent1/">Средства для посудомоечных машин&nbsp;(6)</a></li>
	<li id="bx_2037796212_300"><a href="/catalog/product/tools_for_plumbing_and_tile/">Средства для сантехники и керамической плитки&nbsp;(22)</a></li>
	<li id="bx_2037796212_304"><a href="/catalog/product/tools_for_microwave_ovens_stoves_kitchen_and_office_equipment/">Средства для СВЧ печей, плит, кухни и оргтехники&nbsp;(22)</a></li>
	<li id="bx_2037796212_302"><a href="/catalog/product/means_for_removing_blockages_in_pipes_and/">Средства для труб и удаления засоров&nbsp;(8)</a></li>
	<li id="bx_2037796212_301"><a href="/catalog/product/tools_for_toilets/">Средства для туалетов&nbsp;(9)</a></li>

	<li id="bx_2037796212_308"><a href="/catalog/product/means_for_descaling/">Средства для удаления накипи&nbsp;(5)</a></li>
	<li id="bx_2037796212_315"><a href="/catalog/product/insect/">Средства от насекомых&nbsp;(2)</a></li>
	<li id="bx_2037796212_307"><a href="/catalog/product/wipers/">Стеклоочистители&nbsp;(16)</a></li>
	<li id="bx_2037796212_309"><a href="/catalog/product/washing_powders/">Стиральные порошки&nbsp;(41)</a></li>
	<li id="bx_2037796212_299"><a href="/catalog/product/universal_detergents/">Универсальные моющие средства&nbsp;(6)</a></li>

</ul>	<li id="bx_2037796212_399"><a href="/catalog/product/stationery/">Канцтовары&nbsp;(121)</a></li>
<ul id='ul2'>	<li id="bx_2037796212_401"><a href="/catalog/product/forms/">Бланки&nbsp;(21)</a></li>
	<li id="bx_2037796212_400"><a href="/catalog/product/paper/">Бумага&nbsp;(18)</a></li>

нужно чтобы <ul id="ul2"> был скрыт
а при наведении на какой ни будь <li> из <ul id="ul1"> раскрывался пункт меню <ul id="ul2"> относящийся к этому пункту.
делаю такой код раскрываются все пункты сразу
$("#ul2 li").hide();
	$("#ul1").hover(function(){
		$('#ul2 li').toggle('slow');});

Помогите решить вопрос. желательно с комментариями.
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2011, 10:54
Аспирант
Отправить личное сообщение для Black_Prince Посмотреть профиль Найти все сообщения от Black_Prince
 
Регистрация: 11.07.2011
Сообщений: 64

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');
Ответить с цитированием
  #3 (permalink)  
Старый 19.08.2011, 11:40
Интересующийся
Отправить личное сообщение для voloxa89 Посмотреть профиль Найти все сообщения от voloxa89
 
Регистрация: 16.08.2011
Сообщений: 25

Id у элементов должны быть УНИКАЛЬНЫМИ!!! - У меня списки выводятся в цикле и ни как id не прописать для каждого ula. Читал в нете что можно получить id элемента на который наводишь так
var Perem = this.id;
Это я получу идентификатор на который навел.
А как получить идентификатор списка который к нему относится(список который должен появится)?
Ответить с цитированием
  #4 (permalink)  
Старый 19.08.2011, 12:05
Аватар для SkyLight
Злюка-бобер
Отправить личное сообщение для SkyLight Посмотреть профиль Найти все сообщения от SkyLight
 
Регистрация: 21.03.2010
Сообщений: 438

Что именно вы не поняли из фразы про уникальные ID? Да и к тому же вам дали пример готового решения вашей проблемы...
__________________
In WEB We Trust
У всех есть своя темная сторона...
Ответить с цитированием
  #5 (permalink)  
Старый 19.08.2011, 12:53
Аспирант
Отправить личное сообщение для Black_Prince Посмотреть профиль Найти все сообщения от Black_Prince
 
Регистрация: 11.07.2011
Сообщений: 64

Ну скиньте цикл, в котором создаются UL. Хочу посмотреть как это, когда "ни как id не прописать" . Да, если это происходит через пых - то код создания списков тоже в студию.

>>А как получить идентификатор списка который к нему относится(список который должен появится)?

Если я правильно понял о чем идет речь - то: $(this).children("li").attr('id');
или $(this).children("ul").attr('id'); Смотря что вы считаете списком, который должен появиться.

З.Ы. с повторяющимися ID нет гарантии что код будет работать корректно.
Ответить с цитированием
  #6 (permalink)  
Старый 19.08.2011, 21:22
Интересующийся
Отправить личное сообщение для voloxa89 Посмотреть профиль Найти все сообщения от voloxa89
 
Регистрация: 16.08.2011
Сообщений: 25

Почти сделал вот код при наведении список показывается а как сделать чтобы список пропадал после увода мыши?
$("#ul1 li").hover(	function(){ 
	 								$(this).next().slideDown(100);
			 		},
    				function(){
	 					$("#ul2 li").blur();
			  						});

Пробовал и blur и remove не помогает
Ответить с цитированием
  #7 (permalink)  
Старый 20.08.2011, 00:03
Аспирант
Отправить личное сообщение для Black_Prince Посмотреть профиль Найти все сообщения от Black_Prince
 
Регистрация: 11.07.2011
Сообщений: 64

mouseout??? возможно.
Ответить с цитированием
  #8 (permalink)  
Старый 20.08.2011, 11:27
Интересующийся
Отправить личное сообщение для voloxa89 Посмотреть профиль Найти все сообщения от voloxa89
 
Регистрация: 16.08.2011
Сообщений: 25

mouseout??? возможно.
да возможно.
но я пробовал ничего не получается. как сделать чтобы после увода мыши все события становились на свои места
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меню, выпадающее и сворачивающееся не по hover а по клику adelante jQuery 1 14.01.2011 04:17
как сделать меню из кнопок списком ? arkady21 Общие вопросы Javascript 0 06.10.2010 11:40
меню как на mail.ru - его можно скрыть и содержимое раздвинется на всю страницу ange-linka Элементы интерфейса 4 16.09.2010 12:12
Выпадающее меню theo_ Общие вопросы Javascript 18 05.10.2009 11:34
Помогите сделать простое меню debugger Элементы интерфейса 1 09.09.2008 23:14