dynamiczne menu (ie,opera,ff) Opcje

[Marrbacca]

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 
ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 180px; /* Width of Menu Items */ 
    border-bottom: 1px solid #ccc; 
    } 
 
ul li { 
    position: relative; 
    } 
 
li ul { 
    position: absolute; 
    left: 179px; /* Set 1px less than menu width */ 
    top: 0; 
    display: none; 
    } 
 
/* Styles for Menu Items */ 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: black; 
    background: #fff;  /* IE6 Bug */ 
    padding: 5px; 
    border: 1px solid #ccc; 
    border-bottom: 0; 
    } 
 
/* Fix IE. Hide from IE Mac \*/ 
* html ul li { float: left; height: 1%; } 
* html ul li a { height: 1%; } 
/* End */ 
 
ul li a:hover { color: blue; background: #f9f9f9; } /* Hover Styles */ 
 
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ 
 
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 
// 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", ""); 
   } 
  } 
  } 
} 
} 
window.onload=startList;
[HTML] pobierz, plaintext 

I jeszcze deklaracja menu w dokumencie html:

[HTML] pobierz, plaintext 
<ul id="nav"> 
  <li><a href="#">Pozycja 1</a></li> 
  <li><a href="#">Pozycja 2</a> 
    <ul> 
      <li><a href="#">Podpozycja 1</a></li> 
      <li><a href="#">Podpozycja 2</a></li>   
    </ul> 
  </li> 
  <li><a href="#">Pozycja 3</a></li> 
</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]

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]

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 :-)

Ten post edytował Zajec 22.01.2006, 11:24:29

[Vogel]

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/

[Marrbacca]

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 
ul {
	margin-top: 20px;
	margin-left: 5px;
	margin-right: 0px;
	padding: 0;
	list-style: none;
	width: 114px; /* Width of Menu Items */
	background-color: transparent;
}
 
ul li {
	position: relative;
	}
 
li ul {
	margin: 0;
	position: absolute;
	left: 113px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	background: #3A566C;
}
#nav2 li ul {
	margin: 0;
	position: absolute;
	left: -113px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	background: #3A566C;
}
 
/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #F4FFFF;
	background: #fff;  /* IE6 Bug */
	padding: 5px;
	border-bottom: 0;
	background-color: transparent;
	}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
 
ul li a:hover { color: #F4FFFF; background: #527898; } /* Hover Styles */
 
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
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 Ja nie wiem co się dzieje :

Ten post edytował Marrbacca 23.01.2006, 07:33:27