Как сделать такое меню?

автор Narutoinfo Сентябрь 13th 2008, 20:10

У меня на сайте очень много разделов и они так тупо смотреться, а на днях вот увидел такое меню
Как сделать такое меню? 10

НЕ подскажите как сделать уж больно хочется

автор Sunnyta Сентябрь 13th 2008, 20:19

Я немного ранее тоже спрашивала про такой вариант раскрывающегося меню, но видать:
- или очень сожный
- или нихто не знает
- или .... read

автор Sunnyta Сентябрь 18th 2008, 19:21

Narutoinfo пишет:У меня на сайте очень много разделов и они так тупо смотреться, а на днях вот увидел такое меню

НЕ подскажите как сделать уж больно хочется

А ты как хотел, чтобы кликнуть по пункту и он раскрывался или так и был раскрытым? Второй вариант несложный ... wink

автор Narutoinfo Сентябрь 18th 2008, 22:40

Нет что бы кликали и оно раскрывалось

автор Sunnyta Сентябрь 19th 2008, 00:17

Narutoinfo пишет:Нет что бы кликали и оно раскрывалось

Это сложнее... я нашла много скриптов, подставляла их в Модуль - но возможно, что я что-то не так делала... т.к. образца готового не было где посмотреть и исправиться... unknown

автор Narutoinfo Сентябрь 20th 2008, 11:29

Я нашел скрипт с меню но там 3 скрипта один CSS Java и Html ия незнаю куда их пихать Java и CSS
http://perkoka.ru/article/110/820.html

автор Sunnyta Сентябрь 20th 2008, 16:02

Я нашла то, что мне надо ... но как его поправить чтоб работал в Модуле? На чистой страничке работает... но видать что-то табличное мешает и что-то с размерами... Кто знает - подскажите что нужно убрать? На первый взгляд - это простейшее...

Код:: <body > <table width="716"><tr><td bgcolor="#9999CC" width="240"> <table><tr><td width="240"> <script language=JavaScript> function clickHandler() { var targetId, srcElement, targetElement; srcElement = window.event.srcElement; if (srcElement.className == "Outline") { targetId = srcElement.id + "details"; targetElement = document.all(targetId); if (targetElement.style.display == "none") { targetElement.style.display = ""; } else { targetElement.style.display = "none"; } } } document.onclick = clickHandler; </script>  <b id=Out2 class=Outline style="cursor: hand;">Меню из 2 подменюшек</b><br> <div id=Out2details style="display:None; position:relative; left:12;"> <a href="help.htm">1 подменюшка</a><br> <a href="help2.htm">2 подменюшка</a><br> </div></td></tr></table> </td> <td> <table width="100%"></tr></table> </td></tr></table> </body>

автор Sunnyta Сентябрь 20th 2008, 16:03

Lesia пишет:Я немного ранее тоже спрашивала про такой вариант раскрывающегося меню, но видать:
- или очень сложный
- или нихто не знает
- или ....

автор Ринкате Июнь 1st 2010, 18:02

Я когда работал на других конструкторов, нашёл такие раздвижные. Это полный CSS, А в 2х2 форуме это невозможно
По мне так меню 2х2 вполне себе
Например я на своем форуме сделал так:
http://narhodo.2x2forum.ru/forum.htm

И всё по полочкам)

автор Lucky Июнь 1st 2010, 18:09

А в 2х2 форуме это невозможно

Ну да, конечно. Чего это невозможно?
Аккордеон - это пройденный нами в прошлом году материал.

автор **Dana Domirani** Июнь 1st 2010, 18:50

Если пригодится - у меня одно время стояло такое

Пункты (Item) разворачивались при наведении.

Код меню, размещается в боковом виджете:

Код:: <ul id="navigator"> <li> <a href="#">Item 1</a> <table><tr><td> <ul> <li><a href="#">SubItem 1.1</a></li> <li><a href="#">SubItem 1.2</a></li> <li><a href="#">SubItem 1.3</a></li> <li><a href="#">SubItem 1.4</a></li> </ul> </td></tr></table> </li> <li class="active"> <a href="#">Item 2</a> <table><tr><td> <ul> <li><a href="#">SubItem 2.1</a></li> <li><a href="#">SubItem 2.2</a></li> <li><a href="#">SubItem 2.3</a></li> <li><a href="#">SubItem 2.4</a></li> </ul> </td></tr></table> </li> <li> <a href="#">Item 3</a> <table><tr><td> <ul> <li><a href="#">SubItem 3.1</a></li> <li><a href="#">SubItem 3.2</a></li> </ul> </td></tr></table> </li> </ul>

<li class="active"> - позволяет один из пунктов зафиксировать в развернутом виде.

Настройки CSS:

Код:: a { text-decoration: none; color: #00F; } a:hover { text-decoration: underline; } #navigator a { outline: 0; } #navigator, #navigator ul, #navigator li { list-style: none; margin: 0; padding: 0; display: block; } #navigator { border: 1px solid #CCC; width: 150px; } #navigator ul { margin-left: 40px; } #navigator > li { border-bottom: 1px solid #CCC; padding: 2px 5px; } #navigator > li[class="active"] ul { display: block; } #navigator > li ul { display: none; } #navigator > li:hover ul { display: block; } #navigator > li:last-child { border-bottom: 0; } #navigator li.active > a { color: red; }