|
|||
Vertikales Menu vertikal ausklappen
Hallo Ihr Lieben,
ich habe ein Problem. Ich habe eine vertikale Navigation erstellt, dessen Unterpunkte vertikal aufklappen. Etwa wie hier Stu Nicholls | CSSplay | A sliding definition list menu. Ich habe das ganze mit Definitionslisten realisiert, da meine Navigationslisten alle andere Farben haben. Mein Problem ist es jetzt, dass meine Unterpunkte nur sichtbar sind, wenn ich über den Überpunkt hover. Wenn ich dann auf ein Unterpunkt klicke, schließt sich die Navigation wieder und die nächst untere Navigationsüberpunkt öffnet sich (da der Mauszeiger jetzt auf dem Unteren ist, sprich der hover Effekt greift wieder). Wie schaffe ich es, dass meine Navigation erst aufklappt, wenn ich auf den Übermenupunkt klicke und viel wichtiger ist es, wie schaffe ich es, dass wenn ich auf einen Unterpunkt klicke, mein Untermenü aufgeklappt bleibt und sich nicht schließt? Habe schon alles ausprobiert. Jemand eine Idee? Hier in etwa mein HTML Code: <div id="navigation"> <ul id="navi"> <li> <dl class="list"> <dt><a href="./index.php?content=konzept" alt="Konzept">Konzept</a></dt> <dd><a href="/index.php?content=leitbild" alt="Leitbild">Leitbild</a></dd> <dd><a href="/index.php?content=betreuung" alt="Betreuungsmodelle">Betreuungsmodelle</a></dd> <dd><a href="/index.php?content=ernaehrung" alt="Ernährung">Ernährung</a></dd> </dl> </li> <li> <dl class="list2"> <dt><a href="/index.php?content=info" alt="Informationen">Informationen</a></dt> <dd><a href="/index.php?content=oeffnung" alt="Öffnungszeiten">Öffnungszeiten</a></dd> <dd><a href="/index.php?content=preise" alt="Preise">Preise</a></dd> <dd><a href="/index.php?content=leitung" alt="Leitung">Leitung</a></dd> <dd><a href="/index.php?content=traeger" alt="Träger">Träger</a></dd> </dl> </li> </ul> </div> im CSS: #navigation {height:10em; margin:15px 0 300px 17px; padding-top: 20px; font-size:11px; font-family:Verdana, Arial; float:left;} #navi {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:14em; background:#fff; z-index:auto;} #navi li {display:block; padding:0; margin:0; position:relative; z-index:100;} #navi li a, #navi li a:visited {display:block; text-decoration:none; font-size:11px;} #navi li dd {display:none;} #navi li:hover, #navi li a:hover {border:0;} #navi li:hover dt a , #navi li a:hover dt a {center center; color:#000; font-size:11px; text-decoration:underline; font-weight:bold; display:block;} #navi li:hover dd, #navi li a:hover dd {display:block; color:#000;} #navi li:hover dl, #navi li a:hover dl {height:auto; color:#000; display:block;} #navi table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;} #navi dl {width: 14em; margin: 0; background: #6f9c6f; cursorointer;} #navi dt {margin:0; padding: 0; font-size: 1.1em; border-top:0px solid #fff;} #navi dd {margin:0; padding:0; font-size: 1em; text-align:left; } .list dt a, .list dt a:visited { display:block; color:#000; padding:5px 5px 5px 10px; background:#f29400 ;} .list dd a, .list dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#f29400 url(/images/pfeil.gif) no-repeat 0px; } .list dd a:hover {font-weight:bold; color:#000;} .list dd a:current{display:block;} .list2 dt a, .list2 dt a:visited {display:block; color:#000; padding:5px 5px 5px 10px; background:#f8b332 center center;} .list2 dd a, .list2 dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#f8b332 url(/images/pfeil.gif) no-repeat 0px;} .list2 dd a:hover {font-weight:bold;color:#000;} |
Sponsored Links |
|
|||
Zitat:
Zitat:
Zitat:
Wenn du erreichen willst, dass das Untermenü geöffnet ist, wenn eine Seite darin geladen wurde, dann musst du dieses Problem noch auf dem Server lösen, indem du das Menü entsprechend als geöffnet markierst. Mit CSS alleine ist das derzeit nicht möglich. Bitte verwende zukünftig die [CODE*][/CODE]-Bereiche (ohne Sternchen).
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Hi,
wenn du so was meinst, wie das linke Menü auf dieser Beispielseite, dann empfehle ich das entsprechende Script zu nehmen. Das Aussehen gestaltest du dann mit einer beliebigen CSS. Peter |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Vertikales Menü: Submenüs und Richtung des Aufklappens | thomaspruess | CSS | 6 | 15.09.2011 16:38 |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
Drop Down Menu Positionsproblem | Schky | CSS | 4 | 21.04.2008 14:09 |
Problem mit vertikaler Navigation | Krissie | CSS | 0 | 15.08.2007 13:51 |