3-ех уровневое меню!?!

Вид для печати

29.01.2008, 07:37
Katjen

Всем Доброго времени суток

Хотела бы попросить вас о помощи небольшой!
А конкретнее: как сверстать трехуровневое выпадающее меню!
Двухуровневое получилось сверстать
по принципу [Only registered and activated users can see links. Click Here To Register...]
Что б добавить ещё уровень- третий меня не хватает.
в ИЕ не работает...

Кто верстал, помогите!!!
29.01.2008, 11:30
Aykroyd
На вебмасконе, там немного уже устарела та статья... Теперь можно без скриптов. Вместо них достаточно подключить [Only registered and activated users can see links. Click Here To Register...] для IE6...
Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Горизонтальное меню (4 уровня)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000000; background: #FFFFFF;} * html body {behavior: url(csshover.htc);} div#menu {margin: 20px;} ul#mainmenu {font-size: 1.1em; list-style: none;} ul#mainmenu li {text-align: center; background: url(img/bgcenter.gif) no-repeat; float: left; position: relative; cursor: pointer;} ul#mainmenu li#b1 {background: url(img/bgleft.gif);} ul#mainmenu li#b5 {background: url(img/bgright.gif);} ul#mainmenu li a {font-weight: bold; text-decoration: none; line-height: 30px; display: block; width: 100px; height: 30px; overflow: hidden;} * html ul#mainmenu li a {line-height: 28px;} *+html ul#mainmenu li a {line-height: 28px;} ul#mainmenu li ul {font-size: 1em; display: none; width: 150px; border: 1px #CCCCCC solid; position: absolute; left: 0px; top: 30px; list-style: none;} ul#mainmenu li li {text-align: left; background: #333333; width: 150px;} ul#mainmenu li li.arrow {background: url(img/arrow.gif) #333333 no-repeat right center;} ul#mainmenu li li a {font-weight: normal; line-height: normal; width: auto; height: auto; padding: 5px 8px;} * html ul#mainmenu li li a {height: 1%;} ul#mainmenu li li ul {left: 150px; top: 3px;} ul#mainmenu li:hover a {color: #FFFFFF;} ul#mainmenu li li:hover {background-color: #00CC33;} ul#mainmenu li:hover ul ul {display: none;} ul#mainmenu li:hover ul ul ul {display: none;} ul#mainmenu li:hover ul {display: block;} ul#mainmenu li li:hover ul {display: block;} ul#mainmenu li li li:hover ul {display: block;} </style> </head> <body> <div id="menu"> ****<ul id="mainmenu"> ****<li id="b1"><a>Технологии</a> **<li class="arrow">[Only registered and activated users can see links. Click Here To Register...] ********** [Only registered and activated users can see links. Click Here To Register...] ***** [Only registered and activated users can see links. Click Here To Register...] *****<li class="arrow">[Only registered and activated users can see links. Click Here To Register...] * ** * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * ***** *****<li class="arrow">[Only registered and activated users can see links. Click Here To Register...] * ** * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * [Only registered and activated users can see links. Click Here To Register...] * * ***** ***** [Only registered and activated users can see links. Click Here To Register...] ***** * *<li class="arrow">[Only registered and activated users can see links. Click Here To Register...] ********** [Only registered and activated users can see links. Click Here To Register...] ***** [Only registered and activated users can see links. Click Here To Register...] ***** [Only registered and activated users can see links. Click Here To Register...] ***** [Only registered and activated users can see links. Click Here To Register...] ***** [Only registered and activated users can see links. Click Here To Register...] ***** * * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * **** **** ****<li id="b2"><a>Сервис</a> ** [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] *<li class="arrow">[Only registered and activated users can see links. Click Here To Register...] ********** [Only registered and activated users can see links. Click Here To Register...] ***** [Only registered and activated users can see links. Click Here To Register...] ***** * * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * **** **** ****<li id="b3"><a>Продукты</a> ** [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * **** **** ****<li id="b4"><a>Поддержка</a> ** [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * **** **** ****<li id="b5"><a>Контакты</a> ** [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * **** ****[/list] </div> </body> </html>
Примерно так... Только это не вертикальное, а горизонтальное. Переделать его в вертикальное совсем не сложно. Все по аналогии...
29.01.2008, 13:16
Katjen

извиняюсь за глупость, но

csshover.htc - как его подключить?
29.01.2008, 13:34
Aykroyd

Вот так:

Код:

* html body {behavior: url(csshover.htc);}

Только перед тем, как подключить, его надо для начала скачать...
29.01.2008, 15:21
Katjen

Спасиба огромное, чтоб я без вас делала)!

htc вот только Расширение не узнаю...
30.01.2008, 09:39
Aykroyd

Ну, если так интересно, то [Only registered and activated users can see links. Click Here To Register...]. [Only registered and activated users can see links. Click Here To Register...]
30.01.2008, 12:29
Katjen

Когда я начинаю делать меню в вертекальном положении, начинает разрушаться целостность.

Я так запуталась...
[B]Что там нужно поменять такое незначительное?[B]
30.01.2008, 15:08
Aykroyd

Цитата:

Originally posted by Katjen@Jan 30 2008, 13:29
[b][B]Что там нужно поменять такое незначительное?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Расположение пунктов самого вернего уровня и абсолютное позиционирование вложенных списков.

Код:

<style type="text/css"> * {margin: 0px; padding: 0px;} body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000000; background: #FFFFFF;} * html body {behavior: url(csshover.htc);} div#menu {margin: 20px;} ul#mainmenu {font-size: 1.1em; width: 100px; list-style: none;} ul#mainmenu li {background: url(img/bgcenter.gif) no-repeat; width: 100px; float: left; position: relative; cursor: pointer;} ul#mainmenu li a {text-indent: 10px; font-weight: bold; text-decoration: none; line-height: 30px; display: block; width: 100px; height: 30px; overflow: hidden;} * html ul#mainmenu li a {line-height: 28px;} *+html ul#mainmenu li a {line-height: 28px;} ul#mainmenu li ul {font-size: 1em; display: none; width: 100px; border: 1px #CCCCCC solid; position: absolute; left: 100px; top: 3px; list-style: none;} ul#mainmenu li li {background: #333333;} ul#mainmenu li li.arrow {background: url(img/arrow.gif) #333333 no-repeat right center;} ul#mainmenu li li a {font-weight: normal; text-indent: 0px; line-height: normal; width: auto; height: auto; padding: 5px 8px;} * html ul#mainmenu li li a {height: 1%;} ul#mainmenu li li ul {left: 100px; top: 3px;} ul#mainmenu li:hover a {color: #FFFFFF;} ul#mainmenu li li:hover {background-color: #00CC33;} ul#mainmenu li:hover ul ul {display: none;} ul#mainmenu li:hover ul ul ul {display: none;} ul#mainmenu li:hover ul {display: block;} ul#mainmenu li li:hover ul {display: block;} ul#mainmenu li li li:hover ul {display: block;} </style>