Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu oparte o css, problem z a:hover
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Jarod
Męczę się z menu. Mam ładny kod ale pod IE nie jest do końca tak jakbym chciał (niby drobnostka a przeszkadza).

Najpierw podam kod a później postaram się dokładnie opisać w czym jest problem.

HTML
  1. (...)
  2. (...)
  3. (...)
  4. <!-- Skrypt do rozwijania menu dla IE -->
  5. <script type="text/javascript"><!--//--><![CDATA[//><!--
  6.  
  7. sfHover = function()
  8. {
  9. var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  10. for (var i=0; i<sfEls.length; i++)
  11. {
  12. sfEls[i].onmouseover=function()
  13. {
  14. this.className+=" sfhover";
  15. }
  16. sfEls[i].onmouseout=function()
  17. {
  18. this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  19. }
  20. }
  21. }
  22. if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>
  23.  
  24. (...)
  25. (...)
  26. (...)
  27. <!-- Menu rozwijane -->
  28. <div id="bloknawigacyjny">
  29. <ul id="nav">
  30. <li><a href="#" onmouseover="document.odziez.src='layout/odziez2.gif'" onmouseout="document.odziez.src='layout/odziez.gif'"><img src="layout/odziez.gif" width="75px" height="33px" name="odziez" alt="Odzież" border="0" /></a>
  31. <ul>
  32. <li> <a href="#">T-Shirt</a> </li>
  33. <li> <a href="#">Koszulki Polo</a> </li>
  34. <li> <a href="#">Bluzy</a> </li>
  35. <li> <a href="#">Polary</a> </li>
  36. <li> <a href="#">Wiatrówki</a> </li>
  37. <li> <a href="#">Czapki</a> </li>
  38. <li> <a href="#">Hafty</a> </li>
  39. </ul>
  40. </li>
  41.  
  42. </ul>
  43. </div>


CSS
Kod
#bloknawigacyjny {
                  margin: 0 1px;  
      padding: 0;              
}
#nav li {
         float: left;
         background-image: url(../layout/odziez.gif);
}
#nav li ul {
      position: absolute;
            width: 5em;
            left: -999em;
}
#nav li ul li {
               background-image: none;
               background-color: #F9F9F9;
               width: 140px;
               border-left: 1px #BEBEBE solid;
               border-right: 1px #BEBEBE solid;
               border-bottom: 1px #BEBEBE solid;
}
#nav, #nav ul {
               padding: 0;
               margin: 0;
               list-style: none;
}
#nav a {
        display: block;
}
#nav li ul li:hover {
                     background-color: #9ED235;
}

}
#nav li ul li a {
                 padding: 4px 0;
                 padding-left: 10px;
     font-family: Arial, Helvetica, Verdana sans-serif;
                 font-size: 11px;
     color: #666666;
                 text-decoration: none;
}
#nav li:hover ul {
                  left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
                                      left: auto;
}


Po najechaniu myszką na rozwinięty element menu jest on podświetlany..
W Operze i FF działa tak -> KLIK

Natomiast w IE działa tak (nie podświetla): -> KLIK


Więc do kodu css dodałem jeszcze taki fragment:
Kod
#nav li ul li a:hover {
                     background-color: #9ED235;
}


Brawo działa w IE!!

I TERAZ SEDNO SPRAWY

Żeby w IE zadziałało podświetlenie wskazanego elementu rozwiniętej listy trzeba dokładnie najechać na test (który jest linkiem z text-decoration: none). Wystarczy że wskaże myszą w danym polu LI ale poza linkiem podświetlenie znika i całość wyglada tak jakby się nie podświetlały elementy rozwiniętego menu.

Wiem, że IE interpretuje tylko a:hover.

Ma ktoś pomysł jak to obejść. Bardzo mi zależy na tym kodzie bo jest on bardzo przejrzysty
mike
whatever:hover
Jarod
Cytat(mike_mech @ 2006-03-22 09:58:25)

Czy mógłbyś przerobić ten kod który podałem bo nie zabardzo wiem o co chodzi..?
mike
Cytat(J4r0d @ 2006-03-22 12:37:54)
Czy mógłbyś przerobić ten kod który podałem bo nie zabardzo wiem o co chodzi..?

No ale tu nic nie trzba przerabiać. Wykaż trochę woli i przeczytaj to co Ci podesłałem a nie zobaczyłeś trochę tekstu, włączyła się żarówka: ocho, trzeba myśleć. I walisz posta na forum.
Przecież tam masz gotowca.

Sprawa rozbija się o dodanie deklaracji do styli dyrektywy behavior
i skopiowaniu odpowiedniego pliku .htc
Jarod
Cytat(mike_mech @ 2006-03-22 11:41:50)
No ale tu nic nie trzba przerabiać. Wykaż trochę woli i przeczytaj to co Ci podesłałem

Sprawa rozbija się o dodanie deklaracji do styli dyrektywy behavior
i skopiowaniu odpowiedniego pliku .htc

Czytałem to ale nie wiem jak to zrobic.

Czy możesz napisać dokładnie co i jak?
revyag
http://www.xs4all.nl/~peterned/examples/cssmenu.html
popatrz w źródło.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.