За последние 24 часа нас посетили 18522 программиста и 1626 роботов. Сейчас ищет 1161 программист ...

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

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

  1. ssh

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

    С нами с:
    15 апр 2009
    Сообщения:
    164
    Симпатии:
    0
    Воспользовался данным меню, добавил <span>, <li><span class="ra">&gt;</span><a href="#">About</a> &gt; - это стрека > , чтобы знать что конкретный раздел меню разложится.

    Во всех браузерах работает а в IE7 после > получается перевод строки, пример:

    >
    Home
    >
    About




    Как можно исправить данный баг?
     
  2. TheShock

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

    С нами с:
    30 май 2009
    Сообщения:
    1.255
    Симпатии:
    0
    Адрес:
    Київ
    Потому что <a href="#">About</a> - это блочный элемент. Нужно эту стрелку делать внутри него. Ну или в li с помощью стилей list- и картинки
     
  3. ssh

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

    С нами с:
    15 апр 2009
    Сообщения:
    164
    Симпатии:
    0
    TheShock
    Если стрелку вставлять внутрь блока, то работает, а если добавляешь стиль <span class="ra"> .ra {
    float: right;
    }

    чтобы стрелка отображалась у правого края меню, то она отображается на строчку ниже в IE7 и в FireFOX 3... , а в IE8 , Opera ver. 9, Google Chrome ver. 2 отображается корректно

    А если так <li><span class="ra">&gt;</span><a href="#">About</a> -вне блока, то проблема только в IE7!

    >
    Home
    >
    About

    Как сделать чтобы стрелка > ставилась на правый край без багов?
     
  4. ssh

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

    С нами с:
    15 апр 2009
    Сообщения:
    164
    Симпатии:
    0
    TheShock
    С меню вроде как разобрался, но есть 2 нюанса:
    В IE7 промежуток между строк больше чем в других браузерах

    Home
    -> промежуток между строк
    About


    Это происходит из-за CSS - html ul li a { height: 1%; } , если это убрать, то меню второго уровня будет выше обычного, но промежуток между строк становится нормальным.

    2-ой ньюанс в IE6 - меню 3-го уровня не разворачивает, за это отвечает JS:

    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", "");
    }
    }
    }
    navRoot = document.getElementById("nav2");
    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", "");
    }
    }
    }
    navRoot = document.getElementById("nav3");
    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", "");
    }
    }
    }
    navRoot = document.getElementById("nav4");
    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;

    У меня 2 подменю 2-го уровня разворачиваются, а одно подменю 3-го уровня не хочет "nav4".
     
  5. TheShock

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

    С нами с:
    30 май 2009
    Сообщения:
    1.255
    Симпатии:
    0
    Адрес:
    Київ
    Вижу, отсюда взяли? http://www.webmascon.com/topics/coding/42a.asp
    В принципе, неплохое решение, но рекомендую все-же использовать, скажем, jQuery

    На счет ксс - я бы глянул, но у меня сейчас internet explorer'a нету.
     
  6. ssh

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

    С нами с:
    15 апр 2009
    Сообщения:
    164
    Симпатии:
    0
    TheShock
    Ecли использовать эту строку в css,
    html ul li { float: left; height: 1%; }

    то промежуток между строк становится нормальным в IE7, но в меню со второго уровня , отображение будет такого типа - Home About в одну строчку...
    Должно быть так:
    Home
    About
     
  7. ssh

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

    С нами с:
    15 апр 2009
    Сообщения:
    164
    Симпатии:
    0
  8. Dark Smoke

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

    С нами с:
    17 авг 2008
    Сообщения:
    30
    Симпатии:
    0
    Адрес:
    Днепропетровск
    Добрый день.
    Помогите, с меню плиз.
    Есть меню:
    Количество разделов и подразделов заранее не известно. Но структура именно такая будет.
    PHP который формирует HTML
    PHP:
    1. while($row=mysql_fetch_array($razdel))
    2.         {
    3.             if ($subHead != $row[0])
    4.             {
    5.                  $subHead = $row[0];
    6.                  echo '<span class="active">',$subHead,'</span>';
    7.             }
    8.             echo '<a href="http://',$_SERVER['SERVER_NAME'],$_SERVER['PHP_SELF'],'?c=',$row[2],'">',$row[1],'</a>';
    9.         }
    jQuery
    [js]<script>
    $(document).ready( function() {
    $('#catalog2 a').hide();
    $("#catalog2 span").click(function(){
    $(this).next("a").slideToggle("fast")
    .siblings("a:visible").slideUp("fast");
    $(this).toggleClass("active");
    $(this).siblings("span").removeClass("active");
    });
    });
    </script>[/js]
    В таком виде открывается только одно подменю. А их там много.
     
  9. KikaSmile

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

    С нами с:
    3 май 2010
    Сообщения:
    1
    Симпатии:
    0
    Адрес:
    Ðîññèÿ
    Ìíîãîóðîâíåâîå ìåíþ

    Äëÿ ñàéòà ìíå íóæíî íàïèñàòü íåáîëüøîé ñêðèïò ñ âûåçæàþùèì ìåíþ. Ó ìåíÿ, ê ñîæàëåíèþ, íåò âðåìåíè ó÷èòü ñåé÷àñ java èëè äàæå ïðîñòî àäàïòèðîâàòü ãîòîâûé ñêðèïò.

    Ìîæåò êòî âîçüìåòñÿ íàïèñàòü íåáîëüøîé ñêðèïò çà ïëàòó?
     
  10. ssh

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

    С нами с:
    15 апр 2009
    Сообщения:
    164
    Симпатии:
    0
  11. haotichni

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

    С нами с:
    14 фев 2011
    Сообщения:
    67
    Симпатии:
    0
    Адрес:
    дома недалеких
  12. Chudo

    Chudo Новичок

    С нами с:
    2 май 2018
    Сообщения:
    2
    Симпатии:
    0
    Вложенное меню - это вложенный список HTML Можно чередовать li и ul неоднократно по принципу
    Код (Text):
    1.  
    2. ul
    3.    li
    4.    li
    5. ul
    6. ul li ul
    7.        ul li
    8.            li
    9.    li
    10.    li
    11. ul
    Выстроить классы основной - пункт - ссылка или более глубокие, если несколько уровней
    .основной
    .основной пункт
    .основной пункт ссылка
    тоже после нажатия (hover)

    в css скрыть видимость у необходимой строки-ссылки класса - точно по схеме посмотреть, что надо скрыть
    картинку добавить куда требуется в teg-и
     
    #37 Chudo, 2 май 2018
    Последнее редактирование модератором: 2 май 2018