"aufklappbares" Dynamisches Menü

[Swiffe]

Hey Leute,

wie das bei angehenden Entwicklern so ist, gefällt einem die eigene Arbeit nach 10 Minuten nicht mehr. Nun hoffe ich das ihr mir helfen könnt. Ich möchte ein "aufklappbares" (dynamisches) Menü mittels CSS und eventuel PHP erstellen. Javascript behersche ich nämlich nicht. So sieht es aktuell aus:

Das Ziel ist das in dem Rahmen die Oberpunkte mit der Grafik zu sehen sind und bei einem MouseOver soll sich die entsprechenden Unterpunkte nach unten hin ausklappen. Kennt jemand da ein Tutorial bzw. eine Quelle von der ich sowas ableiten kann?

greetz Swiffe

[flashpixx]

Rein mit CSS und HTML ist das nicht möglich, denn das sind statische Komponenten. Also man kann HTML und CSS Eigenschaften via JavaScript manipulieren, d.h. in Deinem Fall musst Du eben bei einem MouseOver ein JavaScript starten, dass den Layer (div oder span) sichtbar schaltet und langsam vergrößert, ebenso das ganze wenn Du den Fokus verlierst rückgängig macht.

Alternativ kannst Du auch Flash für so etwas einsetzen

Als JavaScript-Einstieg könnte das was sein:

<script type=text/javascript>

function punkt1() {

 if(document.getElementByID('test1').style.visibility=='hidden') {

  document.getElementByID('test1').style.visibility='visible';

  document.getElementByID('test2').style.visibility='hidden';

  document.getElementByID('test3').style.visibility='hidden';

 }

}

function punkt2() {

 if(document.getElementByID('test2').style.visibility=='hidden') {

  document.getElementByID('test1').style.visibility='hidden';

  document.getElementByID('test2').style.visibility='visible';

  document.getElementByID('test3').style.visibility='hidden';

 }

}

function punkt3() {

 if(document.getElementByID('test3').style.visibility=='hidden') {

  document.getElementByID('test1').style.visibility='hidden';

  document.getElementByID('test2').style.visibility='hidden';

  document.getElementByID('test3').style.visibility='visible';

 }

}

</script>

<a href=# onclick=punkt1()>punkt 1</a>

<div id="test1">

Menu 1

</div>

<a href=# onclick=punkt2()>punkt 2</a>

<div id="test2">

Menu 2

</div>

<a href=# onclick=punkt3()>punkt 3</a> 

<div id="test3">

Menu 3

</div>

Bearbeitet 26. Februar 2010 von flashpixx

[Swiffe]

ich habe noch eine andere lösung gefunden:

#navi li ul { display:none; }

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

allerdings verhindern andere konfigurationen in der css datei das die obrigen erfüllt werden können.

[flashpixx]

Damit werden aber nur einzelne li Elemente ein- und ausgeblendet und eine Animation, sprich ein Aufklappen, ist nicht möglich

[unbenannt]

Javascript behersche ich nämlich nicht.

Dann benutze ein Framework, um Dir das Code-Schreiben zu erleichtern, z.B. jQuery

Das Ausklappen könnte dann mit click- statt mouseover-Event folgendermaßen aussehen:

$("#navi li").click(function () {

	$(this).next("ul").slideToggle("slow");

});

(ungetestet)

[Swiffe]

danke an alle erstmal für eure posts. Die Animationsidee habe ich auf später verworfen da es mit

#navi li ul { display:none; }

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

auch recht schön aussieht.

Kann ich ein hover auch auf eine Überschrift anwenden?

Laut Css4you geht das:

Normaler Weise wird :hover für Hyperlinks eingesetzt, laut der W3C-Spezifikation ist diese Eigenschaft aber für alle Elemente zugelassen und so kannst du Mouseover-Effekte z.B. auch für Formularfelder, Tabellenzellen und <div>-Container definieren.

bei mir funktioniert das allerdings nicht.

Bearbeitet 27. Februar 2010 von Swiffe
text hinzugefügt

[eR1K1]

Glossy Accordion könnte vllt ein Ansatz für dich sein.

[unbenannt]

Kommt auf Code und Browser an. IE 6 beispielsweise hat hover nur bei a-Tags zugelassen. Wie es danach ausschaut, weiß ich nicht. Ohne den Code zu kennen ist aber auch sonst alles recht spekulativ. Rein auf CSS-Basis ist so ein dropdown allerdings etwas unschön und nicht so einfach, wenn es in allen Browsern funktionieren soll.

[anna969]

in der schule haben wir das drop down menü gemacht

(hier als beispiel:)

im html eine box (div id="navigation")

<body>

<div id="navigation">

<ul id="ebene01">

<li id="navi01" class="aktuell"><a href="Pferde.html">Pferde</a>

<ul class="ebene02">

<li id="navi0101"><a href="Hufe.html">Hufe</a></li>

<li id="navi0102"><a href="Ponys.html">Ponys</a></li>

<li id="navi0103"><a href="Fell.html">Fell</a></li>

</ul>

</li>

<li id="navi02"><a href="Hunde.html">Hunde</a>

<ul class="ebene02">

<li id="navi0201"><a href="Pfoten.html">Pfoten</a></li>

<li id="navi0202"><a href="Welpen.html">Welpen</a></li>

<li id="navi0203"><a href="Fell.html">Fell</a></li>

</ul>

</li>

<li id="navi03"><a href="Katzen.html">Katzen</a>

<ul class="ebene02">

<li id="navi0301"><a href="Tatzen.html">Tatzen</a></li>

<li id="navi0302"><a href="Babykatzen.html">Babykatzen</a></li>

<li id="navi0303"><a href="Schnurbarthaare.html">Schnurbarthaare</a></li>

</ul>

</li>

</ul>

</div> <!-- navigation schließt --></div>

</body>

im css dann (externes stylesheet! also im html head:<link rel="stylesheet" type="text/css" href="Navi.css" media="screen" />)

* {margin:0px;

padding:0px;}

html {height:101%;}

body {font-size:100.01em;}

#navigation {font-family:Verdana, Arial, Helvetica, sans-serif;

overflow:hidden;

background-color:#FF9;

font-size:12pt;

margin-top:9px;}

#navigation li {float:left;

list-style-type:none;

width:auto;

padding:5px;}

#navigation li a {text-decoration:none;

color:#000;

display:block;}

#navigation li a:hover,

#navigation li a:focus,

#navigation li.aktuell a {background-color:ff9;

color:#000;}

#navigation li li {clear:both;}

#navigation li ul {display:inline;

position:absolute;

top:-9999px;

left:-9999x;

width:0px;

height:0px;

background-color:transparent;}

#navigation li:hover ul {position:absolute;

top:auto;

left:auto;

width:auto;

height:auto;

color:#fff;

background-color:ff9;

display:block;}

#navigation li:hover ul a {color:#000;}

#navigation li ul li a:hover {color:#F99;}

hoffe es funktioniert bei dir =)

bei mir ist leider am linken rand nen abstand aber den bekomm ich noch weg =)