Share
Es gibt keinen besseren Weg, um CSS3 zu lernen, als sich ein aktuelles Projekt in die Finger zu bekommen, und genau das tun wir. Ich werde Ihnen zeigen, wie Sie ein fantastisches, mehrschichtiges CSS3-Radmenü erstellen, indem Sie ein paar Anfänger- und fortgeschrittene CSS-Techniken verwenden. Brechen Sie also Ihren bevorzugten Texteditor oder Ihre Lieblings-IDE heraus und beginnen Sie mit CSS3-Magie!
Heute lernen Sie, wie Sie aus den vielen verfügbaren Stilen und Farbvariationen die Zuckerstangenträne herstellen können. Sie erhalten alle Variationen in den Quelldateien. Als zusätzlichen Bonus habe ich ein wenig optionales Javascript hinzugefügt, damit Sie Ihre Bilder je nach dem schwebenden Menüpunkt drehen können. Die Quelldatei enthält sogar eine eigene Dokumentation!
Hinweis: Die Unterstützung für IE ist momentan begrenzt. Wir werden das meistens durchgehen, um den Umschlag mit den Möglichkeiten von CSS3 voranzutreiben. Aber wie bei allen Dingen am Rande der Praktikabilität bedeutet es, ein bisschen Stabilität zu opfern. Wir werden das IE-Thema jedoch am Ende des Tutorials behandeln!
Wir bieten dieses Tutorial heute in zwei verschiedenen Formaten an: Ein Video sowie ein ausführliches schriftliches Tutorial. Folgen Sie der von Ihnen bevorzugten Lernmethode (oder beides!) Und wir werden Sie in kürzester Zeit zum Ende bringen!
Das Schritt für Schritt geschriebene Tutorial ist unten. Vergewissern Sie sich, dass Sie auch die vollständige herunterladbare Quelle verwenden!
Als Erstes möchten wir einige Ebenen erstellen, die einander ü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 Aufblasen füllen und nicht viel erstellen
unnötige Floats oder absolut positionierte Elemente, so dass wir versuchen, so viel wie möglich relativ zu bleiben.
Wie Sie sehen, ist der Code ziemlich einfach. Wir haben im Wesentlichen eine Schicht übereinander gestapelt und können so ihre Position halten.
Als Nächstes möchten wir ein Bild in die Mitte des Rads oder in diesem Fall eine Träne einfügen. Dazu fügen wir einfach folgenden Code zwischen die Klasse wrap4 und die Klasse Completer ein. Dadurch wird das Bild in der Mitte der Leinwand fixiert. Wir werden nur ein rockbares Bild für dieses Bild verwenden, weil sie fantastisch sind!
Accentsconagua
Jetzt wollen wir jeder Ebene nach und nach etwas Stil verleihen.
Dies ist der Hauptcontainer für Ihr Radmenü. Es enthält auch alle universellen Schriftarten und Schriftgrößen, die alles beeinflussen, was sich im div befindet.
# menu-wrap background: # e7e7e7; / * Das wird nicht benötigt * / height: 600px; / * Dies ist wichtig und hält das Rad an Ort und Stelle, wenn Sie über die Elemente fahren. * / Font-family: serifenlos, Franklin Gothic Medium, Helvetica, Arial; / * Wenn Sie Franklin nicht verwenden, wird automatisch zur nächsten Schriftart in der Familie gewechselt. * / Font-size: 14px; / * Legt die globale Schriftgröße fest * / Buchstabenabstand: 1px! Important; / * Effektabstand zwischen Buchstaben für alle Schriftarten im Rad * /
Wir machen weiter und stellen sicher, dass das Bild in der Mitte korrekt gestaltet ist, indem es mit Rändern in der Radmitte platziert wird und einige Abmessungen sowie einen Rand hinzugefügt wird.
# Menüumbruch .orbit Höhe: 210px; Marge: 32px; / * Schiebt die Bilder in der Anzeige in die Mitte * / Position: absolut; Breite: 210px; # menu-wrap .orbit-frame border: 2px solid # 999; / * Erzeugt eine Unterteilung zwischen dem Bild und wrap5 * /
Alle Wrapper: Wir möchten einige Stile erstellen, die für alle Hauptwrapper gelten, indem Sie einen universellen Rahmenradius hinzufügen, sie alle in die Mitte setzen, eine relative Position hinzufügen, sodass alles enthalten bleibt, und die Elemente nach unten drücken, um gleichmäßige Ebenen zu erhalten bewirken.
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder / * formatiert alle Radcontainer * / -moz-border-radius: 220px 0 200px 220px; / * firefox * / -webkit-border-radius: 220px 0 200px 220px; / * webkit * / border-radius: 220px 0 200px 220px; / * oper * / margin: 0 auto; / * zentriert alle Wrapper relativ zueinander * / Position: relativ! wichtig; / * Berühren Sie nicht, es sei denn, Sie wissen, was Sie tun * / top: 20px;
Dies ist Ihre größte Schicht, die sich hinter allen anderen befindet. Wir erstellen einen roten Hintergrund mit Farbverlauf und verwenden einen festen roten Fallback für ältere Browser. Wir werden auch CSSpie verwenden, um dem IE mitzuteilen, dass die Verwendung dieser Stile in Ordnung ist. Danach müssen Sie nur noch Breite und Höhe hinzufügen, und Sie sind fertig. Sie möchten sicherstellen, dass Breite und Höhe größer sind als alle anderen Ebenen, sodass sie hinter ihnen angezeigt werden.
.wrap1 background: # FF0000; / * alte Browser * / Hintergrund: -moz-linearer Gradient (oben, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # FF0000), Farbstopp (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * dh * / Hintergrund: linearer Gradient (oben, # FF0000 0%, # 990000 100%); / * zukünftige CSS3-Browser * / -pie-background: linearer Farbverlauf (oben, # FF0000 0%, # 990000 100%); / * IE fix mit Pie * / height: 394px; Breite: 394px;
Für Wrap 2 werden wir genau dasselbe tun, nur werden wir Variationen von Weiß als Farbverlauf verwenden und einen äußeren und einen inneren Kästchenschatten hinzufügen, um einen leichten Abschrägungseffekt plus den Hintergrundschatten zu erzeugen. Dann müssen wir die Breite und Höhe um etwa 40 Pixel kleiner machen als die Hauptschicht, um sie schön und gerade zu machen.
.wrap2 background: #FFFFFF; / * alte Browser * / background: -moz-linearer Gradient (oben, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / background: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # FFFFFF), Farbstopp (100%, # DCBE8F)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * dh * / Hintergrund: linearer Gradient (oben, #FFFFFF 0%, # DCBE8F 100%); / * zukünftige CSS3-Browser * / -pie-background: linearer Gradient (oben, #FFFFFF 0%, # DCBE8F 100%); / * IE fix mit Pie * / height: 354px; Breite: 354px; -moz-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65); -webkit-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65); Box-Schatten: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) Einfügung;
Wir wiederholen nun den Vorgang für alle anderen Umhüllungen mit unterschiedlichen Farbverläufen und machen jede Ebene um 40 Pixel kleiner als die letzte.
.wrap3 background: # FF0000; / * alte Browser * / Hintergrund: -moz-linearer Gradient (oben, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # FF0000), Farbstopp (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * dh * / Hintergrund: linearer Gradient (oben, # FF0000 0%, # 990000 100%); / * zukünftige CSS3-Browser * / -pie-background: linearer Farbverlauf (oben, # FF0000 0%, # 990000 100%); / * IE fix using Pie * / height: 314px; Breite: 314px; .wrap4 border: 2px solid # FF0000; Hintergrund: # 990000; / * alte Browser * / Hintergrund: -moz-linearer Gradient (oben, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / background: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 990000), Farbstopp (55%, # CC0000), Farbstopp (57%, # FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "# FF0000", GradientType = 0); / * dh * / Hintergrund: linearer Gradient (oben, # 990000 0%, # CC0000 55%, # FF0000 57%); / * zukünftige CSS3-Browser * / -pie-background: linearer Verlauf (oben, # 990000 0%, # CC0000 55%, # FF0000 57%); / * IE-Fix mithilfe von Pie * / -moz-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0.32), 5px 5px 9px 6px rgba (221, 252, 116, 0,81) Einfügung; -webkit-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32), 5px 5px 9px 6px rgba (221, 252, 116) 0,81) Einfügung; Box-Schatten: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32), 5px 5px 9px 6px rgba (221, 252, 116, 0.81) ; Höhe: 274px; Breite: 274px;
Jetzt können wir wrap5 und den Nav-Halter stylen, der alle Menüpunkte an Ort und Stelle hält. Für den Candycane-Stil werden wir einen schwarzen Kontrast hinzufügen, während wrap5 weiß ist und als Container für den Bild in der Mitte. Was wir hier tun, ist das Ausschneiden des Hintergrunds, so dass Sie durch wrap5 und den Nav-Halter sehen können. Die anderen Ebenen erscheinen dahinter und das mittlere Bild. Nachdem Sie es transparent gemacht haben, fügen wir dem Nav-Halter einen schwarzen Rand und dem Wrap5 einen weißen Rand hinzu. Die Umrandung des Nav-Inhabers sollte auf der rechten Seite (für die Untermenüs) verborgen, auf der linken Seite (für die Hauptmenüs) verdoppelt und für den Rest solide sein, um einen schönen und einfachen Effekt zu erzeugen, während die Anzahl der Ebenen minimiert wird hinzufügen. Mit diesem Effekt können Sie normalerweise bis zu 5 oder 6 neue Ebenen hinzufügen. Dies spart viel Code.
Diesmal sind die Breite und Höhe des Wrap5 um 60px niedriger als die anderen Layer, um es wieder schön und gleichmäßig zu machen. Ein weiterer 10px-Druck am oberen Rand hilft beim Ausrichten der Ebene, und ein innerer Kästchenschatten gibt uns eine schöne Perspektive auf den Abstand zwischen wrap5 und dem mittleren Bild.
Durch Hinzufügen einer obersten 0 zum Nav-Inhaber werden die Ebenen automatisch an den anderen ausgerichtet. Wir werden auch einen negativen Rand für die weitere Ausrichtung links oben verwenden und eine proportionale Höhe / Breite erstellen, damit sie gut auf den anderen Ebenen liegt.
.wrap5 -moz-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75), 5px 5px 5px 0 rgba (0, 0, 0, 0,75); -webkit-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75), 5px 5px 5px 0 rgba (0, 0, 0, 0,75); Box-Schatten: 9px 9px 5px 0 rgba (0, 0, 0, 0,75), 5px 5px 5px 0 rgba (0, 0, 0, 0,75); Grenze: 20px fest #FFF; / * erstellt den Wrap, um das Bild dahinter zu sehen * / height: 214px; oben: 10px; / * zentriere das Element * / width: 214px; .nav-holder Hintergrund: keine Wiederholung Blättern 0 0 transparent; Rahmenfarbe: # 121212; / *** Die Grenzdeklarationen werden verwendet, um den endgültigen Wrapper zu erstellen, die mittlere Durchsicht und blendet den rechten Rand aus, um die Untermenüs anzuzeigen. * / Border-style: solid hidden double double; Randbreite: 73px mittel 73px 73px; Höhe: 252px; Marge: -92px; / * zentriert das Objekt auf relative Elemente * / top: 0; Breite: 324px;
"Der Rand des Nav - Inhabers sollte auf der rechten Seite (für die Untermenüs) verborgen, auf der linken Seite (für die Hauptmenüs) verdoppelt und für den Rest solide sein, um einen schönen und einfachen Effekt zu erzeugen, während die Anzahl der Ebenen minimiert wird hinzufügen müssen. "
Nun, das war leicht genug. Nachdem Sie damit fertig sind, haben Sie hoffentlich etwas Neues zu Ihrem Skill-Set hinzugefügt. So sollte Ihre Schöpfung jedoch bisher aussehen. Wenn es nicht so aussieht, gehen Sie bitte den Code noch einmal durch und schauen, ob Sie etwas verpasst haben. Keine Sorge, es ist wahrscheinlich etwas sehr Nebensächliches.
The Completers: Hmm? sieht das für Sie unvollständig aus? Wir müssen das Ganze noch mit ein paar Schichten beenden, die ich Completer genannt habe, damit wir Teile des mittleren Bildes ausblenden und den Navi-Halter weiter um die anderen Ebenen bringen können, um einen schönen abgerundeten Effekt zu erzeugen und ihn abzuschließen.
Was ich gerade erwähnt habe, ist ziemlich einfach. Wir können den Großteil des Stylings auf beide Completer anwenden, um weniger Code zu erhalten. Fügen Sie zu einer Seite einen Grenzradius hinzu, um eine schöne Kurve zu erstellen. Dann verwenden wir transform, um den Komplement zwischen wrap1 und wrap5 auszurichten. Das Hinzufügen unserer Hintergrundfarbe ist sehr wichtig oder es wird nichts angezeigt. Wir müssen diese Ebene absolut positionieren und nach rechts und oben verschieben, um sie perfekt aufzustellen.
.Completer1 wird für diesen Tropfenstil keine Anzeige haben. 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.
.Completer, .com2, absolute Elemente zum Ausblenden des Bildrandes ** / -moz-border-radius: 0 120px 0 113px; / * firefox * / -webkit-border-radius: 0 120px 0 113px; / * webkit * / border-radius: 0 120px 0 113px; / * opera * / -moz-transform: drehen (-20deg); / * firefox * / -webkit-transform: drehen (-21 Grad); / * webkit * / -o-transform: drehen (-20deg); / * opera * / -ms-transform: drehen (-20deg); / * ie9 und zukünftige Versionen * / umwandeln: drehen (-20deg); / * ältere Browser * / Hintergrundfarbe: # 121212; Hintergrundbild: keine; Hintergrundposition: 0 0; Hintergrundwiederholung: Wiederholung; Höhe: 135px; Position: absolut; rechts: -24px; oben: -56px; Breite: 130px; .completer Anzeige: keine; .completer2 -moz-transform: drehen (110 Grad); / * firefox * / -webkit-transform: drehen (111deg); / * webkit * / -o-transform: drehen (110 Grad); / * opera * / -ms-transform: drehen (110 Grad); / * ie9 und zukünftige Versionen * / transform: drehen (110 Grad); / * ältere Browser * / top: 195px;
Nachdem Sie die Komplettierer hinzugefügt haben, sollten Sie so etwas haben? Wenn Sie nicht dasselbe 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 hübsch enthalten und haben sanfte CSS3-Effekte!
Jetzt möchten wir Navigationslinks hinzufügen, die wie hinter verschiedenen Ebenen aussehen. Auf der linken Seite (in der doppelten Umrandung) möchten wir die Hauptmenüelemente und auf der rechten Seite (in der freien Fläche) möchten, dass die Untermenüelemente angezeigt werden, nachdem ein Hauptelement in der Schwebe gehalten wird. Sie werden überrascht sein, wie einfach dies zu einfach ist.
Es gibt einen Hover-Block, um die Menüs aktiv zu halten, wenn Sie mit der Maus über das Rad fahren. Wir möchten sicherstellen, dass das gesamte Rad abgedeckt wird. Aus Gründen der Kompatibilität mit IE werden wir einen Hintergrund mit einer Opazität von 0,01 hinzufügen, andernfalls hat IE gewonnen Das Element ist gar nicht da.
Verwenden Sie Margin-Left: 76px stellt sicher, dass Sie genügend Platz haben, um über dem Hauptmenü und dem Untermenü zu schweben und das Rad zu überqueren, ohne dass etwas verschwindet.
ul.menuBuild, ul.menuBuild ul width: 80px; / * legt die Größe der Menüblöcke fest * / background: rgb (0, 0, 0); / * RGBa mit 0,01 Opazität * / Hintergrund: rgba (0, 0, 0, 0,01); / * - eine Bg-Farbe muss enthalten sein, damit der IE ordnungsgemäß funktioniert! * / padding-left: 0px; / * stoppt den üblichen Einzug von ul * / margin-left: 76px; / * Opera 7 finales Margin und Margin-Box-Modell verursachen Probleme * /
Jetzt möchten wir die Aufzählungspunkte von jedem Menüpunkt oder [li] entfernen. Wir möchten auch sicherstellen, dass sie relativ zum Nav-Inhaber sind.
Sie können einen Randradius hinzufügen, um ein wenig mehr Stil zu erhalten. Wir machen den Hintergrund einfarbig und verschieben die Menüelemente nach links, so dass sie die Kanten des Nav-Halters kaum berühren.
Die Auffüllung, der Texteinzug und die Farbe dienen der zusätzlichen Gestaltung und sind nicht erforderlich, damit das Menü funktioniert.
ul.menuBuild li list-style-type: none; / * entfernt die Aufzählungspunkte * / position: relative; -webkit-border-radius: 0px 20px 20px 0px; / * Webkit-Browser * / -moz-border-radius: 0px 20px 20px 0px; / * firefox * / border-radius: 0px 20px 20px 0px; / * oper * / background: keine wiederholen scroll 0 0 # 464646; Höhe: 14px; links: -177px; Polsterung: 8px; Marge: 6px 0 0; Breite: 140px; Text-Gedankenstrich: 5px; / * Wie weit ist der Text vom linken Rand des Menüs entfernt * / color: #fff; / * setzt die Standardschriftfarbe auf Weiß * /
Jetzt fügen wir den Untermenüs ein wenig Farbverlauf hinzu, drücken sie nach rechts und ordnen den ersten Untermenüpunkt gerade bis zum Rand von wrap5 an.
Das Hinzufügen eines Boxschattens hilft uns dabei, den Effekt der Untermenüelemente zu erzeugen, die sich unter ihren jeweiligen Ebenen befinden.
ul.menuBuild ul.submenu li background: # f2f2f2; / * alte Browser * / Hintergrund: -moz-linearer Gradient (links, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / background: -webkit-gradient (linear, links oben, rechts oben, Farbstopp (0%, # 565656), Farbstopp (3%, # 666), Farbstopp (14%, # F F F)); / * webkit * / background: URL (bg-image.png) Wiederholung, linearer Gradient (links, # 565656 0%, # 666 3%, #FFF 14%); / * zukünftige CSS3-Browser * / -pie-background: URL (bg-image.png) no-repeat, linearer Farbverlauf (links, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", GradientType = 1); * / / * ie * / color: # 464646; Position: relativ; links: 296px; / * So endet das Menü auf der anderen Seite des Rades * / -webkit-box-shadow: -2px 3px 12px -7px # 161616; / * webkit browser * / box-shadow: 16px 0 10px -8px # 464646 inset; / * oper * / -moz-box-shadow: -2px 3px 12px -7px # 161616; /* Feuerfuchs */
Durch Platzieren von Rändern für jeden Untermenüpunkt können wir mehr Trennung erzeugen und den Effekt erzielen, dass sich jeder unter einer anderen Ebene befindet.
Sie können auch eine Deckkraft für jedes Element hinzufügen, um es von oben nach unten und von unten nach unten zu verblenden, wenn das mittlere Element die volle Deckkraft hat.
ul.menuBuild ul.submenu li.first margin-left: -12px; Deckkraft: 0,70; ul.menuBuild ul.submenu li.sekunden, ul.menuBuild ul.submenu li.drei margin-left: -12px; Deckkraft: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; Deckkraft: 0,70;
Ok, Sie haben also ein Untermenü hinzugefügt, es wird jedoch weiterhin angezeigt, ohne dass das Hauptmenü darüber angezeigt wird. Um dies zu beheben, müssen wir einfach eine Anzeige hinzufügen..
ul.menuBuild li> ul / * verwendet den Selector>, um zu verhindern, dass viele Browser (und IE - siehe unten) untergeordnete ULs ausblenden * / display: none; / * Untergeordnete Blöcke schweben lassen, ohne Platz für sie zu lassen * / top: -169px; Position: absolut; rechts: -86px; Farbe: # 565656; Breite: 160px; -webkit-border-radius: 0 4px 4px 0; / * webkit * / -moz-border-radius: 0 4px 4px 0; / * firefox * / border-radius: 0 4px 4px 0; / * oper * / padding: 50px; Höhe: 24px; Hintergrund: rgb (255, 255, 255); / * Fallback für Webbrowser, die RGBa nicht unterstützen * / background: rgba (255, 255, 255, 0.00); / * RGBa mit 0,01 Deckkraft * /
Jetzt erscheint es überhaupt nicht! Ok, lass uns fortfahren und es anzeigen lassen, nachdem ein Hauptartikel über den Bildschirm gezogen wurde. Wenn Sie li: hover> ul verwenden, können Sie feststellen, dass wenn ein Hauptmenü [li] über den Mauszeiger gezogen wird, wir [ul] für das entsprechende Untermenü mit dem Block display: anzeigen.
ul.menuBuild li: hover> ul / * eine der wichtigsten Deklarationen: Der Browser muss das Schweben über beliebige Elemente erkennen. Die Ziele> betreffen nur das untergeordnete Element ul, nicht die untergeordneten Elemente dieses Kindes ul * / display: block; / * macht den untergeordneten Block sichtbar - eine der wichtigsten Deklarationen * / position: absolut; links: 0; Breite: 400px; Höhe: 200px;
Für reine Ästhetik können wir einen Grenzradius, einen Boxschatten und einen Hintergrund hinzufügen. Es ist notwendig, die Höhe, Breite, absolute Positionierung und den oberen Rand zu erstellen.
Der obere Rand ermöglicht es uns, den ersten Menüpunkt nach unten zu drücken, wo wir ihn haben möchten, und dann können wir den Rest der Elemente mit weniger Rand nach unten drücken.
ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4 -webkit-border-radius: 20px 0 0 20px; / * webkit * / -moz-border-radius: 20px 0 0 20px; / * firefox * / border-radius: 20px 0 0 20px; / * oper * / -webkit-box-shadow: -2px 7px 8px -7px # 161616; / * webkit * / -moz-box-shadow: -2px 7px 8px -7px # 161616; / * firefox * / box-shadow: -16px 0 8px -7px # 222222 inset; / * oper * / background: # F0000F; / * alte Browser * / Hintergrund: -moz-linearer Farbverlauf (links, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / background: -webkit-gradient (linear, links oben, rechts oben, Farbstopp (52%, # F0000F), Farbstopp (60%, # CC0000), Farbstopp (84%, # 990000), Farbstopp (84%, # FFF), Farbstopp (85%, # 464646), Farbstopp (92%, # 363636), Farbstopp (100%, # 121212)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * ie * / Hintergrund: linearer Gradient (links, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * zukünftige CSS3-Browser * / -pie-background: linearer Farbverlauf (links, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * IE fix mit Pie * / height: 18px; Polsterung: 8px; Position: absolut; Rand oben: 100px; Breite: 138px;
Für die verbleibenden 3 Menüpunkte 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 die Drehung zu jedem Element hinzugefügt wird, damit wir das Menü gut um das Rad herum anpassen können.
ul.menuBuild li # menu2 -webkit-transform: drehen (-10deg); / * webkit * / -moz-transform: drehen (-10deg); / * firefox * / -o-transform: drehen (-10 Grad); / * opera * / -ms-transform: drehen (-10 Grad); / * ie9 und zukünftige Versionen * / umwandeln: drehen (-10deg); / * ältere Browser * / margin-top: 141px; Rand links: 5px; ul.menuBuild li # menu3 -webkit-transform: drehen (-21deg); / * webkit * / -moz-transform: drehen (-21deg); / * firefox * / -o-transform: drehen (-21 Grad); / * opera * / -ms-transform: drehen (-21 Grad); / * ie9 und zukünftige Versionen * / transform: drehen (-21deg); / * ältere Browser * / margin-top: 181px; Rand links: 18px; ul.menuBuild li # menu4 -moz-transform: drehen (-32deg); / * firefox * / -ms-transform: drehen (-32deg); / * ie9 und zukünftige Versionen * / transform: drehen (-32deg); / * ältere Browser * / -webkit-transform: drehen (-32deg); / * webkit * / -o-transform: drehen (-32deg); / * oper * / margin-top: 218px; Rand links: 38px;
Nachdem wir uns um die Hauptmenüelemente gekümmert haben, werden wir dasselbe für das Untermenü tun, mit der Ausnahme, dass die Menüelemente nicht um das Rad gedreht werden müssen, sondern sie gerade nach oben und unten gehen sollen. Dazu müssen wir die Drehung des Hauptmenüs durch Hinzufügen einer Drehung zu jedem Untermenü ausgleichen.
Wie beim Hauptmenü müssen wir einen oberen Rand hinzufügen, um den Abstand zwischen den einzelnen Bereichen auszugleichen, und jedes Untermenüelement nach rechts schieben, sodass es noch näher an den jeweiligen Ebenen liegt.
ul.menuBuild li # menu1> ul margin-top: 0; links: 20px; ul.menuBuild li # menu2> ul -webkit-transform: drehen (10 Grad); / * webkit * / -moz-transform: drehen (10 Grad); / * firefox * / -o-transform: drehen (10 Grad); / * opera * / -ms-transform: drehen (-10 Grad); / * ie9 und zukünftige Versionen * / umwandeln: drehen (-10deg); / * ältere Browser * / left: 24px; Rand oben: 6px; ul.menuBuild li # menu3> ul -webkit-transform: drehen (21 Grad); / * webkit * / -moz-transform: drehen (21 Grad); / * firefox * / -o-transform: drehen (21 Grad); / * opera * / -ms-transform: drehen (-21 Grad); / * ie9 und zukünftige Versionen * / transform: drehen (-21deg); / * ältere Browser * / left: 27px; Rand oben: 16px; ul.menuBuild li # menu4> ul -webkit-transform: drehen (32 Grad); / * webkit * / -moz-transform: drehen (32deg); / * firefox * / -o-transform: drehen (32 Grad); / * opera * / -ms-transform: drehen (32 Grad); / * ie9 und zukünftige Versionen * / umwandeln: drehen (32 Grad); / * ältere Browser * / left: 28px; Rand oben: 27px;
Zum Schluss können wir ein optionales Styling hinzufügen, um die Schriftarten auszublenden und beim Überfahren wieder fest werden zu lassen. Dadurch wird jedes Element für den Benutzer in den Vordergrund gerückt, wenn der Mauszeiger darüber gehalten wird.
Diese Stile sind für das Funktionieren des Menüs nicht erforderlich, fügen jedoch einige schöne Effekte hinzu und erhöhen die Benutzerfreundlichkeit.
ul.menuBuild ul.submenu li a color: # 464646; / * die Farbe der Untermenüschriftarten * / Deckkraft: 0,65; / * Dies fügt die Schrift in den Hintergrund ein * / filter: alpha (Deckkraft = 65); ul.menuBuild ul.submenu li a: hover Opazität: 1,0; / * und damit wird die Deckkraft der Schrift auf 100% zurückgesetzt. * / filter: alpha (Deckkraft = 100) ul.menuBuild li a / * für die Hauptmenü-Links * / color: # FFBE8F; Bildschirmsperre; Breite: 100%; ul.menuBuild li: hover> a color: #fff; Rahmen links: doppelt 5px # 880000; / * das Kennzeichen, wenn ein Element über * / gehalten wird / / / Anzeige nicht verwenden: blockieren; * /
Wenn Sie jedes einzelne Untermenü weiter gestalten möchten, können Sie den folgenden Code verwenden?
.1, 2, 3, 4
Nachdem Sie den letzten Teil abgeschlossen haben, sollten Sie so etwas haben? Auch wenn Ihr Bild nicht so aussieht wie das Bild unten, machen Sie sich keine Sorgen, gehen Sie einfach zurück und überprüfen Sie Ihren Code.
Credits: Das mittlere Bild stammt aus der Envato-Bestandsbibliothek.
Für IE können wir CSSPIE in einem separaten Stylesheet verwenden. Ich werde nicht viel darauf eingehen, da IE auch mit diesem Fix nicht richtig angezeigt wird. Wenn Sie eine bessere Lösung kennen, teilen Sie mir dies bitte in den Kommentaren mit.
Mit dem Verhalten können wir die PHP-Datei csspie aufrufen, um dem IE mitzuteilen, dass die CSS3-Stile in Ordnung sind. So funktioniert es jetzt?
ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.drei, 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, .com, eine .pleter2 Verhalten: URL (styles / csspie / PIE.php); / * CSS3 IE fix - Unterstützt 'border-radius', 'box-shadow', 'border-image', -pie-background ', lineare Gradienten', 'RGBA' * /
Einige andere IE-Korrekturen gehen so?
ul.menuBuild ul.submenu li filter: alpha (opacity = 70); / * Der IE hat zu viele Probleme für die schrittweise Opazität. Wir verwenden also 70 für alle Untermenüs. * / .pleter, .pleter2 display: none; / * transform funktioniert nicht richtig, also verstecken wir nur die Vervollständiger * / .nav-holder border-bottom-style: none; Höhe: 0px;
Ich hoffe, euch hat dieses Tutorial gefallen! Denken Sie daran, dass die Unterstützung für CSS3 begrenzt ist. Wenn Sie die Kompatibilität mit allen Browsern, die jemals erstellt wurden, unterstützen möchten, gibt es andere Möglichkeiten, die gleiche Aufgabe wie das Verwenden von Bildern und Javascript zu erfüllen. Wenn Sie ein Tutorial zu den anderen Menüstilen haben möchten, wie Sie die Javascript-Version verwenden oder einfach nur fantastische CSS3-Effekte verwenden, lassen Sie es mich in den Kommentaren wissen und ich werde etwas für Sie herausfinden! Hinterlassen Sie Ihre Kommentare und Fragen ;)
Sei geduldig und lerne weiter, und bevor du es weißt, wirst du bei allem, was du tust, ein Meister sein!
