Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 04.04.2015, 10:06
xm22 xm22 ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard Transition timing-function wird auf dem "Rückweg" ignoriert

Hallihallo an diesen sehr sonnigen Samstag Morgen,

ich spiele gerade mit Transitions herum und habe hier mal einen Testballon in Form eines zweistufigen Flyout-Menüs gebaut:
HTML-Code:
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			#menu {
				margin-top: -100px;
				transition: margin 1s ease;
				width: 100px;
				white-space: nowrap;
			}
			#menu:hover {
				margin-top: 0;
			}
			#menu > li {
				position: relative;
			}
			#menu ul {
				width: 0;
				height: 0;
				overflow: hidden;
				position: absolute;
				top: 0;
				left: 100%;
				transition: width 1s ease;
			}
			#menu li.nested:hover ul {
				width: 100px;
				height: auto;
			}
		</style>
	</head>
	<body>
		<ul id="menu">
			<li>Eintrag 1</li>
			<li>Eintrag 2</li>
			<li class="nested">
				Eintrag 3
				<ul>
					<li>Eintrag 2.1</li>
					<li>Eintrag 2.2</li>
					<li>Eintrag 2.3</li>
				</ul>
			</li>
			<li>Eintrag 4</li>
			<li>Eintrag 5</li>
			<li>Eintrag 6</li>
			<li>Eintrag 7</li>
		</ul>
	</body>
</html>
Es funktioniert auch alles beinahe so, wie es soll:
* Beim Hovern der obersten Ebene fährt das Menü innerhalb der Duration herunter, beim Verlassen fährt es innerhalb der Duration wieder hoch.
* Das verschachtelte UL in Eintrag 3 fährt bei Hover innerhalb der Duration aus, aber: Beim Verlassen von Eintrag 3 fährt es _sofort_ ein.

Mache ich da was falsch, oder ist das einfach der "Komplexität" geschuldet?
__________________
... Meine Meinung
Mit Zitat antworten
Sponsored Links