Недавно начал осваивать верстку сайтов, сделал двух уровневое горизонтальное меню. Теперь ломаю голову как сделать меню таким образом, что бы при клике нижняя вкладка состоящая из 4 подпунктов выпадала и фиксировалась, но после того , как кликнуть на соседнюю вкладку (пункт 2 , 3 , 4), подпункты под пунктом 1 сворачивались . На данный момент подпункты меню накладываются друг на друга и не сворачиваются, тем самым меню превращается в полный хаос. Скопируйте код в песочницу и ткните сначала на пункт 1 , затем на пункт 4 , затем опять на пункт 1. Получиться каша из подпунктов.
Прошу помочь прописать скрипты таким образом, что бы функция прописанная для пункта 1 , отменялась после того как кликаем на соседние пункты (2 3 4) (те подменю сворачивалось), но не отменялась если кликнуть на пустое место экрана монитора или подпункты меню (те подменю не сворачивалось в этом случае).
Вот структура меню:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#nav {
width:520px;
position: relative;
left: 310px;
padding: 0;
z-index: 4;
top: -1px;
}
/* сброс отступов */
*{
margin: 0;
padding: 0;
}
/* убираем маркеры */
#nav{
height: 85px;
}
#nav ul{
list-style: none;
}
/* делаем меню горизонтальным */
#nav > ul > li {
float: left;
width: 130px;
position: relative;
}
/* сделали второе выпадающее меню горизонтальным */
#nav li li {
float: left;
width: 130px;
position: relative;
}
#nav ul ul {
float: left;
width: 520px;
position: relative;
}
/* второй блог */
#nav li .one{
display: none;
position: relative;
left: -130px;
top: 100%;
}
/* реализуем выпадение */
#nav :focus ~ .one,
#nav :active ~ .one,
#nav li:active .one{
display: block;
}
/* третий блог */
#nav li .for{
display: none;
position: relative;
left: -260px;
top: 100%;
}
/* реализуем выпадение */
#nav :focus ~ .for,
#nav :active ~ .for,
#nav li:active .for{
display: block;
}
/* четвертый блог */
#nav li .five{
display: none;
position: relative;
left: -390px;
top: 100%;
}
/* реализуем выпадение */
#nav.open1 ul.five {
display: block;
}
/* внешний вид меню */
#nav li a{
display: block;
background: #554a58;
border: 1px solid #554a58;
color: #ffffff;
padding: 8px;
text-align: center;
text-decoration: none;
}
#nav li a:hover{
background: #806f83;
display: block;
}
/* прячем вложенные пункты */
#nav li .second{
display: none;
position: inherit;
top: 100%;
}
/* реализуем выпадение c удержанием*/
#nav.open ul.second {
display: block;
}
</style>
</head>
<body>
<div id = "nav">
<ul>
<li><a href = "#" onclick="fon (this)">ПУНКТ1</a>
<ul class = "second" >
<li><a href = "#" >ПОДПУНКТ1</a></li>
<li><a href = "#" >ПОДПУНКТ2</a></li>
<li><a href = "#" >ПОДПУНКТ3</a></li>
<li><a href = "#" >ПОДПУНКТ4</a></li>
</ul>
</li>
<li><a href = "#" onclick="fon2 (this)">ПУНКТ2</a>
<ul class = "one">
<li><a href = "#">ПОДПУНКТ5</a></li>
<li><a href = "#">ПОДПУНКТ6</a></li>
<li><a href = "#">ПОДПУНКТ7</a></li>
<li><a href = "#">ПОДПУНКТ8</a></li>
</ul>
</li>
<li><a href = "#" onclick="fon3 (this)">ПУНКТ3</a>
<ul class = "for" >
<li><a href = "#">ПОДПУНКТ9</a></li>
<li><a href = "#">ПОДПУНКТ10</a></li>
<li><a href = "#">ПОДПУНКТ11</a></li>
<li><a href = "#">ПОДПУНКТ12</a></li>
</ul>
</li>
<li><a href = "#" onclick="fon1 (this)">ПУНКТ4</a>
<ul class = "five">
<li><a href = "#">ПОДПУНКТ13</a></li>
<li><a href = "#">ПОДПУНКТ14</a></li>
<li><a href = "#">ПОДПУНКТ15</a></li>
<li><a href = "#">ПОДПУНКТ16</a></li>
</ul>
</li>
</ul>
</div>
<script>
function fon(x) {
var menuElem = document.getElementById('nav');
var titleElem = menuElem.querySelector('.second');
menuElem.classList.toggle('open');
if (self.OBJ) OBJ.style.background = '';
x.style.background = '#806f83'; OBJ = x;
};
function fon1(y) {
var menuElem1 = document.getElementById('nav');
var titleElem1 = menuElem1.querySelector('.five');
menuElem1.classList.toggle('open1');
if (self.OBJ) OBJ.style.background = '';
y.style.background = '#806f83'; OBJ = y;
};
</script>
</body>
Пояснение:
onclick="fon (this)" - встроен в структуру html что бы работали выше указанные скрипты JS, но как и указал - работает он криво, пункты подменю накладываются друг на друга. Скрипты прописаны для 1 и 4 блока (пункт 1 и пункт 4), для 2 и 3 я пробовал реализовать выпадение с фиксацией через CSS, но понял , что без скриптов не справиться, на данный момент я не редактировал CSS для этих пунктов (пункт 2 и пункт 3), пытаюсь разобраться для начала с 1 и 4 блоком ...пока безуспешно.
