Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Реализация всплывающего меню (https://javascript.ru/forum/events/67506-realizaciya-vsplyvayushhego-menyu.html)

Digo 21.02.2017 15:43

Реализация всплывающего меню
 
Доброго времени суток, имеется меню древовидное, структура там такая что во всех пунктах неактивны стоит display:none, в активных если есть display:none отсутствует(это отрабатывается системой управления при переходе) есть задумка сделать чтобы при наведении на родительскую категорию отображались дочерние подкатегории (как бы раскрытие дерева при наведении) или банальное всплывающее меню сбоку. Есть какие идеи как это реализовать более грамотно желательно без серьезных изменений в структуре меню, т.е. подстроить под структуру, сперва думал сделать чистое css меню но все портит display:none не получилось по hover его включать, я так понимаю с ним только через скрипт работать нужно...

<ul>
	<li>
	<div class="link_container">
		<a href="#">Главная категория</a>
	</div>
	</li>
<ul id="c1">
	<li>
	<div class="link_container">
		<a href="#">Подкатегория 1</a>
	</div>
	</li>
	
	<ul id="c2">
		<li>
			<div class="link_container"><a href="#">Подкатегория 1.1</a></div>
		</li>
		<ul style="display:none" id="c3">
			<li>
				<div class="link_container"><a href="#">Подкатегория 1.1.1</a></div>
			</li>
	
			<li>
				<div class="link_container"><a href="#">Подкатегория 1.1.2</a></div>
			</li>
		</ul>

		<li>
			<div class="link_container"><a href="#">Подкатегория 1.2</a></div>
		</li>
	</ul>
	
	<li>
		<div class="link_container">
		<a href="#">Подкатегория 2</a>
		</div>
	</li>
	<ul style="display:none" id="c7">
		<li>
			<div class="link_container"><a href="#">Подкатегория 2.1</a></div>
		</li>
		<li>
			<div class="link_container"><a href="#">Подкатегория 2.2</a></div>
		</li>
	</ul>	

</ul>
</ul>

ksa 21.02.2017 16:21

Цитата:

Сообщение от Digo
все портит display:none не получилось по hover его включать, я так понимаю с ним только через скрипт работать нужно...

Это смотря где указано это свойство... Т.е. все дело в приоритетах ЦСС. ;)

Digo 21.02.2017 16:47

указывается прям в коде системы управления при генерации меню <ul style="display:none" id="c7">

ksa 22.02.2017 10:25

Цитата:

Сообщение от Digo
<ul style="display:none" id="c7">

Такое можно "перебить" только скриптом... Или перестать использовать такую порочную практику.

Digo 22.02.2017 16:33

да я понял, вообщем очистил код от шелухи сделал через скрипт, одно не могу понять как закрывать при перемещении по Подкатегориям 1.1, 1.2 и т.д. остальные открытые, наводить повторно для скрытия не нравится, а так получается при перемещении по меню оно все раскрывается...

<script type="text/javascript"> 

function iblock(cellid, blockid){
	var a = document.getElementById(cellid);
	if (a.style.display=="none") a.style.display="block";
		/*else a.style.display="none";*/
		
	var b = document.getElementById(blockid); /*для себя)*/
	
}

</script>

<ul class="nav">
	<li><a href="#">Главная категория</a></li>
	<ul  id="c1">
		<li><a onmouseover="iblock('c2','b2');" href="#">Подкатегория 1</a></li>
	
		<ul id="c2">
			<li><a onmouseover="iblock('c3','b3');" href="#">Подкатегория 1.1</a></li>
			<ul style="display:none" id="c3">
				<li><a href="#">Подкатегория 1.1.1</a></li>
				<li><a href="#">Подкатегория 1.1.2</a></li>
			</ul>
			<li><a href="#">Подкатегория 1.2</a></li>
		</ul>
		
		<li><a onmouseover="iblock('c4','b4');" href="#">Подкатегория 2</a></li>
		<ul style="display:none" id="c4">
			<li><a href="#">Подкатегория 2.1</a></li>
			<li><a href="#">Подкатегория 2.2</a></li>
		</ul>	
		
		<li><a onmouseover="iblock('c5','b5');" href="#">Подкатегория 2</a></li>
		<ul style="display:none" id="c5">
			<li><a href="#">Подкатегория 2.1</a></li>
			<li><a href="#">Подкатегория 2.2</a></li>
		</ul>	

	</ul>
</ul>

ksa 27.02.2017 09:10

Цитата:

Сообщение от Digo
одно не могу понять как закрывать при перемещении по Подкатегориям 1.1, 1.2 и т.д.

Есть масса реализаций деревьев на чистом ЦСС - возьми их, если со скриптами не умеешь. ;)


Часовой пояс GMT +3, время: 02:42.