меню с вложеними подменю

Gorik · July 30, 2007

<html>
<head>
<script language="JavaScript">
function startMenu() {

// Проверяем, поддерживает ли текущий браузер DOM
 if (document.getElementById) {

// Получаем объект с именем идентификатора menu
 nav = document.getElementById('menu');

// Пробегаемся по всем дочерним элементам нашего меню
 for (i=0; i<nav.childNodes.length; i++) {
 node = nav.childNodes[i];

// Если дочерний элемент - LI, то идем дальше
 if (node.nodeName == 'LI') {

// При наведении курсора на пункт меню, присваиваем LI класс over
 node.onmouseover = function() {
 this.className = 'over';
 }
 node.onmouseout = function() {

// При перемещении курсора за пределы пункта убираем класс over
 this.className = '';
 }
 }
 }
 }
}
</script>
<style type="text/css">
 UL {
 width: 180px; /* Ширина меню */
 list-style: none; /* Для списка убираем маркеры */
 margin: 0px; /* Нет отступов вокруг */
 padding: 0px; /* Убираем поля вокруг текста */
 font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
 font-size: 11pt /* Размер названий в пункте меню */
}
 UL LI {
 position: relative /* Подпункты позиционируются относительно */
}
 LI UL {
 position: absolute; /* Подменю позиционируются абсолютно */
 display: none; /* Скрываем подменю */
 top: 0px; /* По высоте положение подменю исходное */
 left: 179px; /* Сдвигаем подменю вправо */
 z-index: 1 /* Основное меню находится ниже подменю */
}
 LI A {
 display: block; /* Ссылка как блочный элемент */
 width: 100%; /* Ссылка на всю ширину пункта */
 padding: 5px; /* Поля вокруг надписи */
 text-decoration: none; /* Подчеркивание у ссылок убираем */
 background: /* Для основных пунктов отображаем рисунок */
 url(bullet.gif) /* Указываем путь к рисунку со стрелкой */
 right center /* Выравниваем рисунок по центру справа */
 no-repeat; /* Отменяем повторение фона */
 color: #666; /* Цвет текста */
 border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
 background-color: white; /* Белый цвет фона */
 border-bottom: none /* Границу снизу не проводим */
}
 LI UL LI A {
 background-image: none; /* Для подпунктов рисунок убираем */
 z-index: 2 /* Подменю располагаются выше меню */
}
 LI A:hover {
 color: maroon; /* Цвет текста активного пункта */
 background-color: #f0f0f0 /* Цвет фона активного пункта */
}
 LI:hover UL, LI.over UL { 
 display: block /* При выделении пункта курсором мыши отображается подменю */
}
 .brd {
 border-bottom: 1px solid #ccc /* Линия снизу */
}
</style>
</head>
<body onLoad="startMenu()">
<!--[if IE]>
<style type="text/css">
 UL LI {
 float: left /* В браузере Internet Explorer пункты выводятся без разрывов */
}
</style>
<![endif]-->

 <ul id=menu>
 <li><a href=russian.html>Русская кухня</a>
 <ul> 
 <li><a href=linkr1.html>Бефстроганов</a></li> 
 <li><a href=linkr2.html>Гусь с яблоками</a></li> 
 <li><a href=linkr3.html>Крупеник новгородский</a></li> 
 <li><a href=linkr4.html class=brd>Раки по-русски</a></li> 
 </ul> 
 </li> 
 <li><a href=ukrainian.html>Украинская кухня</a> 
 <ul> 
 <li><a href=linku1.html>Вареники</a></li> 
 <li><a href=linku2.html>Жаркое по-харьковски</a></li> 
 <li><a href=linku3.html>Капустняк черниговский</a></li> 
 <li><a href=linku4.html class=brd>Потапцы с помидорами</a></li> 
 </ul> 
 </li>

 <li><a href=caucasus.html>Кавказская кухня</a> 
 <ul> 
 <li><a href=linkc1.html>Суп-харчо</a></li> 
 <li><a href=linkc2.html>Лилибдж</a></li> 
 <li><a href=linkc3.html>Чихиртма</a></li> 
 <li><a href=linkc4.html class=brd>Шашлык</a></li> 
 </ul> 
 </li> 
 <li><a href=asia.html style="background-image: none" class=brd>Кухня Средней Азии</a></li> 
 </ul>

</body>
</html>

Этот код Влада Мержевича который создает меню с вложеними подменю и работает прекрасно, но как насчет еще нескольких уровней подменю? Вопрос : код должен работать без изменений и для подменю следующих уровней то есть подменю первого подменю и тд. ведь стили должны работать и для следущих уровней LI UL ... (естественно добавить списков нада ) или для такой универсализации нужны какие то доработки??

ПС Сам пробовал создавать несколько уровней подменю но возникла проблема - эти подменю сразу же отображаютса...

{...отредактировано kiD}

Maslakoff · July 30, 2007

Наверное стоит использовать рекурсию... Наверное.

Gorik · July 31, 2007

мде, неужели никого это не интересует ??

Vlad · July 31, 2007

Мда, переделывать многое придется, а никому неохота.

kiD · July 31, 2007

автор, форматировать программный кода в соответствующих тегах [codе]...[/codе]

Gorik · July 31, 2007

Мда, переделывать многое придется, а никому неохота.

что именно ?? подменю отображаются значит проблема только за их отображением и ищезновэнием ??

IrbIz · July 31, 2007

ты сделай эти блоки с менюшкой в слоях(слой для каждго уровня), и поставь им в стили

position: absolute;

top: ...px;

left:...px;

visibility: hidden;

......

это когда ты не наводишь курсор на меню

а когда наводишь, ты в html пишешь типа onMouseOver="имя_функции_js" а в самом js в этом случае меняешь visibility: hidden на visibility: visible;

вот и все)

вот примерчик

<b>это в html</b>
<div id="menu_container">
 <div id="menu1" class="menu_unselected" onMouseOver="showLayer(1);" onMouseOut="hiddenLayer(1);">link</div></div>
<div class="menus_container">
<div id="men1" class="menu" onMouseOver="showLayer(1);" onMouseOut="hiddenLayer(1);">
 <div class="div_link" onMouseOver="this.className='div_hover';" onMouseOut="this.className='div_link';"><a href="" class="menu_link">Link 1</a></div>
 <div class="div_link" onMouseOver="this.className='div_hover';" onMouseOut="this.className='div_link';"><a href="" class="menu_link">Link 2</a></div>
 <div class="div_link" onMouseOver="this.className='div_hover';" onMouseOut="this.className='div_link';"><a href="" class="menu_link">Link 3</a></div>
 <div class="div_link" onMouseOver="this.className='div_hover';" onMouseOut="this.className='div_link';"><a href="" class="menu_link">Link 4</a></div>
</div>

ну а с явой я думаю разберешся))

Gorik · August 1, 2007

идея ок, спс

iRabbit · August 4, 2007

ПС Сам пробовал создавать несколько уровней подменю но возникла проблема - эти подменю сразу же отображаютса...

Ну для того, чтобы подменю сразу не отображались - необходимо прописать следующий CSS код:

ul li ul {

display: none;

}

А вот уже JavaScript при наведении курсора должен назначать соответствующему подменю свойство display: block.

Ну если не планируешь функционал в IE 6 и меньше, то можно вообще забить на JavaScript и просто сделать так:

ul li ul {

display: none;

}

ul li:hover ul {

display: block;

}

Но 6 IE вряд ли тебя не заинтересует...

iRabbit · August 4, 2007

ну а с явой я думаю разберешся))

Только вот работы монотонной хватает...

Maslakoff · August 4, 2007

<ul id="menu">
 <li>Blabla</li>
 <ul>
 <li>Blabla2</li>
 <ul>
 <li>Blabla2</li>
 </ul>
 </ul>
</ul>

<script>

function menu_openable( what_openable )
{
 // .. Функция, делающая меню раскрываемым,
 // можно организовать рекурсию, которая пробивалась бы к самому последнему элеменуту дерева id="menu"
 // и попутно присваевала onclick="do_open_or_close(this);"
}

function do_open_or_close( element )
{
 // Функция, которая банально присваевает visiblity или display к определенному элементу element
}

do_openable('menu');
</script>

Рекурсия! Э... вроде бы так... прийду после гулек -- напишу скрипт!

vvsh · January 23, 2008

А как вот это меню сделать горизонтальным?

Vlad · January 24, 2008

Используй float: left или display: inline для LI.

Sign In

меню с вложеними подменю

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information