Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Menu oparte o css, problem z a:hover
Jarod
post
Post #1





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 5)
mike
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----


whatever:hover
Go to the top of the page
+Quote Post
Jarod
post
Post #3





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----


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..?
Go to the top of the page
+Quote Post
mike
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
Jarod
post
Post #5





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----


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?
Go to the top of the page
+Quote Post
revyag
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----


http://www.xs4all.nl/~peterned/examples/cssmenu.html
popatrz w źródło.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 25.08.2025 - 16:24