CSS/HTML aufklappbares menü

[ClOuDy.]

oft durchgekaut, jedoch nach stunden langem googlen und probieren kam ich noch zu keiner lösung. eventuell kann mir ja jemand hier meinen denkfehler zeigen.

2 sachen:

1. ich habe ein div indem ein bild ist, beim anklicken des bildes soll sich darunter ein formularfeld aufklappen.

bsp.

<div>
<ul>
<li> <a href="#">-bild-</a> "(display:block)"
<ul>
<li> formular </li> "(display: none)"
</ul>
</li>
</ul>
</div>

das formular bekommt im style ein "display:none" und das bild ein "display:block", nun hab ich schon verschiedene sachen probiert das es funktioniert. mit a:active usw, relativer positionierung und und und...ich bekomms nicht hin.

2. das gleiche mit einem einfachen menü will auch nicht gelingen.

bsp:
<div>
<ul>
<li> <a href="#">sichtbarer link</a>
<ul>
<li> <a href="link">link2</a> </li>
<li> <a href="link">link3</a> </li>
</ul>
</li>
</ul>
</div>

hier schaffe ich es ebenfalls nicht das per mausklick oder per mouseover aufklappen zu lassen.

Ich habe schon so viele lösungen gelesen und versucht aber an irgend einem punkte scheitere ich die ganze zeit und ich weis echt nicht warum.

eine lösung und gute erklärung wäre sehr nett, bitte keine links.

[MrSm!th]

ich denke was du meinst ist eine Art CoolMenu! Das ist ein aufklappbares Menü
Leider ist das so mit html oder CSS nicht möglich! dafür brauchst du java script!
also kannst du nochmal google verwenden aber diesmal mit "javascript coolmenu" da dürftest du schon das muster script finden^^ ansonsten noch muster script dazu

[ClOuDy.]

die 2. möglichkeit geht sicher ohne java, nur bin ich am rätseln ob es ander ersten möglichkeit evtuell scheitert weil da in den aufklappenden elementen keine links drin sind...

[ClOuDy.]

hier mal eine kurze und knappe hilfe von jemanden, die mich leider nicht weiter gebracht hat, aber evtl steigt hier einer durch:

geschachtelte liste - erst eben = hauptnavi
2. eben - also die liste in der liste - ist das aufklappbare menu
diese ist mit display: none;
und wenn du bei aktivierter 1. ebene dem entsprechden li z.B. eine Klasse "active" mitgibst, dann kannst du die 2. ebene mit display:block anschalten

im entwurf hart reinschreiben
kurz mal code
<ul>
<li class="active">
<a href="#">1. Ebene</a>
<ul>

[MrSm!th]

also meine javascript zeit war ziemlich kurz und mein letztes html/css projkt ist etwas länger her aber ich bin mir 100%ig sicher dass ein coolmenu nur durch js geht! ich habe auch in einem css forum 20 mal die frage gelesen wie ein coolmenu geht und jedes mal kam das musterscript als antwort^^

zu der aussage, dass die 2. möglichkeit gehen "muss":

wie soll sie denn? wenn du einen link anklickst verweist er auf eine andere seite! wenn du per mausklick nur etwas aufklappen lassen willst musst du es per js machen! oder kennst du noch eine funktion von links?

[Adroxxx]

Googe is your friend dude.

[MrSm!th]

sag ich ja java script^^

[Adroxxx]

Originally Posted by xhelloselm

sag ich ja java script^^

Nur der zweite Link ist mit Javascript. Die anderen sind reines CSS. Würde dann auch nur mit CSS machen. Javascript suckt hard wenn man das menü damit macht.

[ClOuDy.]

Originally Posted by xhelloselm

zu der aussage, dass die 2. möglichkeit gehen "muss":

wie soll sie denn? wenn du einen link anklickst verweist er auf eine andere seite! wenn du per mausklick nur etwas aufklappen lassen willst musst du es per js machen! oder kennst du noch eine funktion von links?

klar gehts, sieht man bei stu nichols, jedoch hab ich keine ahnung warum es bei ihm geht und bei mir nicht.

danke für die links aber in der tat, ich kann googlen. folglich kenne ich die links, das hilft mir trotzdem nich bei meinem problem.

[Adroxxx]

Dann poste mal deine CSS bzw den Teil der für das Menü zuständig ist und poste den HTML code wo du es benutzt. Sonst kann dir auch nur schlecht geholfen werden.

[ClOuDy.]

Da es, wie ich es befürchtet habe, anscheinend nicht mit klicken OHNE js geht - habe ich es einfach mit :hover gemacht.

Wobei es schon mit klick geht, jedenfalls nach Stu Nochills, jedoch blicke ich bei ihm nicht durch. Entweder steht nicht alles relevante in seinem Quelltext oder ich habe Tomaten auf den Augen. Eventuell kann mir ja da einer helfen.

Hier ist so ein Beispiel:



Dieses ist mit js aber es soll ja auch ohne gehen.

[ClOuDy.]

Hier noch die Lösung durch :hover, falls es irgendwam mal helfen kann:

HTML

<ul id="dropdown">
<li><a href="#nogo">text</a>
<ul>
<li> text2</li>
<li> text3</li>
</ul>
</li>
</ul>

CSS

#dropdown a {
display: block;
}

#dropdown li ul {
display: none;
}

#dropdown li:hover ul {
display: block;
}

Das Ziel im <a>-Tag ist egal, habe einfach #nogo geschrieben.
In die <li> kann man reinsatzen was man möchte.

Wenn man das noch weiter verschachtelt möchte muss man das css erweitern.
Das ganze funktioniert ohne Problem im: IE7, Opera 10, FF 3.5, Safari 4.x
Außer in älteren Versionen vom IE sollte das ganze auch funktionieren.

Hoffe das hilft vll mal jemanden
Und jemand kann mir helfen...

[MrSm!th]

ja du hast tomaten auf den augen^^
hast du dir den quelltext von deiner beispielseite mal angesehn?
da ist doch auch javascript drin

[ClOuDy.]

liest du auch alles was ich schreib? deinem post nach zu urteilen .. nein.

eventuell etwas unglücklich ausgedrückt...aber stu nicholls kanns ohne js.

[MrSm!th]

oh ja sry den letzten satz unter dem link habe ich nicht gesehn^^