Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: dynamiczne menu (ie,opera,ff)
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Marrbacca
21.01.2006, 21:47:44
Mam kilka problemów dotyczących skryptu dynamicznego menu znalezionego w którymś z tematów na forum. Może na początek trochę kodu: 
[HTML] pobierz, plaintext 
  1. ul { 
  2.     margin: 0; 
  3.     padding: 0; 
  4.     list-style: none; 
  5.     width: 180px; /* Width of Menu Items */ 
  6.     border-bottom: 1px solid #ccc; 
  7.     } 
  8.  
  9. ul li { 
  10.     position: relative; 
  11.     } 
  12.  
  13. li ul { 
  14.     position: absolute; 
  15.     left: 179px; /* Set 1px less than menu width */ 
  16.     top: 0; 
  17.     display: none; 
  18.     } 
  19.  
  20. /* Styles for Menu Items */ 
  21. ul li a { 
  22.     display: block; 
  23.     text-decoration: none; 
  24.     color: black; 
  25.     background: #fff;  /* IE6 Bug */ 
  26.     padding: 5px; 
  27.     border: 1px solid #ccc; 
  28.     border-bottom: 0; 
  29.     } 
  30.  
  31. /* Fix IE. Hide from IE Mac \*/ 
  32. * html ul li { float: left; height: 1%; } 
  33. * html ul li a { height: 1%; } 
  34. /* End */ 
  35.  
  36. ul li a:hover { color: blue; background: #f9f9f9; } /* Hover Styles */ 
  37.  
  38. li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ 
  39.  
  40. li:hover ul, li.over ul { display: block; } /* The magic */
[HTML] pobierz, plaintext


A tutaj skrypt js, z tego co zrozumiałem to jest on potrzebny do wyświetlania menu w IE: 
[HTML] pobierz, plaintext 
  1. // JavaScript Document 
  2. startList = function() { 
  3. if (document.all&&document.getElementById) { 
  4. navRoot = document.getElementById("nav"); 
  5. for (i=0; i<navRoot.childNodes.length; i++) { 
  6. node = navRoot.childNodes[i]; 
  7. if (node.nodeName=="LI") { 
  8. node.onmouseover=function() { 
  9. this.className+=" over"; 
  10.   } 
  11.   node.onmouseout=function() { 
  12.   this.className=this.className.replace(" over", ""); 
  13.    } 
  14.   } 
  15.   } 
  16. } 
  17. } 
  18. window.onload=startList;
[HTML] pobierz, plaintext


I jeszcze deklaracja menu w dokumencie html: 
[HTML] pobierz, plaintext 
  1. <ul id="nav"> 
  2.   <li><a href="#">Pozycja 1</a></li> 
  3.   <li><a href="#">Pozycja 2</a> 
  4.     <ul> 
  5.       <li><a href="#">Podpozycja 1</a></li> 
  6.       <li><a href="#">Podpozycja 2</a></li>   
  7.     </ul> 
  8.   </li> 
  9.   <li><a href="#">Pozycja 3</a></li> 
  10. </ul>
[HTML] pobierz, plaintext

I teraz pytania.
1. Co zrobić, żeby można było użyć takiego menu "dwa razy" (w szablonie portalu - dwa boczne menu, w środku treść), tak, by menu wyświetlane po lewej stronie rozwijało się w praw, a menu wyświetlane po prawej stronie rozwijało się w lewo?
2. Czy taki skrypt będzie poprawnie wyświetlany w tych 3 najpopularniejszych przeglądarkach, czy raczej spróbować coś innego? Co byście radzili w takim przypadku?
ArturS
22.01.2006, 02:32:47
Masz link do "chodzącego" menu z przedstawionym kodem? Jak nie, to szybciej będzie wyszukać odpowiadającego wymaganiom "gotowca", np z Dynamicdrive (skrypty sa opisane pod jakimi przeglądarkami latają) i zmodyfikować go zależnie od potrzeb. Trochę takich gotowców lata po necie.
Zajec
22.01.2006, 11:23:00
Cytat(ArturS @ 2006-01-22 02:32:47)
Masz link do "chodzącego" menu z przedstawionym kodem? Jak nie, to szybciej będzie wyszukać odpowiadającego wymaganiom "gotowca", np z Dynamicdrive (skrypty sa opisane pod jakimi przeglądarkami latają) i zmodyfikować go zależnie od potrzeb. Trochę takich gotowców lata po necie.

Jak masz cos polecać to porządnego. Menu obecnie używane przez Marrbacca jest jednym z najbardziej poprawnych standardowo i działa bez JS.


Na temat:

1) Drugie menu zrób z jakimś innym id, np. id="nav2".

2) Skrypt JS rozszerz o działanie dla jeszcze jednego id, np.
Kod
// JavaScript Document
startList = function() {

if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}

if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav2");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}

}
window.onload=startList;


3) Aby menu rozwijało się w lewo spróbuj w CSS dać
Kod
#nav2 li ul {
left: auto;
right: 0;
}
a gdyby nie zadziałało, to może coś takiego:
Kod
#nav2 li ul {
left: -100px;
}


4) Gdybyś przy czymś utknął, najlepiej podac adres strony :-)
Vogel
22.01.2006, 11:42:40
Cytat(Zajec @ 2006-01-22 12:23:00)
Jak masz cos polecać to porządnego. Menu obecnie używane przez Marrbacca jest jednym z najbardziej poprawnych standardowo i działa bez JS.

dokladnie. ale zrezygnowałbym z JS dla IE i wymusilbym na nim poprawne stosowanie "hoover". Jak to zrobic?
http://www.xs4all.nl/~peterned/csshover.html
http://www.seoconsultants.com/css/menus/tutorial/

winksmiley.jpg
Marrbacca
22.01.2006, 22:29:56
EDIT: Aj ja to jednak głupi jestem... Już sobie ze wszystkim poradziłem, wielkie dzięki za wszystkie odpowiedzi

Wielkie dzięki za odpowiedzi.
już myślałem, że wszystko dobrze, a jednak znów musiałem coś namieszać. Teraz to już bardziej temat do css, bo menu wyświetla się prawidłowo w IE, ale Firefox i Opera źle je interpretują. Zresztą zobaczcie sami: Strona
Menu po prawej jest wyświetlane jak normalna lista...
Jeszcze raz pli css:
[HTML] pobierz, plaintext 
  1. ul {
  2. 	margin-top: 20px;
  3. 	margin-left: 5px;
  4. 	margin-right: 0px;
  5. 	padding: 0;
  6. 	list-style: none;
  7. 	width: 114px; /* Width of Menu Items */
  8. 	background-color: transparent;
  9. }
  10.  
  11. ul li {
  12. 	position: relative;
  13. 	}
  14.  
  15. li ul {
  16. 	margin: 0;
  17. 	position: absolute;
  18. 	left: 113px; /* Set 1px less than menu width */
  19. 	top: 0;
  20. 	display: none;
  21. 	background: #3A566C;
  22. }
  23. #nav2 li ul {
  24. 	margin: 0;
  25. 	position: absolute;
  26. 	left: -113px; /* Set 1px less than menu width */
  27. 	top: 0;
  28. 	display: none;
  29. 	background: #3A566C;
  30. }
  31.  
  32. /* Styles for Menu Items */
  33. ul li a {
  34. 	display: block;
  35. 	text-decoration: none;
  36. 	color: #F4FFFF;
  37. 	background: #fff;  /* IE6 Bug */
  38. 	padding: 5px;
  39. 	border-bottom: 0;
  40. 	background-color: transparent;
  41. 	}
  42.  
  43. /* Fix IE. Hide from IE Mac \*/
  44. * html ul li { float: left; height: 1%; }
  45. * html ul li a { height: 1%; }
  46. /* End */
  47.  
  48. ul li a:hover { color: #F4FFFF; background: #527898; } /* Hover Styles */
  49.  
  50. li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
  51.  
  52. li:hover ul, li.over ul { display: block; } /* The magic */
[HTML] pobierz, plaintext


Edit: no i już się w IE nie wyświetla. A przecież chyba nic nie zrobiłem. A jeśli zrobiłem to wróciłem do poprzedniego stanu sad.gifsad.gif Ja nie wiem co się dzieje : sadsmiley02.gif
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.