Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2012, 01:29
Аспирант
Отправить личное сообщение для Vempel Посмотреть профиль Найти все сообщения от Vempel
 
Регистрация: 24.04.2012
Сообщений: 30

вопрос по реализации 2-х уровнего меню
Хочу реализовать меню на javascript чтобы при нажатии по ссылке открывалось подменю, а при нажатии на одну из ссылок в подменю открывался еще блок меню. меню первого уровня я реализовал (нажимаю на меню открывается подменю), а когда я пытаюсь нажать на ссылки уже этого подменю все пропадает.
Вот мой код яваскрипт:
function navigation() {
   var pop = document.getElementById('pop');
   var more = document.getElementById('more');
   var pop1 = document.getElementById('pop1');
   var mote = document.getElementById('mote');
   pop.onmouseover = show;
   more.onmouseover = show;
   
   pop.onmouseout = hide;
   more.onmouseout = hide;
   
   pop1.onmouseover = show1;
   mote.onmouseover = show1;
   
   pop1.onmouseout = hide1;
   mote.onmouseout = hide1;


}
function show() {
    var menu = document.getElementById('pop');
    var submenu = document.getElementById('more');
    submenu.style.display = 'block';
    submenu.style.width = '149px';
    }
function show1() {
    var sub = document.getElementById('pop1');
    var subm = document.getElementById('mote');
    subm.style.display = 'block';
    subm.style.width = '149px';
}
    
function hide() {
    var menu = document.getElementById('pop');
    var submenu = document.getElementById('more');
    submenu.style.display = 'none';
}
function hide1() {
var sub = document.getElementById('pop1');
var subm = document.getElementById('mote');
subm.style.display = 'none'; 
}

функция navigation выполняется по событию windows.onload напрямую из html
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2012, 01:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Vempel,
Есть тут на jQuery с произвольным уровнем вложенности
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2012, 03:33
Аспирант
Отправить личное сообщение для Vempel Посмотреть профиль Найти все сообщения от Vempel
 
Регистрация: 24.04.2012
Сообщений: 30

А как реализовать мою задачу на javascript. В каком направлении думать. Заранее благодарен.
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2012, 11:37
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Vempel,
Ну собственно пример на JQ - может наведёт на мысли ? - алгоритмы то наверно можно перенести ?

Проблема с автоскрытием элементов навигации пост 21
Ответить с цитированием
  #5 (permalink)  
Старый 12.08.2012, 12:09
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

события всплывают, приведите полный код вашего меню и здесь есть кнопочка посмотреть [html run]
Ответить с цитированием
  #6 (permalink)  
Старый 12.08.2012, 12:53
Аспирант
Отправить личное сообщение для Vempel Посмотреть профиль Найти все сообщения от Vempel
 
Регистрация: 24.04.2012
Сообщений: 30

HTML код меню
<div id="nav">
<ul>
<li><a href="index.html">Домой</a></li>
<li><a id="pop" href="resourse.htm">Материалы</a></li>
<li><a href="gallery.htm">Галерея</a></li>
<li><a href="contacts.htm">Контакты</a></li>
</ul>
</div>
<div id="more">
<a href="articles.htm">Статьи</a>
<br />
<a id="pop1" href="rukovodstva.htm">Руководства</a>
</div>
<div id="mote">
<a href="node.htm">Статья 1</a><br />
<a href="bode.htm">Cтатья 2</a>
</div>
Ответить с цитированием
  #7 (permalink)  
Старый 12.08.2012, 12:56
Аспирант
Отправить личное сообщение для Vempel Посмотреть профиль Найти все сообщения от Vempel
 
Регистрация: 24.04.2012
Сообщений: 30

СSS код
Код:
div#nav li  {
color:#ffffff;
display: inline-block;
width:150px;
background-color: #777;
}
div#nav li a  {
color: #fff;
text-decoration: none;
}
div#more {
position: relative;
left:195px;
top: -16px;
padding-top:15px;
padding-bottom: 5px;
text-align: left;
display: none;
color:white;
background-color: #555;
text-decoration: none;
}
div#more a:visited {color:white;}
div#more a:hover {background-color: #777;}
div#more a {
padding-left: 5px;
display:block;
text-decoration: none;
}
div#mote {
position: relative;
left: 344px;
top: -42px;
padding-top:15px;
padding-bottom: 5px;
text-align: left;
color:white;
background-color: #555;
text-decoration: none;
display: none;
}
div#mote a {
padding-left: 5px;
display:block;
text-decoration: none;
}
div#mote a:visited {color:white;}
div#mote a:hover {background-color: #777;}
Ответить с цитированием
  #8 (permalink)  
Старый 12.08.2012, 13:02
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

и ещё момент, просите по нажатию, а код по наведению
Ответить с цитированием
  #9 (permalink)  
Старый 12.08.2012, 14:56
Аспирант
Отправить личное сообщение для Vempel Посмотреть профиль Найти все сообщения от Vempel
 
Регистрация: 24.04.2012
Сообщений: 30

Ну это понятно вместо onmouseover будет onclick вопрос в том, что при наведении на меню открывается подменю, а при наведении на пункт уже подменю открвывается еще подменю но уже кликнуть по нему либо повыбирать его пункты возможности нет. Понимаю, что где то ошибка в Javascript коде, а в чем конкретно разобраться не могу. Заранее благодарен за любую помощь.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос о меню Александр х@к Элементы интерфейса 3 16.07.2012 19:51
Вопрос о меню? Lutheme Events/DOM/Window 2 15.10.2011 00:56
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Вопрос реализации меню! 0931454574 jQuery 1 31.03.2011 16:33
Вопрос по созданию меню LeeleeKeelee jQuery 0 21.01.2011 20:46