Показать сообщение отдельно
  #1 (permalink)  
Старый 13.02.2017, 00:29
Новичок на форуме
Отправить личное сообщение для Dmitry91 Посмотреть профиль Найти все сообщения от Dmitry91
 
Регистрация: 13.02.2017
Сообщений: 4

Помогите добавить JS к меню
Недавно начал осваивать верстку сайтов, сделал двух уровневое горизонтальное меню. Теперь ломаю голову как сделать меню таким образом, что бы при клике нижняя вкладка состоящая из 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 блоком ...пока безуспешно.

Последний раз редактировалось Dmitry91, 13.02.2017 в 01:39.
Ответить с цитированием