Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2017, 01:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2017, 01:21
Новичок на форуме
Отправить личное сообщение для Dmitry91 Посмотреть профиль Найти все сообщения от Dmitry91
 
Регистрация: 13.02.2017
Сообщений: 4

готово
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2017, 01:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Dmitry91,
[HTML]тут весь код[/HTML]
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2017, 01:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

отредактировал , теперь запускается с форума
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2017, 02:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Dmitry91,
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">

<style type="text/css">



#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;
font-size: 18px;
}
#nav ul ul {
float: left;
width: 520px;
}

/* внешний вид меню */
#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,#nav li a.open{
background: #806f83;
display: block;
}


#nav a + ul{
display: none;
}
#nav > ul{
  position: relative;
}

#nav a.open + ul{
display:  block;
position: absolute;

}
#nav li:nth-child(2) > ul{
left:-100%;
}
#nav li:nth-child(3) > ul{
left:-200%;
}
#nav li:nth-child(4) > ul{
left:-300%;
}
</style>
<script>
 window.addEventListener("DOMContentLoaded", function() {
    document.querySelector("#nav").addEventListener("click", function(c) {
        var d, a = document.querySelector(".open"),
            b = c.target;
        a && a != b && a.classList.remove("open");
        (d = b.classList) && d.contains("btn") && (c.preventDefault(), b.classList.toggle("open"))
    })
});
</script>
</head>
<body>
<div id = "nav" class "menu">
<ul>
<li><a href = "#" class="btn">ПУНКТ1</a>
<ul>
<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 = "#" class="btn">ПУНКТ2</a>
<ul>
<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 = "#" class="btn">ПУНКТ3</a>
<ul >
<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 = "#" class="btn">ПУНКТ4</a>
<ul>
<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>



</body>

</html>

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

большое спасибо!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите сделать меню на js porezon Общие вопросы Javascript 3 03.08.2016 12:22
Выпадающее окно из меню js igor-igor-22 jQuery 3 19.08.2013 20:23
Помогите доработать меню Fox Mulder Элементы интерфейса 3 01.08.2013 12:34
Помогите с анимацией выпадающего меню strengerst Элементы интерфейса 13 31.07.2013 12:27
Помогите по Drop Line меню e.lodyanov Элементы интерфейса 2 20.12.2012 11:31