Ein- und Ausblenden mithilfe CSS 'hover' und 'visiblility'
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bedenken
befehl
bild
blocken
code
display
eigenschaft
halten
http
information
objekt
problem
problemlose navigation
punkt
sinn
stadt
umfassenden box
url
wert schreiben
zeitplan
-
Hy Leute, ich weis nicht weiter:
Ich würde gerne 2 Boxen (die orangenen im Bild) von meinem Homepagemenü nur dann einblenden/ausklappen lassen, wenn man mit der Maus über die Passende graue Box fährt. Ich hab versucht die Befehle "visibility: hidden;" und "visibility: visible;" so passend in den div-Box-Befehlen einzubauen, dass es funktioniert, aber ich komm einfach nicht auf den richtigen Pfad.
Ich hab mal zur Vereinfachung alles Unwichtige herausgelöscht, damit man sich besser zurecht findet und hier mal hoch geladen:
Hier die Links:
http://www.mrzibzn.lima-city.de/problem/default2.css
http://www.mrzibzn.lima-city.de/problem/yyy.htm
Die orangefarbenen Boxen sollen normalerweise ausgeblendet sein und der Punkt Stadt genauso aussehen, wie ein anderer, bis man mit dem Mauszeiger über ihn fährt. Nur in dem Fall soll dann das ganze so ausgeblendet sein wie jetzt. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
#submenue { display: none; } #submenue:hover { display:block; }
Ich hoffe ich hab dich richtig verstanden -
<html> <head> <link rel="stylesheet" media="screen,projection" title="Standardstylesheet" href="default2.css" type="text/css"> <script> function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = 'inline'; } } </script> </head> <body> <!--Kopf der Seite bis zum Menue--> <div class="menuepunkt">Informationen</div> <div class="menuekategorie" onclick="toggle('stadt')">Stadt <span id="stadt" style="display: none;"> <div class="submenue">Geschichte</div> <div class="submenue">Bilder</div> </span> </div> <div class="menuepunkt">Zeitplan</div> <div class="menuepunkt">Route</div> <!--Rest der Seite--> </body> <html>
Ich weiß nicht ob ein Mouseover hier Sinn machen würde. Es wäre schwierig, das Menü offen zu halten und gleichzeitig eine problemlose Navigation zu ermöglichen.
Beitrag zuletzt geändert: 31.5.2010 19:11:49 von fabo -
mator-kaleen schrieb:
Naja, wenn ich's ausblende ist es ja nicht da, dass ich drüber fahren könnte. Ansonsten wär die Lösung ja nicht schlecht. Was ich suche, ist ein Objekt-übergreifender Befehl, welcher in 'menuekategorie:hover' steht, sich aber auf das 'submenue' auswirkt.
Ich hoffe ich hab dich richtig verstanden#submenue { display: none; } #submenue:hover { display:block; }
Ich weis nicht wie ich es erklären soll: In VisualBasic würde ich in 'menuekategorie:hover' den Befehl 'submenue.visibility = block' ganz nach dem Prinzip 'Objekt [Punkt] Eigenschaft [Ist] Wert' schreiben, aber da VB damit überhauptnix zu tun hat geht das so auch nicht.
===============
fabo schrieb:
Das Script zum Ausklappen finde ich nicht schlecht, aber es erfordert halt einen Klick mehr. Danke, auf eine Lösung mit Script war ich bei dem Problem noch gar nicht gekommen.
Ich weiß nicht ob ein Mouseover hier Sinn machen würde. Es wäre schwierig, das Menü offen zu halten und gleichzeitig eine problemlose Navigation zu ermöglichen.
Deine Bedenken wegen einer problematischen Navigation durch die beiden Punkte versteh ich allerdings nicht, da der Mauszeiger zwar zwischen den submenues wechselt, aber in der alles umfassenden Box 'Stadt' weiterhin mit einem Sicherheitsabstand drin bleibt -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <style type="text/css"> body { font-family: arial, sans-serif; margin: 10px 0 0 10px; } ul#navigation, ul#navigation li ul { list-style: none; } ul#navigation { width: 172px; } ul#navigation li { padding: 5px 10px; background: #cecece; color: #e00000; border: 1px solid white; } ul#navigation li ul { display: none; } ul#navigation li:hover ul { display: block; } </style> </head> <body> <!--Kopf der Seite bis zum Menue--> <ul id="navigation"> <li>Informationen</li> <li>Stadt <ul> <li>Geschichte</li> <li>Bilder</li> </ul> </li> <li>Zeitplan</li> <li>Route</li> </ul> <!--Rest der Seite--> </body> </html>
Meintest Du das so? Hab' nur mal eben schnell das Grundgerüst gecodet, die Farbanpassung wirst Du wohl hinbekommen...
Beitrag zuletzt geändert: 31.5.2010 23:47:54 von bvb-fanclub-nr1-in-sundern -
mrzibzn schrieb:
mator-kaleen schrieb:
Naja, wenn ich's ausblende ist es ja nicht da, dass ich drüber fahren könnte. Ansonsten wär die Lösung ja nicht schlecht. Was ich suche, ist ein Objekt-übergreifender Befehl, welcher in 'menuekategorie:hover' steht, sich aber auf das 'submenue' auswirkt.
Ich hoffe ich hab dich richtig verstanden#submenue { display: none; } #submenue:hover { display:block; }
Ich weis nicht wie ich es erklären soll: In VisualBasic würde ich in 'menuekategorie:hover' den Befehl 'submenue.visibility = block' ganz nach dem Prinzip 'Objekt [Punkt] Eigenschaft [Ist] Wert' schreiben, aber da VB damit überhauptnix zu tun hat geht das so auch nicht.
===============
fabo schrieb:
Das Script zum Ausklappen finde ich nicht schlecht, aber es erfordert halt einen Klick mehr. Danke, auf eine Lösung mit Script war ich bei dem Problem noch gar nicht gekommen.
Ich weiß nicht ob ein Mouseover hier Sinn machen würde. Es wäre schwierig, das Menü offen zu halten und gleichzeitig eine problemlose Navigation zu ermöglichen.
Deine Bedenken wegen einer problematischen Navigation durch die beiden Punkte versteh ich allerdings nicht, da der Mauszeiger zwar zwischen den submenues wechselt, aber in der alles umfassenden Box 'Stadt' weiterhin mit einem Sicherheitsabstand drin bleibt
Dann benutz halt onmouseover an Stelle von onclick ;) -
Ich schau mich für solche Sachen immer auf CSSPlay um. Vielleicht hilft dir folgender Link weiter: http://www.cssplay.co.uk/menus/slide_definition.html Hier erfolgt ebenfalls eine Ein-/Ausblendung der Untermenüpunkte.
-
http://www.lima-city.de/thread/aufklappbares-menue-mit-css-ohne-javascript-auch-fuer-den-ie
da steht ein ähnliches Thema mit weiterer Hilfe
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
