[CSS3] Animiertes CSS-Menü erstellen

alogheo · 16 August 2011

Wird unterstützt von:
Opera, Safari, Firefox 4+, Internet Explorer 10, Chrome

In diesem Tutorial zeige ich euch, wie ihr ein animiertes Menü, nur mit CSS3 baut.

1. Allgemeines

CSS-transitions ermöglichen es, die Wechsel der CSS-Eigenschaften eines Elementes zu animieren.

Die Syntax sieht folgendermaßen aus:

Code:

transition-property: <Eigenschaft>[,<Eigenschaft>, ...]
transition-duration: <Dauer>[,<Dauer>, ...]
transition-timing-function: <Art>[,<Art>, …]
transition-delay: <Verzögerung>[, <Verzögerung>, ...]

(Hierbei ist auch auf die Browserspeifischen Vorsilben –moz-, -o- und –webkit- zu achten, die ich aber in den Codebeispielen dieses Tutorials weglasse)

oder in der Kurzform:

Code:

transition: <Eigenschaft> <Dauer> <Art> <Verzögerung>[, <Eigenschaft> <Dauer> <Art> <Verzögerung>, ...]

Für <Eigenschaft> wird die zu animierende Eigenschaft angegeben. Also wenn sich z.B. die Höhe verändert und animiert werden soll, wäre dies ‚height’

Für <Dauer> wird die Zeitangegeben. Soll die Animation 1 Sekunde dauern steht an dieser Stelle 1s

<Art> gibt an, wie die Animation ablaufen soll:
linear (gleichmäßig)
ease-in (schneller werdende Animation)
ease-out (langsamer werdende Animation)
ease-in-out (schneller und wieder langsamer werdende Animation)

und <Verzögerung> gibt an, wie lange es dauert, bis eine Animation startet. (1s heißt, die Animation startet nach einer Sekunde)

2. Das Menü

Als Ausgangspunkt nehmen wir uns ein ganz klassisches Dropdown-Menü:

HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>CSS3 - Transistions</title>
  <meta http-equiv="content-type"content="text/html; charser=utf-8" />
  <style>
   #menu a
   {
     color: black;
     text-decoration: none;
   }
   #menu ul
   {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   #menu li
   {
     float: left;
     padding: 0 20px;
     background: #dd0;
   }
   #menu ul ul
   {
     position: absolute;
     margin-left: -20px;
     display: none;
   }
   #menu ul ul li
   {
     float: none;
     margin: 0;
     background: #d00;
   }
   
   #menu li:hover
   { background: #ff0; }
   #menu li:hover ul
   { display: block }
   #menu ul ul li:hover
   { background: #f00; }
  </style>
 </head>
 <body>
  <div id="menu">
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">NEWS</a>
     <ul>
      <li><a href="#">von Heute</a></li>
      <li><a href="#">von Gestern</a></li>
      <li><a href="#">von Vorgestern</a></li>
     </ul>
    </li>
    <li><a href="#">MEHR</a>
     <ul>
      <li><a href="#">Anderes</a></li>
      <li><a href="#">Sowas</a></li>
      <li><a href="#">Und noch viel mehr</a></li>
     </ul>
    </li>
   </ul>
  </div>
 </body>
</html>

Hierbei wird mit display:block und display:none das sub-Menü sichtbar und unsichtbar gemacht. Wir wollen aber, dass das Submenu nach unten „herausfährt“, also muss sich nicht die Sichtbarkeit, sondern die Höhe ändern.

Display:none und display:block wird dafür erst einmal herausgenommen

Code:

   #menu ul ul
   {
     position: absolute;
     margin-left: -20px;
   }[FONT=monospace]
[/FONT]

stattdessen werden die Submenupunkte durch eine Höhe von 0px und overflow:hidden unsichtbar gemacht:

Code:

   #menu ul ul li
   {
     float: none;
     margin: 0;
     background: #d00;
[COLOR=#000080]     height: 0;
     overflow: hidden;[/COLOR]
   }

Und dann bei einem hover mit 20px Höhe wieder sichtbar:

Code:

[COLOR=#000080]   #menu li:hover ul li
   { height: 20px; }[/COLOR]

3. Die Animation

So. Und was jetzt noch fehlt ist die Animation. Diese soll die Höhe verändern, eine halbe Sekunde dauern und schneller und wieder langsamer werden, ohne jegliche Verzögerung:

Code:

transition: height 0.5s ease-in-out 0s;

Diese Angabe muss mit zu den Styles des Submenupunktes, nicht zu den submenu-hover-Styles:

Code:

   #menu ul ul li
   {
     float: none;
     margin: 0;
     background: #d00;
     height: 0;
[COLOR=#000080]     transition: height 0.5s ease-in-out 0s;[/COLOR]
     overflow: hidden;
   }

Wenn man jetzt mehre CSS-Eigenschaftenändern will, z.B. Noch die Breite, kann man diese nach einem Komma dahinter schreiben.

Code:

transition: height 0.5s ease-in-out 0s[COLOR=#000080], width 1s ease-out 0.5s[/COLOR];

4. Das fertige Beispiel

Und das fertige Beispiel ist hier zufinden: C SS3 - Transitions

5. Nochwas

gängige CSS-Eigenschaften, die unterstützt werden:
background, border, bottom, box-shadow, color, coloumn, clip, font-size, font-weight, height, left, line-height, margin, max-height, max-width, min-height, min-width, opacity, padding, right, text-shadow, top, transform, visibility, width, word-spacing, z-index

;)

alogheo · 26 August 2011

Was auch noch ganz interessant ist, ist wie man es hinbekommt, dass die Animation beim hover sehr schnell durchgeführt wird und beim unhover dann langsamer ist.

Die bisher angegebene transition würde die geschwindigkeit für das unhover angeben. Also 0.5 Sekunden

Code:

  #menu ul ul li
  {
    float: none;
    margin: 0;
    background: #d00;
    height: 0;
    transition: height 0.5s ease-in-out 0s;[COLOR=#000080]
[/COLOR]    overflow: hidden;
  }

Um die Animation beim hover zu beschleunigen, muss die transition-Geschwindigkeit heruntergesetzt werden:

Code:

   #menu li:hover ul li
   {
      height: 20px;
      [COLOR=#000080]transition-duration: 0.1s;[/COLOR]
   }

Also wenn man ein Listenelement hovert, wird transition geändert, so dass die Animation schneller wird. Beim unhover wird der Wert wieder zurückgesetzt und die Animation läuft wieder langsamer ab.

Natürlich geht das ganze auch in die andere Richtung (langsames Aufklappen; schnelles Einfahren)

[CSS3] Animiertes CSS-Menü erstellen

alogheo

Mitglied

alogheo

Mitglied

Neueste Beiträge