CSS Dropdown Menü langsam ausklappen

[Xym]

Guten Tag,

ich habe ein reines css Dropdown Menü erstellt.
An sich finde ich es sehr schon, doch noch schöner wäre es, wenn die Unterpunkt langsam ausfahren und nicht sofort da stehen.

Hier ist mein Qullcode:

index.php

<!-- Top Menü -->

<div id="top_menu">

	<ul>
		<li> <a href="#"> Punkt 1 </a>
			<ul>
				<li> <a href="#"> Unterpunkt 1 </a> </li>
				<li> <a href="#"> Unterpunkt 2 </a> </li>
				<li> <a href="#"> Unterpunkt 3 </a> </li>
			</ul>
		</li>
		<li> <a href="#"> Punkt 2 </a> 
			<ul>
				<li> <a href="#"> Unterpunkt 1 </a> </li>
				<li> <a href="#"> Unterpunkt 2 </a> </li>
				<li> <a href="#"> Unterpunkt 3 </a> </li>
			</ul>
		</li>
		<li> <a href="#"> Punkt 3 </a> </li>
		<li> <a href="#"> Punkt 4 </a> </li>
		<li> <a href="#"> Punkt 5 </a>
			<ul>
				<li> <a href="#"> Unterpunkt 1 </a>	</li>
				<li> <a href="#"> Unterpunkt 1 </a>	</li>
				<li> <a href="#"> Unterpunkt 1 </a>	</li>
				<li> <a href="#"> Unterpunkt 1 </a>	</li>
				<li> <a href="#"> Unterpunkt 1 </a>	</li>
				<li> <a href="#"> Unterpunkt 1 </a>	</li>
				<li> <a href="#"> Unterpunkt 1 </a>	</li>
			</ul>
		</li>
	</ul>
</div>

style.css

/* Topmenu Layout */

#top_menu { margin-left: auto; margin-right: auto; width: 760px; height: 50px; background: url(../images/bg.png) repeat-x; }
#top_menu ul { margin: 0; padding: 0; }
#top_menu ul li { margin: 0; padding: 0; list-style: none; float: left; position: relative; }
#top_menu ul li a{ display:block; }
#top_menu ul li ul { position: absolute; visibility: hidden; }
#top_menu ul li:hover ul { visibility: visible; }


/* Topmenu Styling */

#top_menu ul { margin-top: 7px; }
#top_menu ul li { width: 152px; height: 30px; background: url(../images/bg.png) repeat-x; }
#top_menu ul li:hover { background: url(../images/bg_hover.png) repeat-x; }
#top_menu ul li a { color: #FFF; text-decoration: none; text-align: center; padding-top: 3px; }
#top_menu ul li ul li { opacity:0.95; filter: alpha(opacity=95); -moz-opacity: 0.95; }

 

[javaDeveloper2011]

Hi,

bin mir ziemlich sicher, dass sich da mit reinem CSS nichts machen lässt.
jQuery bietet aber eine einfache und flüssige, gut konfigurierbare Cross-Browser-Lösung.
Wie man sowas macht habe ich schon mal in diesem Tutorial erklärt.

 

[Sven Zander]

Hi,
das würde mit css3 gehen, funktioniert auch schon in den modernen Browsern...

#top_menu ul li ul {
	position: absolute; visibility: hidden;
	-webkit-transition: all 1s ease-in-out 0s; /* Safari und Chrome: */
	-moz-transition: all 1s ease-in-out 0s; /* Firefox */
	-o-otransition: all 1s ease-in-out 0s; /* Opera: */
	-ms-transition: all 1s ease-in-out 0s; /* IE9 */
	transition: all 1s ease-in-out 0s;
}

das würde jetzt erst mal nur ein fade-in/fade-out Effekt geben durch visibility: hidden;/visibility: visible;.

transform: translate(x-achse, y-achse);

verschiebt ein Element, den Effekt kann man auch durch Veränderung der Schriffgröße vortäuschen. normal auf 0em und bei :hover auf die gewünschte Größe.

MfG

 

[djheke]

Aber mit transition:all ist es sehr ungünstig. Und height funktioniert nur mit Pixelangaben. Also, lieber nicht mit CSS3.
Obwohl, dass Faden funktioniert gut.

 

[javaDeveloper2011]

Faden geht auch mit jQuery (cross-browser-kompatibel): http://api.jquery.com/fadeIn/

 

[djheke]

Ja, es war ja nur mal so'n Vorschlag.

 

[Xym]

Also bei der ersten Antwort mit jQuery ist das Problem, dass das Submenu den rechts "wegschieb". Also alles rutscht weiter nach unten.
Bei der Lösung mit CSS verstehe ich nicht ganz die Funktion vom 2.ten Befehl

 transform: translate(x-achse, y-achse);

Wie wirkt er und wie wende ich ihn an****