zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikales Menu vertikal ausklappen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.08.2012, 20:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2012
Beiträge: 1
maaarion befindet sich auf einem aufstrebenden Ast
Standard 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;}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.08.2012, 20:56
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von maaarion Beitrag anzeigen
Ich habe das ganze mit Definitionslisten realisiert, da meine Navigationslisten alle andere Farben haben.
Diese Begründung ist unsinnig. Markup und Darstellung haben nur minimale Schnittstellen. Die gewünschte Darstellung ist auch mit einfachen Listen möglich (das Markup ist dann sogar leserlicher).

Zitat:
Zitat von maaarion Beitrag anzeigen
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).
Du willst sagen, das Menü bliebe nicht geöffnet, wenn die Seite, auf die du verlinkt hast, geladen wurde?

Zitat:
Zitat von maaarion Beitrag anzeigen
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?
Moment. Was du beschreibst ist nicht möglich. Wie soll das Untermenü angezeigt werden, wenn es sich erst durch Klick auf sich selbst öffnet?

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.09.2012, 07:56
Benutzer
neuer user
 
Registriert seit: 14.09.2009
Beiträge: 88
Hook befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:02 Uhr.