DropDown mit klick
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
after
ausprobieren
auswahl
auto
befehl
blicken
blocken
code
container
dank
display
durchblick
element
frage
funktion
layout
navigation
null
problem
text
-
Hi hab nun mein gewünschtes drop down menu und klappt auch alles super ohne js oder flash.
nun kommt aber das problem.
Gibts eine möglichkeit dieses untermenu erst nach einem klick auf den menu head zu öffnen??
Oder muss ich jetzt auf js oder ahnliches zurück greifen ?
das menu:
HTML
<ul id="Navigation" > <li><h2>Menu</h2> <ul> <li><a href="//">Link1</a></li> <li><a href="//">Link2</a></li> <li><a href="//">Link3</a></li> </ul> </li> <li><h2>Teamspeak</h2></li>
CSS
ul#Navigation a { display: block; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; height: auto; width: auto; text-align: left; font-size: 14px; vertical-align: middle; background-color: #3d3d3d; color: Silver; } ul#Navigation a:hover, a:active { display: block; text-decoration: none; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; height: auto; width: auto; text-align: left; vertical-align: middle; color: Red; } ul#Navigation { margin: 0; padding: 0; } ul#Navigation li { display: inline; list-style: none; margin: 0; padding: 0; clear: both; } ul#Navigation li ul { margin: 0 ; padding: 0; clear: both; } ul#Navigation li ul li { margin: 0; clear: both; } /* WICHTIG */ ul#Navigation li>ul { display: none; top: 20px; } ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul { display: block; }
Beitrag zuletzt geändert: 26.9.2009 16:14:30 von psd -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich glaube du kannst das mit :focus statt mit :hover oder :active machen. musste einfach mal ausprobieren!
-
Ich habe das jetzt für mich mal eine Stunde rumgetestet und keine Lösung gefunden. Egal ob mit :visited, :focus, :link, :after u.s.w....
Ich schätze um Jacascript kommst Du da nicht herum, weil keine Pseudoklasse greift.
Gruß Tom -
tom-moeller schrieb:
Ich habe das jetzt für mich mal eine Stunde rumgetestet und keine Lösung gefunden. Egal ob mit :visited, :focus, :link, :after u.s.w....
Ich schätze um Jacascript kommst Du da nicht herum, weil keine Pseudoklasse greift.
Gruß Tom
genau das habe ich auch gemacht aber mit java kenn ich mich leider nicht aus und komm somit auch nicht an einen onClick code
-
Ja, du brauchst da JavaScript!
Ist grundsätzlich relativ einfach. Man müsste nur wissen wie das DropDown Verhalten sein soll. Im einfachsten Fall legst du auf die onclick Eigenschaft deine Funktion zum anzeigen des Untermenus und speicherst ab welches DropDown Menu zur Zeit aktiv ist.
Bei Fragen zum JS Code kann ich dir behilflich sein. -
psd schrieb:
genau das habe ich auch gemacht aber mit java kenn ich mich leider nicht aus und komm somit auch nicht an einen onClick code
Es gibt doch in den ganzen Scriptpools im Netz schon fertige Sachen, mal Tante G fragen.
Appropos...... javascript ist nicht java.....
Ich würde z.B. alles über DIV-Container lösen und mir über DW ein Javascript basteln lassen, dass mir die DIVs dann mit einem Eventhandler bei onClick öffnet und schließt. Nachteil ist, dass es nicht so sauber ist, wie Du es Dir wünschst und, dass die Überschrift "Menu" ein Link sein muss, ein # oder besser javascript:; damit die Seite nicht nach oben rutscht, falls das Menu im unteren Teil der Seite ist. Aber mit einer passenden CSS Formatierung läßt sich das verstecken.
Gruß -
UL/LI sowie DL/DD/DT für Navigations Elemente ist schon das optimale. Es kommt jetzt halt darauf an wie sein Dropdown aufgebaut ist und ob da noch Effekt mit hinein sollen. Danach ist es zu entscheiden ob UL oder DL verwendet werden sollte und das Javascript ist das kleinste Problem ^^
-
java - javascript oO
ja das wusste ich und meinte ich.
DW(dreamweaver ??) kommt nicht in frage da ich durch meine codes blicken will
bis jetzt hab ich eigentlich alles selbst geschrieben und sollte auch so bleiben oder eben eine erklärung welcher befehl was auslöst.
die scriptpools sind nicht ganz mein fall -.- da ich durch diese nicht mehr durchblick also durch die Codes.
gibts nicht ein einfachen coder der mir egal was ( einstellbar) nach einem klick öffnet und nach einem weiteren wieder schliest ohne
das layout zu zerstören einfach div über div legen ??
danke für eure antworten . -
mein tipp ist jQuery.
Binde einfach diesen code noch in dein head- tag ein:
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("ul#Navigation h2").click(function () { $("ul#Navigation li ul li").slideToggle("slow"); }); }); </script>
dadurch wird dein menue ein und ausgeblendet. falls das script nicht funktioniert usst du nochmal den pfad zu dem auslöser bzw. zum ziel anpassen. hoffees hilft dir.
gruß
Daniel
ps.: bei fragen einfach stellen.
-
psd schrieb:
DW(dreamweaver ??) kommt nicht in frage da ich durch meine codes blicken will
Ich meine, Du sollst ja nicht das Layout in DW machen, sondern Dir das JS erstellen lassen. Das Layout bleibt unberürt. Und dann kannst Du Dir den Code anschauen und analysieren was warum wie funktioniert.
bis jetzt hab ich eigentlich alles selbst geschrieben und sollte auch so bleiben oder eben eine erklärung welcher befehl was auslöst.
die scriptpools sind nicht ganz mein fall -.- da ich durch diese nicht mehr durchblick also durch die Codes.
Das Selbe gilt für die Scriptpools. Warum das Rad neu erfinden, wenn ein anderer es schon mal gemacht hat und man dadurch lernen kann.
Wenn evil-devil oder goldeneye Dir hilft, ist das ja auch nichts anderes, na ja, außer dass Du ihn sofort fragen kannst was er da für Dich geschrieben hat.
Gruß -
psd schrieb:
nach einem klick öffnet und nach einem weiteren wieder schliest ohne
function drop(name) { if (name === null) return false; var obj = document.getElementById(name); if (obj === null) return false; obj.style.display = obj.style.display === 'block' ? 'none' : 'block'; }
Idealerweise sollte das Untermenu dann mit einer ID und style="display: none" vorbelegt sein. -
evil-devil schrieb:
psd schrieb:
nach einem klick öffnet und nach einem weiteren wieder schliest ohne
function drop(name) { if (name === null) return false; var obj = document.getElementById(name); if (obj === null) return false; obj.style.display = obj.style.display === 'block' ? 'none' : 'block'; }
Idealerweise sollte das Untermenu dann mit einer ID und style="display: none" vorbelegt sein.
ähm danke dafür aber das ist genau das was ich nicht wollte ich als nicht könnner blick da reingarnicht mehr durch ^^
@goldeneye ok durchblicken tu ich da auch nciht aber nachvollziehen kann ichs einiger maßen aber:
versuch eins - einfach eingesetzt und gespeichert / durch meine css drop down gabs problem -> css definitionen rausgenommen ( fürs dropdown) jetzt ist das menu offen und wenn ich auf h2 klicke klappt es sich zusammen aber sofort wieder auf oO ?? hilfe
-
Öhm, PSD, das ist das einfachste was man machen kann. Du übergibst der Funktion den ID-Namen des Untermenus und die Funktion schaut dann nach ob du einen Namen übergeben hast und ob es im DOM ein Element mit der besagten ID finden kann. Wenn nicht passiert nicht.
Hat es aber das Element gefunden, dann wird überprüft wie sein CSS Display Wert gesetzt ist und entweder wird es dann sichtbar oder eben unsichtbar gemacht. Ganz simpel.
Du musst lediglich die Funktion ins HTML einfügen...
<li onclick="drop('sub-menu')"><h2>Menu</h2> <ul id="sub-menu"> <li><a href="//">Link1</a></li> <li><a href="//">Link2</a></li> <li><a href="//">Link3</a></li> </ul> </li> <li onclick="drop('sub-teamspeak')"><h2>Teamspeak</h2> <ul id="sub-teamspeak"> <li><a href="//">Serverliste</a></li> </ul> </li>
Ganz einfach gehalten. -
das ist doch mal eine antwort wie sie lange keiner mehr geschrieben hat
Erklärung
exaktes beispiel
danke
wenn alles klappt bekommste ehren platz in dem copyreight hehe
/** edit aber es klappt nicht nun haut es mit mein komplettes css raus hmmm
/****edit klappt das auch bei div containern ?? ohne das sich etwas verschiebt ??
Beitrag zuletzt geändert: 1.10.2009 14:12:46 von psd -
Sehe gerade...hab das
bei den Untermenu ULs vergessen. Sonst sind die ja von Anfang an sichtbar ^^"style="display: none;" -
Nur als Information: Man kann es mit CSS machen. JavaScript ist deutlich einfacher, natürlich, da die CSS-Variante ein wenig Überlegung erfordert.
Ein möglicher Ansatz:
Man klickt, die active-Pseudoklasse wird aufgerüfen. Wenn die Maustaste wieder oben ist verschwindet es natürlich. Damit das Menü offen bleibt nutzt man zusätzlich zum :active noch ein :hover.
Hier mal ein Pseudo-CSS-codeansatz:
li:active ul {
display: block;
}
li ul:hover {
display: block;
}
Alles was man machen muss, ist das Sub-UL über das übergeordnete LI zu verschieben.
Wenn dich interessiert, wie man das genau macht, kann ich dir einen konkreten Code geben.
MfG -
@ nikic
klar interresiert es mich möchte so wenig wie möglich javascripts verwenden eine reine css html seite die sich sehn lassen kann hehe.
egal wie lange es braucht
also wichtig ist mir das ich :
Menu auswahl
- link1
- link2
Menu auswahl
das untereinander ! damit wenn ich auswahl 1 auf hab auswahl 2 nach unten mit verschiebt usw.
-
nikic schrieb:
Hier mal ein Pseudo-CSS-codeansatz:
li:active ul {
display: block;
}
Damit schließt du den IE schon mal gänzlich aus. Denn Hover/Active auf LI und anderen non A Elementen geht zwar ab IE7, aber bisher hab ich da nur schlechte Erfahrungen mit gemacht. Dann müsste man mit A und display: block fürs A herum tricksen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
