ТвойWeb :: Версия для печати :: Многоуровневое меню на стилях...

1. Ray Wen - 03 Апреля, 2006 - 02:57:53 - перейти к сообщению

Хочу сделать многоуровневое меню вида

CODE:

<div id="menu">
<ul id="nav">
<li><a href="#">Главная</a></li>
<li><a href="#" id="sub">Новости</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#" id="sub">Sub menu 2</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#" id="sub">Sub menu 2</a>
<ul>
<li><a href="#" id="sub">Sub menu 1</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#" id="sub">Sub menu 3</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#" id="sub">Sub menu 4</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
</ul></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul>
</li>
</ul>
</div>

(тут кода на 5 уровней)

На каждый уровень приходится прописывать CSS, но не в этом беда... IE не понимает этого... Недовольство, огорчение

CSS

CODE:

#menu ul li ul {position: absolute;top: 29px;left: 0; display:none; width:112px}
#menu ul li:hover ul,#main #container #menu ul li.over ul {display: block}

#menu ul li:hover li ul,#menu ul li.over li ul {display: none}
#menu ul li:hover li:hover ul,#menu ul li.over li.over ul {display: block}

#menu ul li:hover ul li:hover ul li ul,#menu ul li.over li.over li ul {display: none}
#menu ul li:hover li:hover li:hover ul,#menu ul li.over li.over li.over ul {display: block}
и т.д. для каждого уровня...

li.over добавлен так как li:hover ослик не понимает... для этого добавлен JS

CODE:

стащил у Маркуса... Закатив глазки

Но дальше двух уровней это меню в IE не пашет... Недовольство, огорчение

даже просто li на втором уровне не реагирует (в CSS добавлено #menu ul li ul li:hover,#main #container #menu ul li ul li.over{ background:#FFF})

Можно ли заставить эту конструкцию пахать под IE?

2. Леголегс - 03 Апреля, 2006 - 15:01:37 - перейти к сообщению

О! Брат по разуму! Улыбка

Я тоже пытался соорудить такой изврат - выпадающее меню без яваскрипта Улыбка

Только я с самого начала предполагал, что ничего путного не получится, а на IE тем более забил принципиально. В итого получилось вот что:

CODE:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выпадающее меню на CSS</title>
<style type="text/css">
div.bar {
width: 90%;
left: 5%;
position: absolute;
border: 1px solid black;
}
div.menunode {
/*=general:=*/
overflow: hidden;
width: 150px;
height: 20px;
/*=/general=*/
/*=fancy:=*/
border: 1px solid green;
/*=/fancy=*/
}
div.menunode:hover {
/*=general:=*/
width: 300px;
/*overflow: visible;*/
/*=/general=*/
/*=fancy:=*/

/*=/fancy=*/
}
div.menunode div.menulist {
/*=general:=*/
/*position: relative;*/
/*left: 150px;*/
/*top: -20px;*/
position: absolute;
left: 150px;
width: 150px;
display: none;
/*=/general=*/
/*=fancy:=*/
border: 1px solid red;
/*background: url(redopacbg.png);*/
/*=/fancy=*/
}
div.menunode:hover > div.menulist {
display: block;
}
div.menulisthead {
/*=general:=*/
float: left;
width: 148px;
/*=/general=*/
/*=fancy:=*/

/*=/fa
div.menuitem {
/*=general:=*/
width: 148px;
/*=/general=*/
/*=fancy:=*/

/*=/fancy=*/
}
</style>
</head>
<body>
<div class="bar">
<div class="menunode" style="clear:both;">
<div class="menulisthead">
<a href="#">link 1</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 1.1</a>
</div>
<div class="menuitem">
<a href="#">link 1.2</a>
</div>
<div class="menunode">
<div class="menulisthead">
<a href="#">link 1.3</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 1.3.1</a>
</div>
<div class="menuitem">
<a href="#">link 1.3.2</a>
</div>
</div>
</div>
</div>
</div>
<div class="menunode" style="clear:both;">
<div class="menulisthead">
<a href="#">link 2</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 2.1</a>
</div>
<div class="menuitem">
<a href="#">link 2.2</a>
</div>
<div class="menuitem">
<a href="#">link 2.3</a>
</div>
</div>
</div>
<div class="menunode" style="clear:both;">
<div class="menulisthead">
<a href="#">link 3</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 3.1</a>
</div>
<div class="menuitem">
<a href="#">link 3.2</a>
</div>
<div class="menuitem">
<a href="#">link 3.3</a>
</div>
</div>
</div>
</div>
</body>
</html>

В общем, ИМХО, дохлый это номер. CSS не настолько развит, чтобы только им ограничиваться при создании такого меню. И разные браузеры ведут себя слишком по-разному.
Кроме того после убирания курсора мыши с меню оно ещё некоторое время должно быть видимо, иначе пользоваться им слишком неудобно. Такой эффект без скриптов не реализуем. Разве что появится новый тег

CODE:

И не забывай, что

CODE:

относится к ссылкам, находящимся вообще в параграфе, а

CODE:

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

CODE:

<P><a href="#">этот текст красный</a>
<b><a href="#">а этот - нет</a></b>

(разумеется, ИЕ второго варианта не понимает)

3. Ray Wen - 03 Апреля, 2006 - 15:34:55 - перейти к сообщению

Леголегс
Да впринципи нашел один способ без жавного меню... не совсем коректный и пока еще окончательно не нашел способ под IE сделать коректное отображение... Найду, отпишусь тогда...

4. Ray Wen - 04 Апреля, 2006 - 17:04:08 - перейти к сообщению

Вот тут есть пример меню, даже без JS... конечно там одаптация под IE идет дополнительными тегами только для него, но зато работает... Улыбка

Можно дописать CSS под определенное количество выпадающих уровней... Делал на основе этого менюшку, под IE получилось конечно немного коряво, но работает... Улыбка

5. TvoyWeb - 04 Апреля, 2006 - 17:12:46 - перейти к сообщению

Ray Wen
А мне с первого взгляда понравилось. Освобожусь переделаю меню на одном сайте. А то там менюшный JS конфликтует с подсказками Улыбка

6. Леголегс - 05 Апреля, 2006 - 10:37:39 - перейти к сообщению

Ray Wen пишет:

Вот тут есть пример меню, даже без JS... ко

Не заметил признаков меню (Опера7.20)

7. Ray Wen - 05 Апреля, 2006 - 12:08:24 - перейти к сообщению

Леголегс
Ну ты бы еще 6.01 взял... Голливудская улыбка

На браузеры с истекшим сроком годности не расчитано... Улыбка

8. Леголегс - 05 Апреля, 2006 - 12:48:32 - перейти к сообщению

Ray Wen пишет:

Ну ты бы еще 6.01 взял... На браузеры с истекшим сроком годности не расчитано...

Так! Руки прочь от оперы семь двадцать! Нунчаки

Она ничем не хуже шестого осла! Ну ты попал

И уж тем более не старее!
*злобно бурча под нос ушёл дописывать своё меню, чтоб даже в linx заработало*

9. Ray Wen - 05 Апреля, 2006 - 13:07:12 - перейти к сообщению

Леголегс
Это конечно недостаток, без спорно... но если каждый день прежде чем сделать что-то новое мы будем оглядываться на браузер 3-х летней давности, который не поддерживает и половину возможностей которые нынче внедряются... то ни о каком прогрессе речи быть не может... Осел конечно хуже, но он пока еще достаточно широко распространен, приходится выдумывать всякую береберду, чтобы и в нем было то что поддерживается без проблем остальными...

10. SviMik - 05 Апреля, 2006 - 16:40:58 - перейти к сообщению

Я юзаю оперу 7.23. И не для тестов чтоб знать как в ней мой сайт выглядит. Я её юзаю в повседневной жизни. Софт привык обновлять только когда это надо (чего-то не хватает, не удобно, какие-то баги...). По мне в ней всё ок и меня она устраивает. И то что Вася Пупкин ориентируется на последнии разработки меня не волнует, и без него обойдусь...