So verleihen Sie einem Menü mit CSS3 die richtige Würze
In meinem heutigen Artikel möchte ich Ihnen zeigen, wie Sie Ihre CSS3-Menüs optisch ganz toll gestalten können. Dafür müssen Sie in jeden Menüpunkt eine Grafik oder ein Bild einbinden. Sobald Sie mit der Maus über den Link fahren, erscheint durch den Hover-Effekt Ihre Grafik und das CSS3-Menü entfaltet die volle Wirkung.
Den Originalartikel zu meinen Ausführungen finden Sie auf der Webseite von Tympanus.net/Codrops: How to spice up your menu with css3
Hover funktioniert auf den Apple-Geräten überhaupt nicht. Bei Android funktioniert es so einigermaßen. Google selbst rät von der Verwendung von Hover für Mobilgeräte ab. Offensichtlich geht es dabei darum, dass kaum jemand mobil Hover in der Art nutzt, wie es am Desktop verwendet wird.
Deshalb ist die Nutzung der CSS-Anweisung :hover für Mobilgeräte bedenklich und soll hier nur als Demo zeigen, was alles mit CSS3 umsetzbar und möglich ist!
[Vielen Dank für den Tipp an Tanja Preuße]
Meine 3 Demos ansehen | Download CSS3-Menüs
3 coole Flyout-Menüs mit CSS3 und Grafiken erstellen
HTML:
Der HTML-Aufbau ist für alle 3 Flyout-Menüs gleich. Jeder Menüpunkt (das ist im vorliegenden Fall eine ungeordnete Liste) hat einen Anker (Sprungmarke), 2 span-Elemente und ein img-Element für die dazugehörige Grafik.
- Art Director Henry James
![image01]()
- Production Coordinator Francis Morgan
![image02]()
- Sound Kevin Schneider
![image03]()
- Casting Benjamin Zakalis
![image04]()
CSS Anweisungen für die 3 Menüs
Die einzelnen CSS3-Befehle zum Aufbau der Navigation möchte ich hier nicht extra erläutern. Ich verweise auf die CSS-Dateien in den Musterbeispielen (Download) und im Originalartikel.
Menü Nummer1:
Im Beispiel #1 ist der Hover-Effekt durch eine leichte Änderung der Hintergrund-Farbe und der Schriftfarbe festgelegt.
CSS-Anweisungen Nummer 1
.mh-menu{
height: 385px;
width: 600px;
margin: 20px auto;
position: relative;
}
.mh-menu li{
width: 300px;
}
.mh-menu li a{
display: block;
width: 280px;
padding: 0px 10px;
text-align: right;
position: relative;
z-index: 10;
height: 97px;
border-right: 1px solid #ddd;
background: rgba(255,255,255, 0.8);
}
.mh-menu li:hover a{
background: rgba(225,239,240, 0.4);
}
.mh-menu li a span{
display:block;
}
.mh-menu li a span:first-child{
font-weight: 700;
font-size: 16px;
color: #ddd;
padding-top: 10px;
font-family: 'Alegreya SC', Georgia, serif;
}
.mh-menu li a span:nth-child(2){
font-weight: 400;
font-style: italic;
font-size: 28px;
font-family: 'Alegreya SC', Georgia, serif;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
color: #8e7463;
}
.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
left: 300px;
opacity: 1;
}
Menü Nummer 2
Im Beispiel #2 ändert sich beim Drüberfahren mit der Maus nur die Schriftfarbe mit der Namensbezeichnung. Die Hintergrund-Farbe bleibt dabei aber unverändert.
CSS-Anweisungen Nummer 2
.mh-menu{
height: 385px;
width: 600px;
margin: 20px auto;
position: relative;
}
.mh-menu li{
width: 300px;
}
.mh-menu li a{
display: block;
width: 280px;
padding: 0px 10px;
text-align: right;
position: relative;
z-index: 10;
background: #fff;
height: 97px;
border-right: 1px solid #ddd;
background: rgba(255,255,255, 0.8);
}
.mh-menu li:hover a{
background: rgba(255,255,255, 1);
}
.mh-menu li a span{
display:block;
}
.mh-menu li a span:first-child{
font-weight: 700;
font-size: 16px;
color: #ddd;
padding-top: 10px;
font-family: 'Alegreya SC', Georgia, serif;
}
.mh-menu li a span:nth-child(2){
font-weight: 400;
font-style: italic;
font-size: 28px;
font-family: 'Alegreya SC', Georgia, serif;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
color: #8e7463;
}
.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
left: 300px;
opacity: 1;
}
Menü Nummer 3:
Im letzten Menü (Demo #3) ändern sich durch den Hover-Effekt sowohl die Hintergrund- als auch die Schriftfarbe. Die optische Wirkung ist hier jedoch ungleich größer als bei den anderen Menüs, weil hier die Hintergrund-Farbe an die Farbe der Grafik angepasst wurde. Und der Effekt sieht damit wirklich toll aus!
CSS-Anweisungen Nummer 3
.mh-menu{
height: 385px;
width: 600px;
margin: 20px auto;
position: relative;
}
.mh-menu li{
width: 300px;
}
.mh-menu li a{
display: block;
width: 280px;
padding: 0px 10px;
text-align: right;
position: relative;
z-index: 10;
background: #fff;
height: 97px;
border-right: 1px solid #ddd;
background-color: rgba(255,255,255, 0.8);
}
.mh-menu li:nth-child(1):hover a{
background-color: rgba(174,54,55,0.9);
}
.mh-menu li:nth-child(2):hover a{
background-color: rgba(195, 210, 67, 0.9)
}
.mh-menu li:nth-child(3):hover a{
background-color: rgba(211, 132, 57, 0.9);
}
.mh-menu li:nth-child(4):hover a{
background-color: rgba(142, 116, 99, 0.9);
}
.mh-menu li a span{
display:block;
}
.mh-menu li a span:first-child{
font-weight: 700;
font-size: 16px;
color: #ddd;
padding-top: 10px;
font-family: 'Alegreya SC', Georgia, serif;
}
.mh-menu li a span:nth-child(2){
font-weight: 400;
font-style: italic;
font-size: 28px;
font-family: 'Alegreya SC', Georgia, serif;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.mh-menu li:hover span:nth-child(2){
color: #fff;
}
.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
left: 300px;
opacity: 1;
}
Die 3 fertigen CSS3-Menüs können Sie im Original hier!! ansehen und als ZIP-Datei herunterladen.
Meine 3 Demos ansehen | Download CSS3-Menüs