✔ CSS Menü, aufklappbar bei Rollover

[legio_x]

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?

 

[Maik]

Hi!

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

 

[legio_x]

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?!

 

[Maik]

Dann werf mal einen Blick in den Quelltext der Seite.

 

[legio_x]

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

 

[Maik]

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 ...?

 

[legio_x]

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

 

[Maik]

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.

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;
}

<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>

 

[legio_x]

Danke, das hat mir geholfen!

 

[legio_x]

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/LightHanger/LightHanger2.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;
}