auklappbares menü mit js
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
beschreiben
blocken
brauche
code
display
funktionieren
holder position
http
list
maus
paar
problem
quellcode
realisieren
schau
tag
text
url
verschwinden
-
Hi Leute,
wie kann ich mit JS einen Menüpunkt aufklppen lassen so dass man unter diesem Menüpunkt ohne Neuladen weitere Informationen anzeigen lassen kann so dass diese informationen auch noch sichtbar sind nachdem man die tag/maus">Maus wegbewegt hat. Falls die auch ohne JS gehen würde z.B. mit CSS wäre das sehr gut.
Beitrag geändert: 30.12.2008 10:29:58 von speckuntu -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mit Google zum Beispiel ;) Drop-Down-Menü.
Übrigens gehts auch ohne JavaScript mit CSS: http://www.cssplay.co.uk/menus/dd_valid.html
Und wenn mit JS: benutze docment.getElementById().style.display = "none/block" um teile der navi ein und aus zu blenden.
Beitrag geändert: 29.12.2008 20:27:45 von nikic -
ich habe diecss Variante genommen aber ich habe noch das problem das der menüpunkt nicht aufgeklappt bleibt wenn man ihn angeklickt hat :
html:
<div id="holder"> Menü<br /> <hr /> die information danach. die über mehrere Zeilengehen kannn. </div>
css:
#holder {position:absolute; top:50px; left:320px; width:100px; line-height:18px; height:20px; border:1px solid #f96; overflow:hidden; text-align:center; z-index:100; background:#eee;} #holder:hover {height:130px; cursor:pointer; background:#eee;} #holder a:visited, #holder a {display:block; width:100%; line-height:18px; color:#000; text-decoration:none;} #holder a:hover {color:#c00;background:#ddd;}
ich habe schon #holder:active verwendet nur das hat leider nicht funktioniert, was kann ich stadessen nehmen damit das Menü aufgeklappt bleibt nachdem man "Menü" angeklickt hat?
Beitrag geändert: 30.12.2008 10:31:14 von speckuntu -
Schau mal hier: http://www.google.de/search?hl=de&client=firefox-a&rls=org.mozilla%3Ade%3Aofficial&hs=kqv&q=javascript+aufklappbares+men%C3%BC&btnG=Suche&meta=cr%3DcountryDE
Die ersten tönen doch schon viel versprechend. Hab sie allerdings nicht ausprobiert.
Beitrag geändert: 30.12.2008 10:32:53 von jocko -
Also ich verstehe nicht so ganz, was du damit erreichen willst...
Wenn du ein CSS-Dropdown-Menü machen willst, solltest du das mit einer ungeordneen Liste machen.
Aber bei deinem Code check ich einfach nicht so ganz, was du damit machen willst...
Oder ealisiertst du etwas das Menü, indem du die Höhe vergrößerst, damit man das Menü sieht? -
Also wenn ich dich jetzt richtig verstehe möchtest du folgendes: Man klickt auf einen Link und danach klappt ein Menü aus.
Das ist meines Wissens nicht mit CSS zu realisieren. Das :active - was du meinest - ist genau der Zustand "wenn du auf etwas drückst" (also die linke Maustaste gedrückt hältst). Es meint nicht "wenn man etwas anklickt". Daher kommste eigentlich nur mit JS weiter.
Schau dir doch mal in der Lima-city Hilfe die ausklappbaren Sachen an. Soll es sowas sein. Das ist beispielsweise mit jQuery möglich. Da die meisten Browser Javascript aktiviert haben ist das auch kein Problem und sieht besser aus als irgendeine unstabile CSS Lösung. Denn da kommen noch die ganzen Browserprobleme auf dich zu!
Gruß -
es ist nicht ganz ein menü, sondern Überschriften und man soll die dazugehörenden Texte bzw. Details einblenden können, da sie jetzt aber wieder verschwinden wenn man mit der maus wegfährt brauche ich eine andere Lösung aber wie haben es die dann von http://www.cssplay.co.uk/menu/gallery_clickgeschafft das das bild bleibt nachdem man es angeklickt hat.
lg,
Speckuntu -
speckuntu schrieb:
es ist nicht ganz ein menü, sondern Überschriften und man soll die dazugehörenden Texte bzw. Details einblenden können, da sie jetzt aber wieder verschwinden wenn man mit der maus wegfährt brauche ich eine andere Lösung aber wie haben es die dann von http://www.cssplay.co.uk/menu/gallery_clickgeschafft das das bild bleibt nachdem man es angeklickt hat.
lg,
Speckuntu
Dann nehm ich das mal zurück. Es könnte möglichweise funktionieren mit :focus (und dem :active)! Kannst ja mal das was du hast hochladen, dann sieht man vielleicht ne Möglichkeit, falls es nicht gleich mit :focus funktioniert.
-
Das ist sehr wohl mit CSS möglich, aber nicht mehr ganz so trivial:
Es gibt zwei Möglichkeiten das zu realisieren:
1. mit :focus, aber ich weiß nicht wie das geht :(
2. mit :active und :hover in Verbindung mit einer ungeprdneten List. Und zwar wie folgt:
Wenn du auf ein Element klickst (li:active) machst du die untergeordnete Liste sichtbar li:active ul { display: block }. So bleibt sie aber nur BEIM Klick da. Lösen kan nman das mithilfe von margin und padding. Du verschiebst nähmlich das ul so, dass es über dem li ist und du somit im hover bleibst... li:hover ul { margin-top:20px; padding-top: 20px; display: block; } (Beispiel). Ist jetzt etwas schwer zu beschreiben was genau ich meine... -
verstanden was du meinst habe ich leider nicht aber mit focus hat es nicht funktioniert das der Text da bleibt nach dem ich es angeklickt habe und mit der Maus wieder weggefahren bin.
-
nikic schrieb:
Das ist sehr wohl mit CSS möglich, aber nicht mehr ganz so trivial:
Es gibt zwei Möglichkeiten das zu realisieren:
1. mit :focus, aber ich weiß nicht wie das geht :(
2. mit :active und :hover in Verbindung mit einer ungeprdneten List. Und zwar wie folgt:
Wenn du auf ein Element klickst (li:active) machst du die untergeordnete Liste sichtbar li:active ul { display: block }. So bleibt sie aber nur BEIM Klick da. Lösen kan nman das mithilfe von margin und padding. Du verschiebst nähmlich das ul so, dass es über dem li ist und du somit im hover bleibst... li:hover ul { margin-top:20px; padding-top: 20px; display: block; } (Beispiel). Ist jetzt etwas schwer zu beschreiben was genau ich meine...
Ja, man kann sich dabei aber auch die Zähne ausbeißen. Die zweite Möglichkeit müsste die von selfhtml sein: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern Man beachte die Überschrift "für moderne Browser". Also letztlich ist das auch nicht die beste Variante, da man je nach Browser Probleme hat. Mit IE 6 gehts beispielsweise nicht! Darunter findet man dann noch eine Lösung mit CSS und JS, was dafür sorgen soll, dass es diese Browserprobleme nicht gibt.
Was mir gerade auffällt. Nach einem Klick soll ja die li: hover ul geöffnet bleiben, auch wenn man nicht darüber fährt. Das geht bei dieser Lösung nicht!
-
sorry aber wo kannst du da <ul> bzw <li> sehen?
-
speckuntu schrieb:
sorry aber wo kannst du da <ul> bzw <li> sehen?
Die Frage ist wohl eher, wo du es nicht siehst?:D
Ich beziehe mich auf die Variante nikics und die von selfhtml.
Also ich hab mir mal jetzt etwas Arbeit gemacht und das ganze mit dem :focus probiert in der Art wie es auch bei dieser Bildergalerie gelöst ist. Ich hab dazu deinen Quellcode genutzt und etwas umgesetzt. Das Ergebnis kannste hier betrachten: http://werktags.lima-city.de/test/menu.html. Sieht natürlich etwas leer aus, aber so sollte es funktionieren. Hier nochmal Quellcode mit en paar Erläuterungen:
HTML:
<div id="holder"> <a href="#"> <h1>Klick</h1> <p>Hier Informatioenen dazu</p> </a> </div>
Das wichtige ist wohl, dass man alles, was man beim draufklicken sehen soll in das a-Tag einfügt. Denkbar und die wohl schönere Variante für ein Menü wäre die Umsetzung mit ul-Tags. Einfach dann zwischen die li einen Link definieren mit a und dazwischen kann dann alles mögliche stehen.
CSS:
#holder {position:absolute; top:50px; left:320px; width:100px;} #holder a {display: block;} #holder a p {display: none;} #holder a:hover p, #holder a:focus p {display: block; }
Die erste Zeile ist deine Ausrichtungszeile, hab mich dabei auf ein paar wesentliche Sachen beschränkt. Danach sollte der Link als Blockelement definiert werden und was in dem Link-Tag drinne ist einfach mit display: none entfernt werden. So dann kommt diese Sache mit dem hover und focus. Das macht nichts anderes als diese Bedingung zu erfüllen. Wenn ich mit der Maus über den Link fahre oder der Link gerade im Fokus steht (d.h. meist mit so einer gepunkteten Linie umfahren) zeige das p-Tag, ansonsten nicht.
Noch etwas zum gepunkteten Fokusrahmen. Dieser wird meines Erachtens mit dem Attribut outline angesprochen und kann mit dem Wer "none" versteckt werden. Ich glaube das funktioniert aber nicht bei allen Browsern.
Wesentlich schöner wäre es wohl immernoch mit JS! Du solltest wohl auf den Thread Titel umbenennt, da ja eigentlich kein JS benötigt wird.
Gruß
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
