За последние 24 часа нас посетили 18443 программиста и 1623 робота. Сейчас ищут 1324 программиста ...

Многоуровневое меню

Тема в разделе "JavaScript и AJAX", создана пользователем Fancky, 16 авг 2007.

  1. Fancky

    Fancky Активный пользователь

    С нами с:
    16 авг 2007
    Сообщения:
    1
    Симпатии:
    0
    народ помагите, нужно сделать динамически изменяемую менюшку
    например есть текстовый файл там где стоит * то менюшка, а там где + то меню которое выпадает.
    чтото типо етого
    *телефоны*
    +моторола+
    +самсунг+
    +сониериксон+
    *комуникаторы*
    +кутек+
    +моторола+
     
  2. Rollyz

    Rollyz Активный пользователь

    С нами с:
    4 июл 2007
    Сообщения:
    87
    Симпатии:
    0
  3. dark-demon

    dark-demon Активный пользователь

    С нами с:
    16 фев 2007
    Сообщения:
    1.920
    Симпатии:
    1
    Адрес:
    леноград
    да не нужен тут аякс...
     
  4. 440Hz

    440Hz Старожил
    Команда форума Модератор

    С нами с:
    21 дек 2012
    Сообщения:
    8.003
    Симпатии:
    1
    Адрес:
    Оттуда
    на CSS делается за 5 минут

    http://440hz.ru/trash/cssmenu/

    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    3.  
    4. <link rel="Stylesheet" href="./index.css">
    5.  
    6.  
    7. var jsHover = function() {
    8.  
    9.     var hEls = document.getElementById("nav").getElementsByTagName("li");
    10.  
    11.     if ( window.attachEvent && navigator.userAgent.indexOf("Opera") == -1 ) {
    12.         for (var i=0, len=hEls.length; i<len; i++) {
    13.           hEls[i].onmouseover=function() { this.className+=" jshover"; }
    14.           hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
    15.         }
    16.     }
    17.  
    18. }
    19.  
    20.  
    21.  
    22. <ul id="nav">
    23.  
    24.     <li><a href="">Home</a></li>
    25.     <li><a href="">Новости</a>
    26.  
    27.         <ul>
    28.             <li><a href="">компании</a></li>
    29.  
    30.                 <ul>
    31.                     <li><a href="">внутренние новости</a></li>
    32.                     <li><a href="">внешнире новости</a></li>
    33.                 </ul>  
    34.            
    35.             <li><a href="">новости мировые</a>
    36.            
    37.                 <ul>
    38.                     <li><a href="">новости Google</a></li>
    39.                     <li><a href="">новости MicroSoft</a></li>
    40.                     <li><a href="">новости Yahoo!</a></li>
    41.                     <li><a href="">новости IBM</a></li>
    42.                     <li><a href="">новости Yandex</a></li>
    43.                 </ul>  
    44.            
    45.             </li>
    46.         </ul>  
    47.  
    48.     </li>
    49.     <li><a href="">контакты</a></li>
    50.  
    51. </ul>
    52.  
    53. <script>jsHover();</script>
    54.  
    55. </body>
    56. </html>
    57.  
    [css]

    body, div, td, p {

    font-family: Tahoma, Arial, Helvetica, "Times New Roman", sans-serif;
    font-size: 12px;

    }

    #nav, #nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #999999;
    float: left;
    width: 100%;
    color: white;

    }
    #nav li {
    float: left;
    position: relative;
    background: #777777;
    width: 120px;
    }

    #nav a {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100px;
    padding: 10px;
    }
    #nav a:hover {
    color: #fff;
    background: #333;
    }
    #nav li:hover,
    #nav li.jshover {
    background: #333;
    }

    #nav li ul {
    display: none;
    position: absolute;
    padding: 0;
    width: 120px;
    }
    #nav li li a {
    width: 100px;
    background: none;
    }
    #nav li:hover ul,
    #nav li.jshover ul {
    display: block;
    }

    #nav li:hover li ul,
    #nav li.jshover li ul {
    display: none;
    width: 120px;
    top: 0px;
    left: 120px;
    }
    #nav li:hover li:hover ul,
    #nav li.jshover li.jshover ul {
    display: block;
    }}[/css]
     
  5. Entrery

    Entrery Активный пользователь

    С нами с:
    19 июл 2007
    Сообщения:
    31
    Симпатии:
    0
    440Hz
    ааа как красиво :))
     
  6. dark-demon

    dark-demon Активный пользователь

    С нами с:
    16 фев 2007
    Сообщения:
    1.920
    Симпатии:
    1
    Адрес:
    леноград
    хороший интерфейс за 5 минут не делается...
     
  7. antonn

    antonn Активный пользователь

    С нами с:
    10 июн 2007
    Сообщения:
    2.996
    Симпатии:
    0
    dark-demon
    сказал - как отрезал.
    но хоть бы в тему... %)
     
  8. dark-demon

    dark-demon Активный пользователь

    С нами с:
    16 фев 2007
    Сообщения:
    1.920
    Симпатии:
    1
    Адрес:
    леноград
    хорошо, разжёвываю - перед появлением меню и исчезновением должна быть задержка порядка четверти секунды. если менюшка открыта кликом мыши, то и закрыться она должна не ранее следующего клика мышью. это основы юзабилити. на css это не реализовать. да он для этого и не предназначен.
     
  9. 440Hz

    440Hz Старожил
    Команда форума Модератор

    С нами с:
    21 дек 2012
    Сообщения:
    8.003
    Симпатии:
    1
    Адрес:
    Оттуда
    +10
     
  10. S.t.A.M.

    S.t.A.M. Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    1.041
    Симпатии:
    0
    Прикольно!
    Правда в опере глючит, а в лисичке некорректно отображается, но это все лечится! )))
     
  11. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    В файрфоксе тоже глючит (1 в 1 как в опере).
     
  12. creage

    creage Активный пользователь

    С нами с:
    12 мар 2008
    Сообщения:
    131
    Симпатии:
    0
    Адрес:
    Киев
    только что проверил и фф и оперой - ничего не глючит. там по идее и глючить-то нечему - plain css и одна js-функция.

    а решение элегантное - автору риспект ). обожаю такие вот подходы, когда на первый взгляд нелегкие задачи решаются одним махом волшебной палочки.
     
  13. TheSingle

    TheSingle Активный пользователь

    С нами с:
    26 ноя 2007
    Сообщения:
    27
    Симпатии:
    0
    Адрес:
    Moscow
    Вот еще, почти идентичный скрипт для выпадающей менюшки. Работает в любом браузере одинаково.

    HTML:
    1.  
    [js]<script language="JavaScript" type="text/javascript">
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes;
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace (" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
    </script>[/js]


    [css]<style type="text/css">
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }

    ul li {
    position: relative;
    }

    li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }

    li:hover ul, li.over ul {
    display: block;
    }

    ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }

    ul li a:hover {
    color: red;
    background: silver;
    }


    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */

    </style>[/css]
    HTML:
    1.  
    2. </head>
    3.  
    4. <ul id="nav">
    5.     <li><a href="#">Home</a></li>
    6.     <li><a href="#">About</a>
    7.       <ul>
    8.         <li><a href="#">History</a></li>
    9.         <li><a href="#">Team</a></li>
    10.         <li><a href="#">Offices</a></li>
    11.       </ul>
    12.     </li>
    13.     <li><a href="#">Services</a>
    14.       <ul>
    15.         <li><a href="#">Web Design</a></li>
    16.         <li><a href="#">Internet
    17.             Marketing</a></li>
    18.         <li><a href="#">Hosting</a></li>
    19.         <li><a href="#">Domain Names</a></li>
    20.         <li><a href="#">Broadband</a></li>
    21.       </ul>
    22.     </li>
    23.     <li><a href="#">Contact Us</a>
    24.       <ul>
    25.         <li><a href="#">United Kingdom</a></li>
    26.         <li><a href="#">France</a></li>
    27.         <li><a href="#">USA</a></li>
    28.         <li><a href="#">Australia</a></li>
    29.       </ul>
    30.     </li>
    31.   </ul>
    32. </body>
    33. </html>
    34.  
     
  14. darkgod

    darkgod Активный пользователь

    С нами с:
    31 мар 2008
    Сообщения:
    201
    Симпатии:
    0
    Ребят, подскажите, может у кого уже имеется...

    Нужен вот такой скриптик вертикального меню: При нажатии на ссылку осуществляется переход по сссылке и снизу появляются подкатегории... Желательно чтобы скриптик еще при обновлении страницы оставлял подменю которое было открыто открытым и при переходе по другой ссылке основного меню, предыдущее подменю скрывалось...
     
  15. obsrv

    obsrv Активный пользователь

    С нами с:
    2 окт 2008
    Сообщения:
    238
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    darkgod
    может поможет
    Можно и скачать себе такую штуку и запускать локально.
     
  16. EvelRus

    EvelRus Активный пользователь

    С нами с:
    16 ноя 2006
    Сообщения:
    2.168
    Симпатии:
    0
    Адрес:
    Москва
    Только вот бага... работает только в не опере ;)))
     
  17. obsrv

    obsrv Активный пользователь

    С нами с:
    2 окт 2008
    Сообщения:
    238
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    Только что посмотрел в Opera 9.6.
    Созданные там меню - работают.
     
  18. darkgod

    darkgod Активный пользователь

    С нами с:
    31 мар 2008
    Сообщения:
    201
    Симпатии:
    0
    В принципе подобрал нужный вариант, но не до конца! Там при обновлении страницы или переходе по ссылке подменю убирается! Может кто подскажет как модифицировать чтобы не убиралось?
     
  19. obsrv

    obsrv Активный пользователь

    С нами с:
    2 окт 2008
    Сообщения:
    238
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    darkgod
    Если о QuickMenu, то:
    Нужен add-on для автораскрытия - простой кусочек JS, который сам по себе не паблишется, если не указать использование автораскрытия.
    Добавится в код он после того, как выбрать "Item Enhancements"/Item Extras/Show Sub Onload.
    Там просто надо поиграться: нажать на пункт в меню, потом в эти энхенсменты и отметить TRUE.
    Проверить, что игры закончились успешно.
    Потом делать PUBLISH проекты, где предлагается сохранить CSS, JS и HTML.
    Получается, можно заново пересобрать меню, а можно быстро слепить из пары вложенных и получить тот самый кусочек, который нужен.
    Добавления:
    1. появится еще один кусок JS кода, будет начинаться комментариями типа:
    "Add-On Code: Show Subs Onload" (его вставить под JS меню уже существующего)
    2. Измениться "Add-On Settings" (тоже в JS после Core)- добавятся две строки:
    // Show Subs Onload Add On
    a.showload_active = true;

    Вроде все.
    Теперь можно везде при загрузке в пункте меню который хотим держать открытым (ну и соотвственно по всему дереву)
    имзенять class="qmparent" на
    class="qm-startopen qmparent"
     
  20. darkgod

    darkgod Активный пользователь

    С нами с:
    31 мар 2008
    Сообщения:
    201
    Симпатии:
    0
    obsrv
    Почти, но не до конца... мне ненужно держать какой то определенный пункт пстоянно открытым.... Мне надо чтоб при переходе по ссылке подменю было открыто... А то когда перехожу по ссылке в подменю в модуль, меню сворачивается - это очень неудобно!
     
  21. obsrv

    obsrv Активный пользователь

    С нами с:
    2 окт 2008
    Сообщения:
    238
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    darkgod
    Я же указал - КУДА ДУМАТЬ.

    Воспользуйтесь JS или PHP (или еще чем).
    Меняйте атрибут class="qmparent" на class="qm-startopen qmparent" в зависимости от нужд.
     
  22. darkgod

    darkgod Активный пользователь

    С нами с:
    31 мар 2008
    Сообщения:
    201
    Симпатии:
    0
    Вот нашел более подходящее для меня меню...

    HTML:
    1. <style type="text/css">
    2. .menutitle{
    3. cursor:pointer;
    4. margin-bottom: 5px;
    5. background-color:#ECECFF;
    6. color:#000000;
    7. width:140px;
    8. padding:2px;
    9. }
    10.  
    11. .submenu{
    12. margin-bottom: 0.5em;
    13. }
    14.  
    15. <script type="text/javascript">
    16.  
    17. /***********************************************
    18. * Switch Menu script- by Martial B of [url=http://getElementById.com/]http://getElementById.com/[/url]
    19. * Modified by Dynamic Drive for format & NS4/IE4 compatibility
    20. * Visit [url=http://www.dynamicdrive.com/]http://www.dynamicdrive.com/[/url] for full source code
    21. ***********************************************/
    22.  
    23. var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    24. var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
    25.  
    26. if (document.getElementById){ //DynamicDrive.com change
    27. document.write('<style type="text/css">\n')
    28. document.write('.submenu{display: none;}\n')
    29. document.write('</style>\n')
    30. }
    31.  
    32. function SwitchMenu(obj){
    33.     if(document.getElementById){
    34.     var el = document.getElementById(obj);
    35.     var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
    36.         if(el.style.display != "block"){ //DynamicDrive.com change
    37.             for (var i=0; i<ar.length; i++){
    38.                 if (ar[i].className=="submenu") //DynamicDrive.com change
    39.                 ar[i].style.display = "none";
    40.             }
    41.             el.style.display = "block";
    42.         }else{
    43.             el.style.display = "none";
    44.         }
    45.     }
    46. }
    47.  
    48. function get_cookie(Name) {
    49. var search = Name + "="
    50. var returnvalue = "";
    51. if (document.cookie.length > 0) {
    52. offset = document.cookie.indexOf(search)
    53. if (offset != -1) {
    54. offset += search.length
    55. end = document.cookie.indexOf(";", offset);
    56. if (end == -1) end = document.cookie.length;
    57. returnvalue=unescape(document.cookie.substring(offset, end))
    58. }
    59. }
    60. return returnvalue;
    61. }
    62.  
    63. function onloadfunction(){
    64. if (persistmenu=="yes"){
    65. var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    66. var cookievalue=get_cookie(cookiename)
    67. if (cookievalue!="")
    68. document.getElementById(cookievalue).style.display="block"
    69. }
    70. }
    71.  
    72. function savemenustate(){
    73. var inc=1, blockid=""
    74. while (document.getElementById("sub"+inc)){
    75. if (document.getElementById("sub"+inc).style.display=="block"){
    76. blockid="sub"+inc
    77. break
    78. }
    79. inc++
    80. }
    81. var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    82. var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
    83. document.cookie=cookiename+"="+cookievalue
    84. }
    85.  
    86. if (window.addEventListener)
    87. window.addEventListener("load", onloadfunction, false)
    88. else if (window.attachEvent)
    89. window.attachEvent("onload", onloadfunction)
    90. else if (document.getElementById)
    91. window.onload=onloadfunction
    92.  
    93. if (persistmenu=="yes" && document.getElementById)
    94. window.onunload=savemenustate
    95.  
    96. </script>
    97.  
    98. <!-- Keep all menus within masterdiv-->
    99. <div id="masterdiv">
    100.  
    101.     <div class="menutitle" onclick="SwitchMenu('sub1')" >Site Menu</div>
    102.     <span class="submenu" id="sub1">
    103.         - <a href="new.htm">What's New</a><br>
    104.         - <a href="hot.htm">What's hot</a><br>
    105.         - <a href="revised.htm">Revised Scripts</a><br>
    106.         - <a href="morezone/">More Zone</a>
    107.     </span>
    108.  
    109.     <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
    110.     <span class="submenu" id="sub2">
    111.         - <a href="notice.htm">Usage Terms</a><br>
    112.         - <a href="faqs.htm">DHTML FAQs</a><br>
    113.         - <a href="help.htm">Scripts FAQs</a>
    114.     </span>
    115.  
    116.     <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
    117.     <span class="submenu" id="sub3">
    118.         - <a href="http://www.codingforums.com">Coding Forums</a><br>
    119.     </span>
    120.  
    121.     <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
    122.     <span class="submenu" id="sub4">
    123.         - <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
    124.         - <a href="http://www.freewarejava.com">Freewarejava</a><br>
    125.         - <a href="http://www.cooltext.com">Cool Text</a><br>
    126.         - <a href="http://www.google.com">Google.com</a>
    127.     </span>
    128.  
    129.     <img src="about.gif" onclick="SwitchMenu('sub5')"><br>
    130.     <span class="submenu" id="sub5">
    131.         - <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
    132.         - <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
    133.         - <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
    134.     </span>
    135.  
    136. </div>
    Только одно НО, как сделать чтобы сслыки подсвечивались при открытии подкатегории??? ну или можно даже чтобы подкатегория подсвечивалась, когда находимся в ней![/code]
     
  23. Тигренок

    Тигренок Активный пользователь

    С нами с:
    29 дек 2008
    Сообщения:
    133
    Симпатии:
    0
    Адрес:
    ты такой нарисовался?
    проблема решена :)
     
  24. tarantyl

    tarantyl Активный пользователь

    С нами с:
    27 май 2009
    Сообщения:
    20
    Симпатии:
    0
    раньше такая же проблема была:скачать скрипт называемый суперфиш, использует jQuery, как-бы оно то пофигу, на сайте все-равно юзается, но там была проблема ширина области ссылки была фиксированной, поставил auto, появились грабли, попросил верстальшика исправили за часика 2 и даже украсили... пример тут Волковыск кому нужно вышлю, вид этого меню легко настраивается
     
  25. tarantyl

    tarantyl Активный пользователь

    С нами с:
    27 май 2009
    Сообщения:
    20
    Симпатии:
    0