поддерживая высшие меню в вертикальном положении - PullRequest
Новая
       23

поддерживая высшие меню в вертикальном положении

0 голосов
/ 28 августа 2009

Я видел этот вопрос, но не могу применить ответы к своему меню. Мое меню лохов в основном таково (http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html), Я сделал некоторые из своих собственных корректировок цвета / шрифта / и убирая границу из таблицы. Как сделать так, чтобы при перемещении по всему параметры выбора, все, что вы прошли, остается выделенным, чтобы вы знали, какие параметры вы выбрали, чтобы получить то, где вы находитесь? Я сделал проб и ошибок всех стилей, с которыми он пришел, как #nav, this и # nav, это, но ни один из них, кажется, не ссылается на все предыдущие меню одного элемента вложенного списка сразу.

Я в значительной степени учил этому сам, поэтому я старался быть как можно более ясным в своем вопросе, надеюсь, у меня есть смысл !!!

СПАСИБО ТАКОЕ!

Ответы [ 2 ]

1 голос
/ 13 января 2010

Вышеописанное прекрасно работает в Firefox, но не в IE, потому что IE не уважает наследование. Это делает так, чтобы цвет ссылки не оставался в цвете при наведении, когда вы перемещаете мышь к какой-либо другой части тега LI.

Код ниже не очень, но он работает:

HTML 

<ul id="nav">
 <li ><a href="test.org" class="navlink">Test</a>
             <ul>
         <li ><a href="test2.org">Test2</a></li>
                <li ><a href="test2.org">Test2</a></li>
             </ul>
        </li>
 <li ><a href="test.org" class="navlink">Bonk</a>
             <ul>
         <li ><a href="test2.org">Bonk2</a></li>
                <li ><a href="test2.org">Bonk2</a></li>
             </ul>
        </li>
</ul>

Javascript

sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   var els = this.getElementsByTagName("A");
   for (var j=0; j<els.length; j++) {
    if(els[j].className =="navlink") els[j].style.color = '#FFFFFF';
   }
   this.className+=" sfhover";
  }
  sfEls[i].onmouseout=function() {
   var els = this.getElementsByTagName("A");
   for (var j=0; j<els.length; j++) {
    if(els[j].className =="navlink") els[j].style.color = 'Red';
   }
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
1 голос
/ 29 августа 2009

Вам необходимо переместить цветовые стили из тега в теги : 

#nav li { /* all list items */
    ...
    background-color : white;
    color : black;
}
#nav li:hover,
li.sfhover{
    color : white;
    background-color : black;
    }

А также установите , чтобы он брал цвет у своего родителя: 

#nav li a {
    color:inherit;
}

Пожалуйста, ознакомьтесь с версией вашего примера, в которую внесены следующие изменения: http://demo.raleighbuckner.com/so/1347579/

Причиной этого изменения является то, что второй и третий уровни навигации являются потомками тега

, а не тега . Поэтому, когда вы перемещаетесь по подсписку, вы больше не зависаете над , а цвет больше не применим.

Перемещение стиля окраски до

позволяет парению оставаться в силе.
...