Freaky Friday: Slides ohne Javascript

Heute mal auf einem Montag: Der Freaky Friday Beitrag. Mein Urlaub ist vorbei und die erste Arbeitswoche ist geschafft. Diese Woche schrieb mich Sascha von thinKnexT media an, ob ich nicht kurz Zeit hätte ein Menü mit vertikal slidenden Untermenüs in eine statische Webseite zu integrieren. Da Javascript Bibliotheken, wie zum Beispiel jQuery, mit denen es einfach wäre einen solchen Effekt für Untermenüs zu integrieren, nicht vorhanden waren, habe ich es einfach mit CSS realisiert.

Slidende Menüs mit CSS und so ganz ohne Javascript? Wie geht denn sowas? Das Zauberwort lautet Transitions. CSS Transitions sind eine einfache Technik, um HTML Elemente zu animieren. Diese Technik ist laut dem Mozilla Developer Network zwar noch als experimental gekennzeichnet, wird aber laut caniuse.com von ca. 96% aller in Deutschland benutzten Browser interpretiert.

Hier mal ein kleines Beispiel, wie es funktionieren könnte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Unsere Menüstruktur */
<nav>
    <ul>
        <li><a title="Menüpunkt 1" href="#">Menüpunkt 1</a></li>
	<li><a title="Menüpunkt 2" href="#" class="has-submenu">Menüpunkt 2</a>
            <ul>
                <li><a title="Untermenüpunkt 1" href="#">Untermenüpunkt 1</a></li>
                <li><a title="Untermenüpunkt 2" href="#">Untermenüpunkt 2</a></li>
            </ul>
        </li>
        <li><a title="Menüpunkt 3" href="#">Menüpunkt 3</a></li>
        <li><a title="Menüpunkt 4" href="#">Menüpunkt 4</a></li>
    </ul>
</nav>

Eine einfache HTML Menüstruktur, mit vier Hauptmenüpunkten und zwei Untermenüpunkten unter dem zweiten Menüpunkt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
nav ul { 
    list-style: none; 
    height: 40px; 
}
nav ul li {
    float: left;
}
nav ul > li.has-submenu {
    overflow: hidden;
}
nav ul > li.has-submenu:hover {
    overflow: visible; 
}
nav ul > li.has-submenu > a:after {
    content: "\25bc";
    margin-left: 1em;
}
 
nav ul > li.has-submenu > ul {
    position: absolute;
}
 
nav ul li ul li {
    float: none;
    overflow: hidden;
    position: relative;
    height: 0;
    -webkit-transition: height 200ms ease-in;
    -moz-transition: height 200ms ease-in;
    -o-transition: height 200ms ease-in;
    transition: height 200ms ease-in;
    z-index: 2;
}
 
nav ul li:hover ul li {
    height: 40px;
}
 
nav ul li a {
    background-color: #fe781e;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    padding: 7px 10px;
    text-align: left;
    text-decoration: none;
    text-align: left;
    text-decoration: none;
}
 
nav ul li a:hover {
    background-color: #ff6600;
}

Schauen wir mal, was wir hier haben. Vier Menüpunkte in einer undefinierten Liste. Der zweite Menüpunkt besitzt ein Untermenü mit zwei Menüpunkten. Also einfach nur eine verschachtelte Listenstruktur. Per CSS formatieren wir diese Listen. In Zeile 23 des CSS Codes befindet sich der ganze Trick. Hier sind die Transition Eigenschaften notiert. Beim genauen Hinsehen fällt auf, dass die Höhe des Listenelements auf 0 gesetzt ist. Letztendlich wollen wir ja, dass das Untermenü erstmal nicht zu sehen ist. In Zeile 35 belegen wir das Listenelement mit einem Hover Effekt. Erst hier wird die Höhe des Listenelements auf 40 Pixel gesetzt. Die Transitions sorgen nun dafür, dass, sobald man mit der Mouse das Listenelement überfährt, die Höhe der Listenelemente von 0 auf 40 Pixel innerhalb von 200ms erhöht werden. Somit entsteht ein wunderbarer Slide Effekt. Alles ganz ohne Javascript.

Zu Veranschauung habe ich mal das HTML5 Beispiel für die Contraint Validation API mit einem Menü versehen. Probiert es einfach mal aus.

About Author: Marcel
Ich bin Senior PHP Developer bei MM Newmedia. Seit 2005 bin ich begeisterter Webentwickler und arbeite als Freelancer für namenhafte Firmen und entwickle jede Menge abgefahrenes Zeug und berichte darüber in meinem Blog.

Kommentar verfassen