Показать сообщение отдельно
  #6 (permalink)  
Старый 18.09.2014, 21:29
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

Этих менюх как грязи в сети. Но, я как-то нарисовал такой вот вариант, никуда он не пошел, пока что, остался в черновиках, а смысл там такой, типа, чтобы в меню были и пункты по наводке и по щелчку. Типа прописал в дата- тег какой нужен пункт - скрипт такой и сделает.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
ul.nav_menu {
	background-color:brown;
	height: 25px;
	font-size: 12px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

	.nav_menu li {
		list-style: none;
		float: left;
		border-left:1px solid rgb(230,180,180);
		line-height: 25px;
		height:25px;
		font-weight: bold;
		display:block;
		padding: 0 10px;
		color:white;
	}
	
	.nav_menu li:hover  {
		background: rgb(200,200,200);
		color: black;
	}
	
	/*
	* hidden list
	*/
	.nav_menu  li ul {
		display: none;
		position: absolute;
		padding: 0;
		margin-left:-10px;
		background: rgb(230,230,230);
		color:black;
	}

	.nav_menu li ul li {
		float: none;
	}

	.nav_menu li ul li a {
		text-decoration: none;
		color: black;
	}
	
	.nav_menu li a {
		text-decoration: none;
		color: inherit;
	}

	.nav_menu li a:hover {
		color: inherit;
	}
</style>
</head>
<body>
<ul id="nav_menu" class="nav_menu">
	<li data-menu="orders">
		<a href="#">Parent 1</a>
		<ul data-event="click">
			<li><a href="#">Parent 1 &raquo; Child 1</a></li>
			<li><a href="#">Parent 1 &raquo; Child 1</a></li>
		</ul>
	</li>
	<li data-menu="profiles">
		<a href="#">Parent 2</a>
		<ul data-event="click">
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
		</ul>
	</li>
	<li data-menu="pubs">
		<a href="#">Parent 3</a>
		<ul data-event="mouseover, mouseout">
			<li><a href="#">Parent 3 &raquo; Child 3</a></li>
			<li><a href="#">Parent 3 &raquo; Child 3</a></li>
			<li><a href="#">Parent 3 &raquo; Child 3</a></li>
		</ul>
	</li>
</ul>
<script>
function TopMenu(){

	var items={};
	var last_index = null;
	
	var handle = {
	
		'click':function(){
			handle.off();
			if(this.dataset.menu==last_index)
				last_index = null;
			else
				handle.on(this);
		},
		
		'mouseover':function() {
			handle.off(this);
		},
		
		'mouseout':function() {
			handle.off(null);
		},
		
		'on':function(elem){
			last_index=elem.dataset.menu;
			items[last_index].style.display="block";
//			items[last_index].parentNode.classList.add('nav_menu_active');
		},
		
		'off':function(elem){
			if(last_index) {
				items[last_index].style.display="none";
//				items[last_index].parentNode.classList.remove('nav_menu_active');
			}
			if(elem)
				this.on(elem);
		}

	};


	
	try {
	
		var top_menu = document.getElementById('nav_menu').querySelectorAll('[data-menu]');
		for(var i=0; i<top_menu.length; i++) {
			var sub_menu = top_menu[i].querySelector('[data-event]');
			var events = sub_menu.dataset.event.split(',');
			for(var j=0; j<events.length; j++) {
				var e=events[j].trim();
				top_menu[i].addEventListener(e, handle[e], false);
			}
			items[top_menu[i].dataset.menu]=sub_menu;
		}

	}
	catch(e){
		console.log(e);
		return false;
	}


}

window.addEventListener('load', TopMenu, false);
</script>
</body>
</html>
Ответить с цитированием