✔ Navigationsmenü umbauen

[Romsl]

Hi,

da fällt mir leider auch keine gute Überschrift ein, die das ganze kurz und prägnant erklärt.

Ist es mit viel Aufwand verbunden dieses Menu:

http://www.web-toolbox.net/webtoolbox/menues/click-expand/menue-aufklappen02.htm

so umzubauen, dass nicht jedesmal der gesamte Inhalt der Seite nach unten verschoben wird? Also wie ein Menu aus einem Programm, das dann über den Inhalt gelegt wird.

Gruß

Romsl

 

[Gumbo]

Es sind eigentlich nur zwei zusätzliche CSS-Eigenschaften nötig:

#containerul {
	position: relative;
}
#containerul ul {
	position: absolute;
}

 

[con-f-use]

Soweit ich das überblicke musst du nur die Listen absolut postitionieren und dann sollte es gehen.

 

[Romsl]

Hi,

#containerul li {
  position: absolute;
}

#containerul {
	position: relative;
}
#containerul ul {
	position: absolute;
}

es funktioniert leider mit beiden nicht :/ Bei der zweiten Variante wird alles verschoben. Die erste funktioniert da besser, allerdings gibt es auch hier kleine Verschiebungen. Ich verwende das nav04.htm aus der zip.

Gruß

Romsl

 

[Maik]

Gumbos Vorschlag funktioniert einwandfrei: beim Öffnen eines Submenüs wird der nachfolgende Seiteninhalt nicht (mehr) verschoben.

Es bedarf lediglich einiger Ergänzungen im CSS-Code, damit zum einen der IE die Submenüs unter (und nicht neben) den Topmenüs einblendet und zum anderen die modernen Browser beim Öffnen der Subsubmenüs die nachfolgenden Submenü-Einträge nach unten verschieben:

• Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000

#containerul{
position: relative;
margin:0px;                          
padding:0px;                         
}

#containerul ul{
position: absolute;
margin:0px;
color: #000000;
font-family:Verdana,Arial,Helvetica;
font-size:10px;
text-decoration:none;
padding:0px;                          
list-style-type:none;                
}

#containerul li{
margin:0 0 0 20px;                   
color: #5F5F5F;
font-family:Verdana,Arial,Helvetica;
font-size:11px;
text-decoration:none;
text-transform: none;
padding:0;                           
list-style-type:none;                
width: 120px;
}

* html #containerul ul li ul { /* Für IE */
position: absolute;
left: 20px;
top: 15px;
}

#containerul ul li ul li ul {
position: relative;
left: 0;
top: 0;
}

 

[Romsl]

Im Firefox gibts noch Probleme

Er stellt die MenuItems rechts von den Einträgen dar.

Habe es mit

#containerul ul li ul {
  margin:20 0 0 0px;
  position: relative;
}

versucht, dann funktionierts im Firefox, aber dafür nicht mehr im IE.

 

[Maik]

Hast du meinen CSS-Code "eins-zu-eins" übernommen?

Firefox und all die anderen nicht-IE-Browser richten bei mir die Submenüs unter den Topmenüs aus.

Mit welcher FF-Version hast du die Seite getestet?

Hier nochmal meine Testumgebung: Win2k, Firefox 1.5, IE 6.0, Mozilla 1.7, Netscape 7.0, Opera 8.5.

Anmerkung: es muß margin:20px 0 0 0 lauten.

 

[Romsl]

Es funktioniert.

Meine Güte, wie beschämend ist denn das.

Hatte wohl noch eine ältere Einstellung irgendwo versteckt.

Danke Dir für Deine Hilfe.

 

[Romsl]

Hallo,

Eigentlich gehört das ganze ja jetzt ins JavaScript Forum, aber es bezieht sich eben nochmal auf diese Menu-Komponente.

Kann man das ganze auch so erweitern, dass das Menu auch aufgeklappt wird wenn man auf den Text klickt (allerdings nur wenn es Unterpunkte hat)

Habe es schon mit

for(var o = 0; o < temp.getElementsByTagName("li").length; o++) {

      var li_elem = temp.getElementsByTagName("li")[o];

    if(li_elem.getElementsByTagName("ul").length > 0){

        li_elem.onclick = function() {
		  showhide(this);
                  //alert("1: " + this.data);
		  writeCookie();
		}

      temp2 = document.createElement("span");
      temp2.className = "symbols";
      temp2.style.backgroundImage = (cookieArray.length > 0) ? ((cookieArray[cookieCount] == "true") ? "url(minus05.gif)" : "url(plus05.gif)") : "url(plus05.gif)";
      temp2.style.cursor = 'pointer';
      
      temp2.onclick = function(){
        //alert("2: " + this.parentNode.data);
        //showhide(this.parentNode);
        //writeCookie();
      }

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }

      cookieCount++;

    }

versucht. Aufklappen geht, aber sobald ich ein weiteres Untermenü aufklappen möchte, schließt sich das ganze Menu. Bei erneutem öffnen ist es aber geöffnet worden.

Danke

 

[Romsl]

Hi,

bekomme leider keine zufriedenstellende Lösung zustande.

Ich möchte dieses Menü anstatt mit Mausklicks zu öffnen und zu schließen, das ganze mit MouseOver und MouseOut haben. Desweiteren möchte ich nicht nur, dass es bei diesen Icons aufklappt sondern auch bei der Beschriftung. Aber es will einfach nicht wie ich will

Hat jemand einen Tipp?

Gruß

Romsl