Добрый вечер! Уважаемые форумчане, очень прошу вас помочь мне с одной легкой задачей(для саморазвития) с которой я бьюсь уже неделю. Цель моя такая: Сделать горизонтальное выпадающее меню. Мне казалось, что это будет очень легко, но нет... Одним вариантом(Вариант №1,код приложу ниже) я смог решить, поставленную задачу, но мне кажется, что это скорее не решение, а такой дряхлый "костыль".А вот вторым вариантом(Вариант №2 никак). Очень прошу тапками не кидаться, js только начал учить.
И перед тем, как приложить код из моих решений я хотел бы описать свою проблему в Варианте №2.Проблема: Я добился того, чтобы при наведении мыши на пункт меню у него выпадало подменю, но к сожалению при попытке навести мышкой на подменю оно сразу исчезает.То есть наводим мышкой на Пункт в меню - срабатывают события onmouseover, как только за его пределы уводим - onmouseout. И беда как раз в том, что подменю из-за этого сразу схлопывается, то есть мы даже не успеваем навестись на пункт подменю. Я пытался эту проблемы решить разными вариантам, но не смог...
P.s. видел в интернете много выпадающих меню похожих на Вариант №1. Мне кажется, что это жутко костыльный вариант или все же норм?
Код в студию:
Вариант №1(он же костыльный и он же рабочий)
Вариант 2(не работает):
И перед тем, как приложить код из моих решений я хотел бы описать свою проблему в Варианте №2.Проблема: Я добился того, чтобы при наведении мыши на пункт меню у него выпадало подменю, но к сожалению при попытке навести мышкой на подменю оно сразу исчезает.То есть наводим мышкой на Пункт в меню - срабатывают события onmouseover, как только за его пределы уводим - onmouseout. И беда как раз в том, что подменю из-за этого сразу схлопывается, то есть мы даже не успеваем навестись на пункт подменю. Я пытался эту проблемы решить разными вариантам, но не смог...
P.s. видел в интернете много выпадающих меню похожих на Вариант №1. Мне кажется, что это жутко костыльный вариант или все же норм?
Код в студию:
Вариант №1(он же костыльный и он же рабочий)
Код:
<html>
<!DOCTYPE HTML>
<head>
<title>Droprdown</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<ul class = "navbar">
<li class = "drop1">
<a href="#">Пункт 1</a>
<ul class = "dropdown1">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li class = "drop2">
<a href="#">Пункт 2</a>
<ul class = "dropdown2">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li>
<a href="#">Пункт 3</a>
</li>
<li class = "drop3">
<a href="#">Пункт 4</a>
<ul class = "dropdown3">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li class = "drop4">
<a href="#">Пункт 5</a>
<ul class = "dropdown4">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li class = "drop5">
<a href="#">Пункт 6</a>
<ul class = "dropdown5">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
</ul>
<script src="js/common.js"></script>
</body>
</html>Код:
function SetEvents(dropN,dropdownN){
var tooggle = document.getElementsByClassName(dropN),
dropdown_menu = document.getElementsByClassName(dropdownN);
tooggle[0].onmouseover = function(){
dropdown_menu[0].style.display="block";
};
tooggle[0].onmouseout = function(){
dropdown_menu[0].style.display="none";
};
}
for(var i = 1; i < 6; i++)
SetEvents("drop" + i, "dropdown" + i);Код:
<!DOCTYPE HTML>
<html>
<head>
<title>Droprdown</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<ul class = "navbar">
<li class = "drop">
<a href="#">Пункт 1</a>
<ul class = "dropdown">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li class = "drop">
<a href="#">Пункт 2</a>
<ul class = "dropdown">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li>
<a href="#">Пункт 3</a>
</li>
<li class = "drop">
<a href="#">Пункт 4</a>
<ul class = "dropdown">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li class = "drop">
<a href="#">Пункт 5</a>
<ul class = "dropdown">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li class = "drop">
<a href="#">Пункт 6</a>
<ul class = "dropdown">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
</ul>
<script src="js/common.js"></script>
</body>
</html>Код:
var drop_Li = document.getElementsByClassName("drop");
function AddEvent(elem,e,handler){
if(elem.addEventListener)
elem.addEventListener(e,handler,false);
else if(elem.attachEvent)
elem.attachEvent('on'+ e, handler);
else
elem['on' + e] = handler;
}
/*
function Tooggle(elem){
if(elem.style.display == "")
else
{
elem.style.display = "";
}
}*/
function OnMouseOver(e){
e = e || event;
var target = e.target,
parent = target.parentNode,
dropdown = parent.childNodes;
dropdown[3].style.display = "block";
}
function OnMouseOut(e){
e = e || event;
var target = e.target,
parent = target.parentNode,
dropdown = parent.childNodes;;
dropdown[3].style.display = "";
}
for(var i = 0; i < drop_Li.length; i++)
{
AddEvent(drop_Li[i],"mouseover",OnMouseOver);
AddEvent(drop_Li[i],"mouseout",OnMouseOut);
}