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?

[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