German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)
Es gibt keinen besseren Weg, um CSS3 zu lernen, als sich die Hände schmutzig zu machen, und genau das werden wir tun. Ich werde Ihnen beibringen, wie Sie mit ein paar CSS3-Techniken für Anfänger und Fortgeschrittene ein fantastisches CSS3-Rundmenü mit mehreren Ebenen erstellen. Brechen Sie also Ihren bevorzugten Texteditor oder Ihre Lieblings-IDE aus und lassen Sie uns mit CSS3-Magie beginnen!
Heute lernen Sie, wie Sie die Zuckerstangen-Träne aus den vielen verschiedenen Stilen und Farbvarianten herstellen. Sie erhalten alle Variationen in den Quelldateien. Als zusätzlichen Bonus habe ich ein bisschen optionales Javascript hinzugefügt, damit Sie Ihre Bilder je nach schwebendem Menüpunkt drehen können. Die Quelldatei wird sogar mit einer eigenen Dokumentation geliefert!
Hinweis: Die Unterstützung für IE ist derzeit begrenzt. Wir werden dies hauptsächlich durchgehen, um den Rahmen mit dem zu erweitern, was wir in CSS3 tun können... aber wie bei allen Dingen, die am Rande der Praktikabilität stehen, bedeutet dies, ein wenig Stabilität zu opfern. Wir werden uns jedoch am Ende des Tutorials mit dem IE-Thema befassen!
Das Video-Tutorial
Wir bieten dieses Tutorial heute in zwei verschiedenen Formaten an: Ein Video sowie ein vollständig geschriebenes Tutorial unten. Befolgen Sie die von Ihnen bevorzugte Lernmethode (oder beides!) Und wir bringen Sie in kürzester Zeit zum Ende!
Das schriftliche Tutorial
Das Schritt-für-Schritt-Tutorial ist unten. Stellen Sie sicher, dass Sie auch die vollständige herunterladbare Quelle herunterladen!
Schritt 1: Die Ebenen
Das erste, was wir tun möchten, ist, einige Ebenen zu erstellen, die sich überlappen und an Ort und Stelle bleiben, während so wenig Code wie möglich verwendet wird. Es ist wichtig, dass Sie Ihren Code nicht mit viel Aufblähen füllen und nicht viel erstellen
unnötige Floats oder absolut positionierte Elemente, daher werden wir versuchen, so weit wie möglich relativ zu bleiben.
Der Code:
1 |
<!-- the layers !-->
|
2 |
<div id="menu-wrap"> |
3 |
<div class="wrap1"> |
4 |
<div class="wrap2"> |
5 |
<div class="wrap3"> |
6 |
<div class="wrap4"> |
7 |
<!-- center image goes here !-->
|
8 |
<div class="completer"></div> |
9 |
<div class="completer2"></div> |
10 |
<div class="wrap5"> |
11 |
<div class="nav-holder"> |
12 |
|
13 |
<!-- this space will be used for the menu !-->
|
14 |
|
15 |
</div><!-- nav holder !--> |
16 |
</div><!-- wrap5 !--> |
17 |
</div><!-- wrap4 !--> |
18 |
</div><!-- wrap3 !--> |
19 |
</div><!-- wrap2 !--> |
20 |
</div><!-- wrap1 !--> |
21 |
</div><!-- menu-wrap !--> |
Wie Sie sehen können, ist der Code ziemlich einfach. Wir haben im Wesentlichen eine Schicht übereinander gestapelt und auf diese Weise können sie ihre Positionen halten.
Weiter möchten wir ein Bild in die Mitte des Rades einfügen oder in diesem Fall eine Träne. Dazu fügen wir einfach den folgenden Code zwischen der wrap4-Klasse und der Completer-Klasse ein. Dadurch wird das Bild in der Mitte der Leinwand gesperrt. Wir werden nur ein Rockable-Bild für dieses verwenden, weil sie fantastisch sind!
1 |
<span class="img1"><img class="orbit orbit-frame" src="images/card18.jpg" alt="card08" /></span> |
Jetzt wollen wir jeder Ebene nacheinander etwas Styling hinzufügen.
#menu-wrap:
Das ist der Hauptcontainer für Ihr Rundmenü. Es hat auch alle universellen Schriftarten und Schriftgrößen, die sich auf alles auswirken, was sich innerhalb der div id="menu-wrap" befindet.
1 |
#menu-wrap{ |
2 |
background:#e7e7e7; /* This isn't needed */ |
3 |
height:600px; /* This is important and keeps the wheel in place when hovering over elements */ |
4 |
font-family:sans-serif, Franklin Gothic Medium,Helvetica, Arial; /* If not using Franklin, it will automatically go to the next font in the family */ |
5 |
font-size:14px; /* Establishes the global font size */ |
6 |
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */ |
7 |
}
|
Wir werden fortfahren und sicherstellen, dass unser mittleres Bild korrekt gestaltet ist, indem wir es mit Rändern in der Mitte des Rads platzieren und ihm einige Dimensionen und einen Rand hinzufügen.
1 |
#menu-wrap .orbit{ |
2 |
height: 210px; |
3 |
margin: 32px; /* Pushes the images in the display to the center */ |
4 |
position: absolute; |
5 |
width: 210px; |
6 |
}
|
7 |
|
8 |
#menu-wrap .orbit-frame{ |
9 |
border:2px solid #999; /* Creates a division between the image and wrap5 */ |
10 |
}
|
Alle Wrapper: Wir möchten einige Stile erstellen, die für alle Haupt-Wrapper gelten, indem wir einen universellen Rahmenradius hinzufügen, sie alle in die Mitte legen, eine relative Position hinzufügen, damit alles enthalten bleibt, und sie nach unten drücken, um eine gleichmäßige Ebene zu erhalten bewirken.
1 |
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */ |
2 |
-moz-border-radius: 220px 0 200px 220px; /* firefox */ |
3 |
-webkit-border-radius: 220px 0 200px 220px; /* webkit */ |
4 |
border-radius: 220px 0 200px 220px; /* opera */ |
5 |
margin:0 auto; /* centers all the wrappers relative to each other */ |
6 |
position:relative !important; /* Do not touch unless you know what you are doing */ |
7 |
top:20px; |
8 |
}
|
.wrap1:
Das ist Ihre größte Schicht, die hinter allen anderen sitzt. Wir werden einen roten Hintergrund mit Farbverlauf erstellen und für ältere Brower einen soliden roten Fallback verwenden. Wir werden auch CSSpie verwenden, um dem IE mitzuteilen, dass es in Ordnung ist, diese Stile zu verwenden. Danach müssen wir nur noch eine Breite und Höhe hinzufügen und fertig. Sie möchten sicherstellen, dass Breite und Höhe größer sind als alle anderen Ebenen, damit sie dahinter angezeigt werden.
1 |
.wrap1{ |
2 |
background: #FF0000; /* old browsers */ |
3 |
background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */ |
4 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */ |
5 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */ |
6 |
background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/ |
7 |
-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/ |
8 |
height:394px; |
9 |
width:394px; |
10 |
}
|
.wrap2:
Jetzt für Wrap 2 werden wir genau das Gleiche tun, nur werden wir Variationen von Weiß als Farbverlauf verwenden und einen äußeren und inneren Kastenschatten hinzufügen, um einen leichten Abschrägungseffekt plus den Hintergrundschatten zu erzeugen. Dann müssen wir die Breite und Höhe etwa 40 Pixel kleiner als die Hauptebene machen, um sie schön und gleichmäßig zu machen.
1 |
.wrap2{ |
2 |
background: #FFFFFF; /* old browsers */ |
3 |
background: -moz-linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /* firefox */ |
4 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCBE8F)); /* webkit */ |
5 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCBE8F',GradientType=0 ); /* ie */ |
6 |
background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*future CSS3 browsers*/ |
7 |
-pie-background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*IE fix using Pie*/ |
8 |
height:354px; |
9 |
width:354px; |
10 |
-moz-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset; |
11 |
-webkit-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset; |
12 |
box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset; |
13 |
}
|
.wrap3 & 4:
Wir werden nun den Vorgang für alle anderen Wrapper mit verschiedenfarbigen Verläufen wiederholen und jede Schicht 40px kleiner als die letzte machen.
1 |
.wrap3{ |
2 |
background: #FF0000; /* old browsers */ |
3 |
background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */ |
4 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */ |
5 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */ |
6 |
background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/ |
7 |
-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/ |
8 |
height:314px; |
9 |
width:314px; |
10 |
}
|
11 |
|
12 |
.wrap4{ |
13 |
border: 2px solid #FF0000; |
14 |
background: #990000; /* old browsers */ |
15 |
background: -moz-linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /* firefox */ |
16 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#990000), color-stop(55%,#CC0000), color-stop(57%,#FF0000)); /* webkit */ |
17 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#FF0000',GradientType=0 ); /* ie */ |
18 |
background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*future CSS3 browsers*/ |
19 |
-pie-background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*IE fix using Pie*/ |
20 |
-moz-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset; |
21 |
-webkit-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset; |
22 |
box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset; |
23 |
height:274px; |
24 |
width:274px; |
25 |
}
|
.wrap5 & .nav-holder:
Jetzt können wir wrap5 und den nav-holder stylen, der alle Menüpunkte an Ort und Stelle hält, und für den Candycane-Stil werden wir ihn schwarz machen, um einen schönen neutralen Kontrast zu schaffen, während wrap5 weiß ist und als Behälter für das dient mittleres Bild. Was wir hier tun, ist das Ausschneiden des Hintergrunds, sodass Sie durch wrap5 und den nav-holder sehen können, sodass die anderen Ebenen sowie das mittlere Bild dahinter erscheinen. Nachdem wir es transparent gemacht haben, fügen wir dem nav-holder einen schwarzen Rand und Wrap5 einen weißen Rand hinzu. Der Rand des nav-holder sollte auf der rechten Seite (für die Untermenüs) ausgeblendet, auf der linken Seite (für die Hauptmenüs) verdoppelt und für den Rest fest sein, um einen schönen und einfachen Effekt zu erzielen und gleichzeitig die Anzahl der Ebenen zu minimieren hinzufügen. Traditionell können Sie mit diesem Effekt bis zu 5 oder 6 neue Ebenen hinzufügen. Dies spart viel Code.
Dieses Mal ist die Breite und Höhe des Wrap5 60 Pixel kleiner als die der anderen Ebenen, um es schön und gleichmäßig zu machen. Ein weiterer Druck von 10 Pixel oben hilft beim Ausrichten der Ebene, und ein innerer Kastenschatten gibt uns eine schöne Perspektive für den Abstand zwischen Wrap5 und dem mittleren Bild.
Wenn Sie dem nav-holder eine Spitze von 0 hinzufügen, werden die Ebenen automatisch an den anderen ausgerichtet. Wir werden auch einen negativen Rand für die weitere Ausrichtung oben links verwenden und eine proportionale Höhe/Breite erstellen, damit er gut auf die anderen Ebenen passt.
1 |
.wrap5{ |
2 |
-moz-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75); |
3 |
-webkit-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75); |
4 |
box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75); |
5 |
border: 20px solid #FFF; /* creates the wrap to see the image behind it */ |
6 |
height: 214px; |
7 |
top: 10px; /* center the element */ |
8 |
width: 214px; |
9 |
}
|
10 |
|
11 |
.nav-holder{ |
12 |
background: none repeat scroll 0 0 transparent; |
13 |
border-color: #121212; /*** The border declarations are used to create the final wrapper, middle see through and hides the right border to show the submenus */ |
14 |
border-style: solid hidden solid double; |
15 |
border-width: 73px medium 73px 73px; |
16 |
height: 252px; |
17 |
margin: -92px; /* centers the object on relative elements */ |
18 |
top: 0; |
19 |
width: 324px; |
20 |
}
|
"Der Rand des nav-holder sollte auf der rechten Seite (für die Untermenüs) ausgeblendet, auf der linken Seite (für die Hauptmenüs) verdoppelt und für den Rest fest sein, um einen schönen und einfachenEffekt zu erzielen und gleichzeitig die Anzahl der Ebenen zu minimieren, die wir verwenden muss hinzufügen."
Nun, das war einfach genug. Nachdem Sie das alles beendet haben, haben Sie hoffentlich etwas Neues gelernt, das Sie bereits zu Ihren Fähigkeiten hinzufügen können. So sollte Ihre Kreation jedoch bisher aussehen. Wenn es nicht so aussieht, gehen Sie bitte den Code noch einmal durch und sehen Sie, ob Sie etwas verpasst haben... keine Sorge, es ist wahrscheinlich etwas sehr Geringes.
Die Completers: Hmm... sieht das für Sie unvollständig aus? Wir müssen es mit ein paar Ebenen abrunden, die ich als Komplettierer bezeichnet habe, damit wir Teile des mittleren Bildes ausblenden und den Navigationshalter weiter um die anderen Ebenen legen können, um einen schönen abgerundeten Effekt zu erzielen und ihn zu schließen.
Das zu tun, was ich gerade erwähnt habe, ist ziemlich einfach. Wir können den größten Teil des Stils für weniger Code auf beide Vervollständiger anwenden. Fügen wir einer Seite einen Randradius hinzu, um eine schöne Kurve zu erstellen. Anschließend richten wir den Completer mithilfe von Transformation zwischen wrap1 und wrap5 aus. Das Hinzufügen unserer Hintergrundfarbe ist sehr wichtig, sonst wird nichts angezeigt. Wir müssen diese Ebene absolut positionieren und nach rechts und oben verschieben, damit sie perfekt ausgerichtet ist.
.completer1 zeigt für diesen Teardrop-Stil keine an. Bei anderen Stilen wie dem Rad haben wir diesen Teil gelöscht, damit er angezeigt wird.
.completer2 hat etwas mehr Rotation und wir müssen es ein wenig nach unten drücken, damit es passt.
1 |
.completer, .completer2{ /** absolute elements to hide the border of images **/ |
2 |
-moz-border-radius: 0 120px 0 113px; /* firefox */ |
3 |
-webkit-border-radius: 0 120px 0 113px; /* webkit */ |
4 |
border-radius: 0 120px 0 113px; /* opera */ |
5 |
-moz-transform: rotate(-20deg); /* firefox */ |
6 |
-webkit-transform: rotate(-21deg); /* webkit */ |
7 |
-o-transform: rotate(-20deg); /* opera */ |
8 |
-ms-transform: rotate(-20deg); /* ie9 and future versions */ |
9 |
transform: rotate(-20deg); /* older browsers */ |
10 |
background-color: #121212; |
11 |
background-image: none; |
12 |
background-position: 0 0; |
13 |
background-repeat: repeat; |
14 |
height: 135px; |
15 |
position: absolute; |
16 |
right: -24px; |
17 |
top: -56px; |
18 |
width: 130px; |
19 |
}
|
20 |
|
21 |
.completer{ |
22 |
display:none; |
23 |
}
|
24 |
|
25 |
.completer2{ |
26 |
-moz-transform: rotate(110deg); /* firefox */ |
27 |
-webkit-transform: rotate(111deg); /* webkit */ |
28 |
-o-transform: rotate(110deg); /* opera */ |
29 |
-ms-transform: rotate(110deg); /* ie9 and future versions */ |
30 |
transform: rotate(110deg); /* older browsers */ |
31 |
top: 195px; |
32 |
}
|
Nachdem Sie die Vervollständiger hinzugefügt haben, sollten Sie so etwas haben... Wenn Sie nicht das Gleiche wie das haben, was Sie hier sehen, überprüfen Sie einfach Ihren Code und sehen Sie, was Sie verpasst haben.
Jetzt haben wir eine große Anzahl von Ebenen, mit denen wir arbeiten können. Sie sind alle gut enthalten und haben sanfte CSS3-Effekte. Also lasst uns weitermachen und dieses Baby zum Laufen bringen!
Schritt 2: Die Navigationsmenüelemente und Untermenüelemente
Jetzt möchten wir Navigationslinks hinzufügen, die so aussehen, als ob sie sich hinter verschiedenen Ebenen befinden. Auf der linken Seite (am doppelten Rand) möchten wir die Hauptmenüelemente und auf der rechten Seite (im offenen Bereich) möchten wir, dass die Untermenüelemente angezeigt werden, nachdem ein Hauptelement bewegt wurde. Sie werden überrascht sein, wie einfach dies zu einfach ist.
Der Code:
Es gibt einen Schwebeblock, um die Menüs aktiv zu halten, wenn Sie mit der Maus über das Lenkrad fahren. Wir möchten sicherstellen, dass das gesamte Rad abgedeckt wird. Aus Gründen der IE-Kompatibilität fügen wir einen Hintergrund mit einer Deckkraft von 0,01 hinzu, andernfalls gewinnt der IE Ich erkenne nicht, dass das Element sogar da ist.
Die Verwendung des margin-left: 76px stellt sicher, dass Sie genügend Platz haben, um über das Hauptmenü und das Untermenü zu schweben und das Rad zu überqueren, ohne dass etwas verschwindet.
1 |
ul.menuBuild, ul.menuBuild ul { |
2 |
width: 80px; /* sets the size of the menu blocks */ |
3 |
background: rgb(0, 0, 0); |
4 |
/* RGBa with 0.01 opacity */
|
5 |
background: rgba(0, 0, 0, 0.01); /* - a bg-color MUST be included for IE to work properly! */ |
6 |
padding-left: 0px; /* stops the usual indent from ul */ |
7 |
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */ |
8 |
}
|
Jetzt wollen wir die Aufzählungspunkte aus jedem Menüpunkt oder [li] entfernen. Wir möchten auch sicherstellen, dass sie relativ zum nav-holder sind.
Sie können einen Rahmenradius hinzufügen, um ein wenig mehr Stil zu erhalten. Wir machen den Hintergrund einfarbig und verschieben die Menüelemente nach links, sodass sie kaum die Ränder des nav-holder berühren.
Das padding, der text-indent und die color dienen dem zusätzlichen Styling und sind nicht erforderlich, damit das Menü funktioniert.
1 |
ul.menuBuild li { |
2 |
list-style-type: none; /* removes the bullet points */ |
3 |
position: relative; |
4 |
-webkit-border-radius: 0px 20px 20px 0px; /* webkit browsers */ |
5 |
-moz-border-radius: 0px 20px 20px 0px; /* firefox */ |
6 |
border-radius: 0px 20px 20px 0px; /* opera */ |
7 |
background: none repeat scroll 0 0 #464646; |
8 |
height: 14px; |
9 |
left: -177px; |
10 |
padding: 8px; |
11 |
margin: 6px 0 0; |
12 |
width:140px; |
13 |
text-indent:5px; /* How far the text is from the left edge of the menu */ |
14 |
color: #fff; /* sets the default font colour to white */ |
15 |
}
|
Fügen wir nun den Untermenüs ein wenig Farbverlauf hinzu, schieben Sie ihn nach rechts und stoßen Sie den ersten Untermenüpunkt knapp an den Rand von wrap5.
Durch Hinzufügen eines box-shadow können wir den Effekt erzielen, dass sich die Untermenüelemente unter ihren jeweiligen Ebenen befinden.
1 |
ul.menuBuild ul.submenu li{ |
2 |
background: #f2f2f2; /* old browsers */ |
3 |
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */ |
4 |
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */ |
5 |
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/ |
6 |
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/ |
7 |
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */ |
8 |
color:#464646; |
9 |
position:relative; |
10 |
left:296px; /* This is how the menu ends up on the other side of the wheel */ |
11 |
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */ |
12 |
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */ |
13 |
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */ |
14 |
}
|
Wenn Sie jedem Untermenüelement Ränder hinzufügen, können Sie mehr Trennung erzielen und den Effekt erzielen, dass sich jedes Element unter einer anderen Ebene befindet.
Sie können auch eine Deckkraft für jedes Element hinzufügen, damit es von oben nach Mitte und von unten nach Mitte verblasst, wenn das mittlere Objekt die volle Deckkraft hat.
1 |
ul.menuBuild ul.submenu li.first{ |
2 |
margin-left: -12px; |
3 |
opacity: 0.70; |
4 |
}
|
5 |
|
6 |
ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third{ margin-left:-12px; |
7 |
opacity: 0.85; |
8 |
}
|
9 |
|
10 |
ul.menuBuild ul.submenu li.last{ |
11 |
margin-left:55px; |
12 |
opacity: 0.70; |
13 |
}
|
Ok, Sie haben Ihr Untermenü hinzugefügt, aber es wird weiterhin angezeigt, ohne dass ein Hauptmenü darüber bewegt wird. Um dies zu beheben, müssen wir einfach eine Anzeige keine zur [ul] hinzufügen.
1 |
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */ |
2 |
display: none; /* make child blocks hover without leaving space for them */ |
3 |
top: -169px; |
4 |
position: absolute; |
5 |
right: -86px; |
6 |
color:#565656; |
7 |
width: 160px; |
8 |
-webkit-border-radius: 0 4px 4px 0; /* webkit */ |
9 |
-moz-border-radius: 0 4px 4px 0; /* firefox */ |
10 |
border-radius: 0 4px 4px 0; /* opera */ |
11 |
padding:50px; |
12 |
height: 24px; |
13 |
background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */ |
14 |
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */ |
15 |
}
|
Jetzt wird es überhaupt nicht mehr angezeigt! Ok, lassen Sie uns fortfahren und es anzeigen lassen, nachdem ein Hauptelement über den Mauszeiger bewegt wurde. Wenn Sie li:hover > ul verwenden, können Sie feststellen, dass beim Bewegen eines Hauptmenüs [li] das [ul] für das entsprechende Untermenü mithilfe von display:block angezeigt wird.
1 |
ul.menuBuild li:hover > ul { /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */ |
2 |
display: block; /* makes the child block visible - one of the most important declarations */ |
3 |
position:absolute; |
4 |
left:0; |
5 |
width:400px; |
6 |
height:200px; |
7 |
}
|
Styling für jeden Hauptmenüpunkt.
Für reine Ästhetik können wir einen Randradius, einen Kastenschatten und einen Hintergrund hinzufügen. Notwendig ist die Erstellung von Höhe, Breite, absoluter Positionierung und oberem Rand.
Der obere Rand ermöglicht es uns, den ersten Menüpunkt nach unten zu verschieben, wo wir ihn haben möchten, und dann können wir weniger Rand verwenden, um den Rest der Elemente nach unten zu drücken.
1 |
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4{ |
2 |
-webkit-border-radius: 20px 0 0 20px; /* webkit */ |
3 |
-moz-border-radius: 20px 0 0 20px; /* firefox */ |
4 |
border-radius: 20px 0 0 20px; /* opera */ |
5 |
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */ |
6 |
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */ |
7 |
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */ |
8 |
background: #F0000F; /* old browsers */ |
9 |
background: -moz-linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /* firefox */ |
10 |
background: -webkit-gradient(linear, left top, right top, color-stop(52%,#F0000F), color-stop(60%,#CC0000), color-stop(84%,#990000), color-stop(84%,#FFF), color-stop(85%,#464646), color-stop(92%,#363636), color-stop(100%,#121212)); /* webkit */ |
11 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0000F', endColorstr='#121212',GradientType=1 ); /* ie */ |
12 |
background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*future CSS3 browsers*/ |
13 |
-pie-background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*IE fix using Pie*/ |
14 |
height: 18px; |
15 |
padding: 8px; |
16 |
position: absolute; |
17 |
margin-top:100px; |
18 |
width:138px; |
19 |
}
|
Für die verbleibenden 3 Menüelemente fügen wir jeweils einen oberen Rand hinzu, um einen gleichmäßigen Abstand zwischen ihnen zu erzielen, und einen verbleibenden Rand, um sie gegen die verschiedenen Ebenen zu stoßen.
Als nächstes müssen wir sicherstellen, dass jedem Element die Drehung hinzugefügt wird, damit wir das Menü gut um das Rad herum anpassen können.
1 |
ul.menuBuild li#menu2{ |
2 |
-webkit-transform:rotate(-10deg); /* webkit */ |
3 |
-moz-transform:rotate(-10deg); /* firefox */ |
4 |
-o-transform:rotate(-10deg); /* opera */ |
5 |
-ms-transform: rotate(-10deg); /* ie9 and future versions */ |
6 |
transform: rotate(-10deg); /* older browsers */ |
7 |
margin-top: 141px; |
8 |
margin-left:5px; |
9 |
}
|
10 |
|
11 |
ul.menuBuild li#menu3{ |
12 |
-webkit-transform:rotate(-21deg); /* webkit */ |
13 |
-moz-transform:rotate(-21deg); /* firefox */ |
14 |
-o-transform:rotate(-21deg); /* opera */ |
15 |
-ms-transform: rotate(-21deg); /* ie9 and future versions */ |
16 |
transform: rotate(-21deg); /* older browsers */ |
17 |
margin-top: 181px; |
18 |
margin-left:18px; |
19 |
}
|
20 |
|
21 |
ul.menuBuild li#menu4{ |
22 |
-moz-transform: rotate(-32deg); /* firefox */ |
23 |
-ms-transform: rotate(-32deg); /* ie9 and future versions */ |
24 |
transform: rotate(-32deg); /* older browsers */ |
25 |
-webkit-transform: rotate(-32deg); /* webkit */ |
26 |
-o-transform: rotate(-32deg); /* opera */ |
27 |
margin-top: 218px; |
28 |
margin-left:38px; |
29 |
}
|
Nachdem wir uns um die Hauptmenüpunkte gekümmert haben, werden wir dasselbe für das Untermenü tun, außer dass wir die Menüpunkte nicht um das Rad drehen, sondern direkt auf und ab bewegen sollen. Dazu müssen wir die Drehung des Hauptmenüs kompensieren, indem wir jedem Untermenü eine Drehung hinzufügen.
Wie im Hauptmenü müssen wir einen oberen Rand hinzufügen, um den Abstand zwischen den einzelnen auszugleichen, und die einzelnen Untermenüelemente nach rechts verschieben, damit sie noch näher an den jeweiligen Ebenen liegen.
1 |
ul.menuBuild li#menu1 > ul{ |
2 |
margin-top:0; |
3 |
left:20px; |
4 |
}
|
5 |
|
6 |
ul.menuBuild li#menu2 > ul{ |
7 |
-webkit-transform:rotate(10deg); /* webkit */ |
8 |
-moz-transform:rotate(10deg); /* firefox */ |
9 |
-o-transform:rotate(10deg); /* opera */ |
10 |
-ms-transform: rotate(-10deg); /* ie9 and future versions */ |
11 |
transform: rotate(-10deg); /* older browsers */ |
12 |
left: 24px; |
13 |
margin-top: 6px; |
14 |
}
|
15 |
|
16 |
ul.menuBuild li#menu3 > ul{ |
17 |
-webkit-transform:rotate(21deg); /* webkit */ |
18 |
-moz-transform:rotate(21deg); /* firefox */ |
19 |
-o-transform:rotate(21deg); /* opera */ |
20 |
-ms-transform: rotate(-21deg); /* ie9 and future versions */ |
21 |
transform: rotate(-21deg); /* older browsers */ |
22 |
left: 27px; |
23 |
margin-top: 16px; |
24 |
}
|
25 |
|
26 |
ul.menuBuild li#menu4 > ul{ |
27 |
-webkit-transform:rotate(32deg); /* webkit */ |
28 |
-moz-transform:rotate(32deg); /* firefox */ |
29 |
-o-transform:rotate(32deg); /* opera */ |
30 |
-ms-transform: rotate(32deg); /* ie9 and future versions */ |
31 |
transform: rotate(32deg); /* older browsers */ |
32 |
left: 28px; |
33 |
margin-top: 27px; |
34 |
}
|
Schließlich können wir ein optionales Styling hinzufügen, um die Schriftarten auszublenden und beim Bewegen des Mauszeigers wieder fest zu machen. Dadurch wird jedes Element für den Benutzer nach vorne gebracht, wenn er mit der Maus darüber fährt.
Diese Stile sind nicht erforderlich, damit das Menü funktioniert, aber sie fügen einige nette Effekte hinzu und erhöhen die Benutzerfreundlichkeit.
1 |
ul.menuBuild ul.submenu li a{ |
2 |
color:#464646; /* the color of submenu fonts */ |
3 |
opacity:0.65; /* This blends the font in with the background */ |
4 |
filter:alpha(opacity=65); |
5 |
}
|
6 |
|
7 |
ul.menuBuild ul.submenu li a:hover{ |
8 |
opacity:1.0; /* and this brings the font opacity back to 100% */ |
9 |
filter:alpha(opacity=100) |
10 |
}
|
11 |
|
12 |
ul.menuBuild li a { /* for the main menu links */ |
13 |
color: #FFBE8F; |
14 |
display: block; |
15 |
width: 100%; |
16 |
}
|
17 |
|
18 |
ul.menuBuild li:hover > a { |
19 |
color: #fff; |
20 |
border-left:double 5px #880000; /* the indicator for when an item is hovered over */ |
21 |
} /* do not use display: block; */ |
Wenn Sie jedes einzelne Untermenü weiter formatieren möchten, können Sie den folgenden Code verwenden...
1 |
.sub1, .sub2, .sub3, .sub4{ |
2 |
}
|
Nachdem Sie den letzten Teil abgeschlossen haben, sollten Sie so etwas haben... Noch einmal, wenn Ihr Teil nicht wie das Bild unten aussieht, machen Sie sich keine Sorgen, gehen Sie einfach zurück und überprüfen Sie Ihren Code.
Credits: Das mittlere Bild stammt aus der Envato-Assets-Bibliothek.
Was ist mit IE?
Nun, für IE können wir CSSPIE in einem separaten Stylesheet verwenden. Ich werde nicht viel darauf eingehen, da der IE selbst mit diesem Fix nicht richtig angezeigt wird. Wenn Sie eine bessere Lösung kennen, lassen Sie es mich bitte in den Kommentaren wissen.
Mithilfe des Verhaltens können wir die csspie-PHP-Datei aufrufen, um dem IE mitzuteilen, dass die Verwendung der CSS3-Stile in Ordnung ist. Also hier ist, wie es funktionieren wird...
1 |
ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third, ul.menuBuild ul.submenu li.last, ul.menuBuild li > ul, ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu2 > ul, ul.menuBuild li#menu3 > ul, ul.menuBuild li#menu4 > ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder, .completer, |
2 |
.completer2{behavior: url(styles/csspie/PIE.php); } /* CSS3 IE fix - Supports 'border-radius', 'box-shadow', 'border-image', -pie-background', liinear-gradients', 'RGBA' */ |
Ein paar andere IE-Korrekturen gehen so...
1 |
ul.menuBuild ul.submenu li{filter:alpha(opacity=70);} /* IE has too many problems for gradual opacity so we'll just use 70 for all submenus*/ |
2 |
|
3 |
.completer, .completer2{display:none;} /* transform doesn't work properly so we'll just hide the completers */ |
4 |
|
5 |
.nav-holder{ border-bottom-style:none; height:0px;} |
Du bist fertig!
Ich hoffe euch hat dieses Tutorial gefallen! Denken Sie daran, dass die CSS3-Unterstützung begrenzt ist. Wenn Sie Kompatibilität mit allen jemals erstellten Browsern wünschen, gibt es andere Möglichkeiten, die gleiche Aufgabe wie die Verwendung von Bildern und etwas Javascript auszuführen. Wenn Sie ein Tutorial zu den anderen Menüstilen, zur Verwendung der Javascript-Version oder einfach zur Verwendung fantastischerer CSS3-Effekte wünschen, lassen Sie es mich in den Kommentaren wissen und ich werde einige für Sie zusammenstellen! Hinterlassen Sie Ihre Kommentare und Fragen unten ;)
Sei geduldig und lerne weiter und bevor du es weißt, wirst du ein Meister in allem sein, was du tust!
By
