Ich möchte folgendes Menü machen:

-Menüpunkt 1
-Menüpunkt 2
-Menüpunkt 3
-Menüpunkt 4

Wenn man beispielsweise mit dem Mauscursor auf "Menüpunkt 2" geht soll ein Rollovereffekt stattfinden, der die Submenüpunkte direkt darunter einblendet und die restlichen Menüpunkte ["Menüpunkt 3" und "Menüpunkt 4"] nach unten verschiebt, wie hier:

-Menüpunkt 1
-Menüpunkt 2
l-Submenüpunkt1
l-Submenüpunkt2
l-Submenüpunkt3
-Menüpunkt 3
-Menüpunkt 4


Meine Frage: Kann man dies rein nur mit CSS lösen?! Ich habe bis jetzt nach Tutorials gegoogelt, aber keins gefunden, bei denen sich die Menüpunkte dynamisch verschieben bei aufklappen. Wenn mans lösen kann, weiss jemand ein schönes Tutorial oder ne Beispielseite?

Hi!

Pures CSS: http://www.cssplay.co.uk/menus/slide_definition.html

Das ist genau das,was ich gesucht habe. Leider find eich auf der Seite keinerlei Tutorial oder Code zu dem Menü. Oder seh ich bloss wieder den Wald vor lauter Bäumen nicht?!

Dann werf mal einen Blick in den Quelltext der Seite.

Kann man dieses Menü auch in horizontaler Richtung machen?! Mit dem ganzen ausklappen und dynamischen verschieben und nur mit CSS?!

Meinst du mit "horizontaler Richtung" http://www.cssplay.co.uk/menus/flyoutt.html, oder http://www.cssplay.co.uk/menus/fly_drop.html, oder vielleicht http://www.cssplay.co.uk/menus/drop_definition3.html ...?

Weder noch,ich meine das Menü: http://www.cssplay.co.uk/menus/slide_definition.html
jedoch nicht vertikal angeordnet sondern horizontal. Dreh es einfach gedanklich um 90Grad. Alles andere soll so exakt gleich funktionieren:

Menüleiste:

-Menüpunkt 1 -Menüpunkt 2 -Menüpunkt 3 -Menüpunkt 4


..und wenn man beispielsweise über Menüpunkt 2 mit der Maus drüber geht werden die Untermenüpunkte sichtbar und schieben Menüpunkt 3&4 gleichzeitig weiter nach rechts:

-Menüpunkt 1 -Menüpunkt 2 [-Submenüpunkt 1 -Submenüpunkt 2] -Menüpunkt 3 -Menüpunkt 4

Das Stylesheet funktioniert in allen modernen Browsern incl. IE7, bis auf die 5er- und 6er-Baureihe des IE, die die allgemeingültige Pseudoklasse li:hover nicht unterstützen.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

ul {   margin: 0;   padding: 0;   list-style-type: none; }   ul, li {   display: inline; }   ul#nav li ul {   display: none; }   ul#nav li:hover ul {   display: inline; }   ul#nav li a {   background: #e3e3e3;   padding: 5px;   font-weight: bold;   color: #000;   text-decoration: none; }

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<ul id="nav">     <li><a href="#">menu 1</a>              <ul>                  <li>submenu 1.1</li>                  <li>submenu 1.2</li>              </ul>     </li>     <li><a href="#">menu 2</a>              <ul>                  <li>submenu 2.1</li>                  <li>submenu 2.2</li>              </ul>     </li>     <li><a href="#">menu 3</a>              <ul>                  <li>submenu 3.1</li>                  <li>submenu 3.2</li>              </ul>     </li>     <li><a href="#">menu 4</a>              <ul>                  <li>submenu 4.1</li>                  <li>submenu 4.2</li>              </ul>     </li> </ul>

Danke, das hat mir geholfen!

Ich habe jetzt das Menü so modifiziert, wie ich es mir vorgestellt hatte. In Form von Kleiederbügel, welche durch Mouse-Over auf einer Linie hin- und her geschoben werden können.

Siehe Seite: http://recalltohell.d3files.com/Ligh...htHanger2.html

Funktioniert alles bestens, doch leider besteht noch das Problem, dass durch die Listenanordnung immer jeweils ein paar Pixel Platz zwischen den einzelnen Listenpunkten bleibt, den ich irgendwie nicht wegbekomme.

Ich würde es gerne so haben, dass die Line [welche die Kleiderstange darstellen soll] stets durchgezogen ist - ohne Unterbrechungen. Momentan wird automatisch noch zwischen den Listenpunkten ein wenig Platz erstellt, sodass die Grafiken immer ZwischenRäume aufweisen. Wie bekomme ich diese Lücken weg?


Hier noch das externe Stylesheet,falls benötigt:

/* CSS Document */

ul {
margin: 0;
padding: 0;
list-style-type: none;
}

ul, li {
display: inline;
}

ul#nav li ul {
display: none;
}

ul#nav li a {
font-weight: bold;
text-decoration: none;
}

ul#nav li:hover ul {
display: inline;
background:#ffffff;
}

Hi,

versuch es mal hiermit:

Code :

1 2 3 4 5

ul#nav a {   font-weight: bold;   text-decoration: none;   [b]float: left;[/b] }

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<ul id="nav">         <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0" /></a>                 <ul>                 <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0" /></a></li>                 </ul>         </li>         <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0" /></a>                 <ul>                 <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0" /></a></li>                 </ul>         </li>         <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0" /></a>                 <ul>                 <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0" /></a></li>                 </ul>         </li>         <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0"/></a>                 <ul>                 <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0"/></a></li>                 </ul>         </li> </ul>

Hi!

Ich habe genau das gesucht, nur kann ich mit dem Listenelemt nichts anfangen, weil ich das ganze in Container haben möchte, um dort meinen Seiteninhalt unterzubringen.

Bsp:

link1, link2, link3>inhaltinhaltinhalt<, link4, link5....

Ist dies denn möglich?

Am besten wäre es, wenn die links auch container wären.

Hi,

vielleicht hilft dir in diesem Fall http://www.cssplay.co.uk/menus/tabmenu2.html weiter?

Hierbei handelt es sich zwar auch um ein "Listenmenü", aber die jeweiligen "Inhalte" sind in span-Containern untergebracht.

Danke, im Prinzip ja, mal sehen ob ich es auf meine Bedürfnisse umwandeln kann. Falls nicht, meld ich mich nochmals.

Zitat von Maik

Hierbei handelt es sich zwar auch um ein "Listenmenü", aber die jeweiligen "Inhalte" sind in span-Containern untergebracht.

Jo, habe bemerkt, das die Grafiken quasi als LINK funktionieren, nun möchte ich dafür aber auch einen Container, bwz, ich brauche einen

Hab mir die Seite weiter angesehen, und bin auf das hier gestoßen: http://www.cssplay.co.uk/menus/tabmenu.html
Dies entspreche fast meine Vsrstellungen, sind sogar schon abgerundete Ecken drin.
Nur brauche ich das ganze halt in der Horizontalen.
Wenn mir jemand das komplette Script so unformatieren könnte, das es halt Horizontal ist, wäre dies >>für mich<< echt sehr hilfreich.

MfG