Depot43-Unterlagen - Transition Menu

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Transition Menu</title>
	<style>
       .sub-menu-parent { position: relative; }

        .sub-menu { 
          visibility: hidden; /* verbirgt das Untermenü */
          opacity: 0;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          transform: translateY(-2em);
          z-index: -1;
          transition: all 0.3s ease-in-out 0s, visibility 0.9s linear 0.3s, z-index 0s linear 0.09s;
        }

        .sub-menu-parent:hover .sub-menu {
          visibility: visible; /* zeigt das Untermenu */
          opacity: 1;
          z-index: 1;
          transform: translateY(0%);
          transition-delay: 0s, 0s, 0.3s; /* Die Eigenschaft "transition delay" wird zurückgesetzt, dass die anderen Stile animiert werden */
        }

        /* Design des Menüs */
        body { padding: 2%; font: 18px/1.4 sans-serif; }

        nav a { color: #900; display: block; padding: 0.5em 1em; text-decoration: none; }
        nav a:hover { color: #F00; }
        nav ul,
        nav ul li { list-style-type: none; padding: 0; margin: 0; }

        nav > ul { background: #EEE; text-align: center; }
        nav > ul > li { display: inline-block; border-left: solid 1px #aaa;min-width:200px }
        nav > ul > li:first-child { border-left: none; }

        .sub-menu {
          background: #DDD;
        }
	</style>
</head>
<body>
 <nav>
	<ul>
		    <li class="sub-menu-parent"><a href="/#">Menu 1</a>
	<ul class="sub-menu"> 
		<li><a href="/#">Untermenu 1</a></li>
		<li><a href="/#">Untermenu 2</a></li>
 		<li><a href="/#">Untermenu 3</a></li>
		<li><a href="/#">Untermenu 4</a></li>
	</ul> 
	</li> 
         <li class="sub-menu-parent"><a href="/unterlagen/microcss/transition/transition-menu/#">Menu 2</a> 
	<ul class="sub-menu"> 
		<li><a href="/#">Untermenu 1</a></li>
		<li><a href="/#">Untermenu 2</a></li>
		<li><a href="/#">Untermenu 3</a></li>
		<li><a href="/#">Untermenu 4</a></li>
		<li><a href="/#">Untermenu 5</a></li>
		<li><a href="/#">Untermenu 6</a></li>
           </ul> 
	    </li> 
		<li class="sub-menu-parent"><a href="/#">Menu 3</a> 
	<ul class="sub-menu"> 
		<li><a href="/#">Untermenu 1</a></li>
		<li><a href="/#">Untermenu 2</a></li>
           </ul> 
	    </li> 
       </ul> 
</nav>
</body>
</html>


 

            

Hinweis

Das Untermenu wird aus- / eingeblendet mit:

visibility: hidden; /* verbirgt das Untermenü */
visibility: visible; /* zeigt das Untermenu */

Die "weiche" Transition im Untermenu wir erzeugt mit:

transition: all 0.3s ease-in-out 0s, visibility 0.9s linear 0.3s, z-index 0s linear 0.09s;

Beim darüberfahren werden CSS-Eigenschaften verändert:

transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;