✔ Ausgeklapptes Listenmenü soll sich wieder ausblenden

[akdesign]

Hallo Maik und alle anderen,

ich habe mir nun ein neues CSS-LIstenmenü erstellt:

http://www.kessler-creativdesign.de/neu/frischemarkt_baur_copy.html


Jetzt würde ich gerne haben, dass wenn man auf einen anderen Menüpunkt geht, also z.B. Industrie, sich das aktive Menü Food wieder zusammenklappt.

Hier der Code:

/* CSS Document */

ol { /* reset to get a base */
        list-style:       none;
        padding:          0;
        margin:           0;
        width:            200px;
}



li a {
        color: #557390;
		text-decoration: none;

}




li ol {
        display:          none;
}




li:hover ol {
        display:          block;
		
}


li.active ol {
        display:          block;

}


.projekt_aktiv {
color: #990000
}



#link { 
  color: #003366;
  text-decoration: none; 
  font-weight: bold;
} 

#linkover { 
  color: #990000;
  font-weight: bold;
  text-decoration: none; 
} 

#link_inaktiv { 
  color: #5a6975;
  text-decoration: none; 
  font-weight: bold;
} 

#link_inaktivover { 
  color: #990000;
  font-weight: bold;
  text-decoration: none; 
}

Danke für Deine Hilfe.

Andrea

 

[Maik]

Hi.

Jetzt würde ich gerne haben, dass wenn man auf einen anderen Menüpunkt geht, also z.B. Industrie, sich das aktive Menü Food wieder zusammenklappt.

Wenn beim Klick auf den Menüpunkt "Industrie" eine neue Seite aufgerufen wird, "wandert" die Klasse .active im Navigationsmenü entsprechend weiter, sodass das Untermenü von "Food" geschlossen, und das von "Industrie" geöffnet wird.

Wenn die Prozedur ohne Verweise zu den entsprechenden Seiten ablaufen soll, müsstest du hier Javascript hinzuziehen, um das Auf- und Zuklappen der Untermenüs zu steuern.

mfg Maik

 

[akdesign]

Hallo Maik,

auf Dich ist halt Verlass.

Nein, keine neue Seite.

Schau mal, ich hatte das hier schon mal hinbekommen, mit Layer einblenden:

http://www.kessler-creativdesign.de/sicherung/frischemarkt_baur.html


Aber dann kamen mir Deine mahnenden Worte wieder ins Gedächtnis, von wegen nicht mit Tabellen, und dann hab ich's jetzt nochmal neu angelegt.

Ich hatte das zwar schon versucht, so zu übernehmen, aber die Menüpunkte reagieren nicht auf dieses hier:

<li class="navi_inaktiv"><span onMouseOver="MM_showHideLayers('Navi_Food','','hide','Navi_Industrie','','show')">Industrie</span></li>

Also werd ich's wohl so lassen müssen?



Andrea

 

[Maik]

Auch dort kommt dir Javascript zu Hilfe, denn mit CSS können die Untermenüs nicht in dieser Wechselwirkung geöffnet und geschlossen werden

Hier mal ein alternatives Beispiel, das deinen (technischen) Vorstellungen entgegenkommt: Vertical sliding menu #1 using jQuery

mfg Maik

 

[Maik]

... oder jQuery - vertical concertina fixed height #5, wo ebenfalls beim Seitenaufruf eines der Untermenüs geöffnet ist

mfg Maik

 

[akdesign]

OK, also nur mit JS.

Aber warum funktioniert diese Mouseover-Funktion bei der einen Variante, und bei der anderen dann nicht?


Andrea

 

[Maik]

Ganz einfach, http://www.kessler-creativdesign.de/sicherung/frischemarkt_baur.html nutzt JS, um beim Überfahren eines Menüpunkts sein Untermenü zu öffnen, und parallel das geöffnete Untermenü eines anderen Menüpunkts zu schliessen.

In deiner eingangs genannten Seitenfassung ist kein solches JS enthalten, und so bleibt das Untermenü von "Food" auch weiterhin geöffnet, wenn ein anderes Untermenü geöffnet wird, denn das <li>-Element von "Food" besitzt ja weiterhin die Klasse .active, die Folgendes regelt:

li.active ol {
        display:          block;

}

mfg Maik

 

[akdesign]

Ahh doch, ich glaub, ich kriegs hin.

Hatte auch die JS-Funktion nicht mit reinkopiert.

Muss dann nur schauen wegen der Platzierung an der richtigen Stelle, aber es könnte hinhauen.

Muss ich die nächsten Tage mal versuchen.

Danke Dir auf jeden Fall, hast mir wieder mal auf die Sprünge geholfen.


Andrea

 

[akdesign]

Hmm, warum versetzt es mir die divs, die ich dann einblende, immer genau um die Breite nach links?

Hast Du vielleicht eine Idee?

http://www.kessler-creativdesign.de/neu/frischemarkt_baur_copy2.html

#Navi_Food {
	float: right;
	padding-right: 3px;
	padding-top: 30px;
	width: 200px;
	height:400px;
	z-index:15;
	cursor:pointer;
	overflow: hidden;

}

#Navi_Industrie {
	float: right;
	visibility: hidden;
	padding-right: 3px;
	padding-top: 30px;
	width: 200px;
	height:400px;
	z-index:15;
	cursor:pointer;
	overflow: hidden;

}

#Navi_Technik {
	float: right;
	visibility: hidden;
	padding-right: 3px;
	padding-top: 30px;
	width: 200px;
	height:400px;;
	z-index:15;
	cursor:pointer;
	overflow: hidden;

}

#Navi_Medizin {
	float: right;
	visibility: hidden;
	padding-right: 3px;
	padding-top: 30px;
	width: 200px;
	height:400px;
	z-index:15;
	cursor:pointer;
	overflow: hidden;

}

 

[Maik]

Vielleicht liegt's an dem DIV-Block #linie_weiss, der sich im HTML-Code nun plötzlich zwischen den Menüpunkten wiederfindet, und durch seine float:right-Regel vom nachfolgenden Element linksseitig umflossen werden soll.

In den beiden anderen Seitenfassungen befindet sich dieses Element an ganz anderen Stellen des HTML-Codes.

mfg Maik