Dropdown Menü, verschwindet hinter Text, keine Punkte anwählbar
0 
Felix Riesterer
Dropdown Menü, verschwindet hinter Text, keine Punkte anwählbar
Hi Leute,
habe mich jetzt mal mit Dropdown-Menüs beschäftigt.
Laut Meinung einiger Leute, deren Tipps und Tutorials ich gelesen habe möchte ich das mit css machen.
Habe mir da einiges durchgelesen und ausprobiert, und verstehe nun einigermaßen was da nun steht =)
Sieht erstmal folgendermaßen aus:
<div id="menue">
<ul id="navi">
<li>
<a href="#">Willkommen</a>
</li>
<li>
<a href="#">Über uns</a>
<ul>
<li>
<a href="#">Angebot</a>
</li>
<li>
<a href="#">Geschichte</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
</ul>
</li>
<li>
<a href="#">Projekte</a>
<ul>
<li>
<a href="#">Alpha</a>
</li>
<li>
<a href="#">Beta</a>
</li>
<li>
<a href="#">Gamma</a>
</li>
</ul>
</li>
<li>
<a href="#">Impressum</a>
</li>
</ul>
</div>
.clear {
clear: both;
} #navi, #navi ul {
list-style-type: none;
margin: 0;
padding: 0;
} #navi li {
width: 128px;
float: left;
} #navi li ul {
display: none;
} #navi li:hover ul {
display: block;
} #menue {
height: 16px;
position: relative;
} #navi {
position: absolute;
} #navi li {
border: 1px solid #000;
margin: 0 32px 0 0;
} #navi ul li {
border: none;
margin: 0;
} #navi a {
font-weight: bold;
text-align: center;
display: block;
padding: 0.1em;
} #navi a:link, #navi a:visited {
color: #FFF;
background: #A8CFF0;
text-decoration: underline;
} #navi a:active, #navi a:hover {
color: #000;
background: #FFF;
text-decoration: none;
}
Ja, funktioniert auch soweit ganz gut (FF3)
Mein Problem ist jetzt aber, dass sich unter dem Menü ein weiteres Div befindet, mit dem ganzen Text halt. Wenn nun das Menü aufklappt, dann verschwindet es hinter dem Text. Desweiteren kann ich auch keinen Punkt davon anwählen, denn wenn ich den Mauszeiger von dem obersten Button (von wo alles aufklappt) wegbewege, also nach unten zu den Unterpunkten, dann klappt es wieder zu.
Was fehlt da im Code?
Danke im voraus.
-
Lieber Airwolf89,
habe mich jetzt mal mit Dropdown-Menüs beschäftigt.
Laut Meinung einiger Leute, deren Tipps und Tutorials ich gelesen habe möchte ich das mit css machen.ehrenwert!
Habe mir da einiges durchgelesen und ausprobiert,
Was denn? Etwa hier in SELFHTML (<http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=Dynamische CSS-Navigation für moderne Browser>)?
<div id="menue">
<ul id="navi">
...
</ul>
</div>Da ist ein <div> zuviel. Wenn außer der <ul> nix in dem <div> steht, dann brauchst Du das <div> nicht. Wenn in dem <div> später noch mehr steht, dann brauchst Du die ID in der <ul> nicht ("navi"), es sei denn, da steht später noch ein anderes ul-Element in dem <div>. Aber das nur nebenbei. > Mein Problem ist jetzt aber, dass sich unter dem Menü ein weiteres Div befindet, mit dem ganzen Text halt. Wenn nun das Menü aufklappt, dann verschwindet es hinter dem Text. Das liegt daran, dass das Text-<div> im HTML-Code nach Deiner Navi notiert ist, und damit diese überdeckt. Wenn Du die Reihenfolge dieser "Schichten" ändern möchtest, dann interessiert Dich die Eigenschaft "<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index>". > Desweiteren kann ich auch keinen Punkt davon anwählen, denn wenn ich den Mauszeiger von dem obersten Button (von wo alles aufklappt) wegbewege, also nach unten zu den Unterpunkten, dann klappt es wieder zu. > > Was fehlt da im Code? Das liegt wahrscheinlich daran, dass Du zwischen dem Oberpunkt und seinen Unterpunkten vorübergehend den visuellen Bereich des entsprechenden li-Elementes verlässt, woraufhin die :hover-Eigenschaft zwischenzeitlich nicht mehr greift, was den Menüpunkt wieder zuklappen lässt. Aber für eine genauere Hilfestellung (und wie Du Deinen Code anpassen müsstest) fehlt mir ein [online erreichbares Beispiel zum ausprobieren](/hilfe/charta.htm#tipps-fuer-fragende). Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
OK, danke. Nachdem ich das mit dem z-index gemacht hab hat sich auch das zweite Problem gelöst.
Vielen Dank. =)
-
OK, hätte da nochmal ne Frage.
Das Menü funktioniert ja soweit, aber kann ich es irgendwie so einrichten dass die Unterpunkte langsamer aufploppen?
JQuery hat ja so ne Funktion, aber ist das überhaupt so auf mein dropdown-menü mit der Liste anwendbar? Ich wüsste jetzt nicht wie ich das machen sollte, hat da jemand von euch ne Idee?
Danke im voraus.
-
Lieber Airwolf89,
wenn Du CSS zum dynamischen Aufklappen einsetzt, dann hast Du keine Kontrolle über die Bewegung an sich. Dazu müsstest Du JavaScript bemühen. Aber ob der Einsatz von JavaScript so sinnvoll ist...?
In jedem Fall solltest Du die CSS-basierte Lösung beibehalten, und mit JavaScript die bereits vorhandene Lösung nur "verschönern", um das CSS-gesteuerte Verhalten des Browsers zu ersetzen. Damit garantierst Du dann die ungeminderte Benutzbarkeit Deiner Seite auch bei nicht verfügbarem (weil z.B. deaktiviertem) JavaScript.
Um das CSS-gesteuerte Verhalten zu ersetzen, müsstest Du die CSS-Regeln, die mit dem Auf- und Zuklappen zu tun haben, gezielt "deaktivieren". Das könntest Du z.B. so machen, indem Du diese in ein eigenes Stylesheet schreibst (eigene CSS-Datei), das vom restlichen Layout getrennt notiert wird. Dein JavaScript könnte dieses Stylesheet dann aus dem Dokument entfernen, um seine eigene Logik zu implementieren.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-