Ein ziemlich häufiges Layout eines Site-Menüs, wenn der Container damit die gesamte auf der Seite verfügbare Breite einnimmt. In diesem Fall grenzt das erste Element an den linken Rand und das letzte an den rechten Rand und der Abstand zwischen allen Elementen ist gleich. Heute verraten wir Ihnen, wie das geht.
Wir bieten Ihnen ein Beispiel für die Implementierung eines Gummimenüs mithilfe von CSS für Ihre Ressource. In diesem Menü befinden sich die Elemente in einer Zeile. Es wird kein Javascript verwendet. Der Inhalt des Menüs wird in einer regulären Liste zusammengefasst. Das Hauptmerkmal eines solchen Menüs ist seine Vielseitigkeit, die sich darin ausdrückt, dass sowohl die Anzahl als auch die Länge der Elemente beliebig sein kann.
Wie kann man das umsetzen?Jeder Programmierer kann seinen eigenen Weg zur Lösung eines bestimmten Problems anbieten. Es hängt alles von seiner Vorstellungskraft, seinem Professionalitätsgrad und seinen Fähigkeiten ab. Die häufigste Lösung für dieses Problem ist die Verwendung einer Tabelle. Außerdem würden viele die Verwendung von Javascript vorschlagen. Ich beeile mich, diejenigen zu enttäuschen, die vorschlagen würden, die Anzeigeeigenschaft mit der Wertetabelle oder Tabellenzelle zu verwenden. Diese Methode ist nicht ausreichend browserübergreifend kompatibel.
Unsere LösungUnser Angebot basiert auf einer soliden Grundlage aus HTML5- und CSS3-Kenntnissen.
Der Kern des Prozesses basiert auf der text-align-Eigenschaft mit dem justify-Wert. Für diejenigen, die es vergessen haben, erinnere ich Sie daran: Diese Eigenschaft richtet die Textausrichtung über die gesamte Breite des Containers aus.
Beim Einsatz unserer Lösung sind zwei zwingende Regeln zu beachten. Die erste besteht darin, dass die Breite des Menüelementcontainers kleiner sein sollte als der Text. Das heißt, nicht in einer Zeile. Die zweite wichtige Regel ist, dass Wörter gleichmäßig gestreckt werden, unabhängig davon, ob sie zum selben Punkt gehören oder nicht.
Nachfolgend finden Sie den Code, der als Beispiel für die Erstellung eines Gummimenüs dient:
HTML
< ul> < li>< a href= "#" >Heim< li>< a href= "#" >Blog< li>< a href= "#" >Nachricht< li>< a href= "#" >Beliebt< li>< a href= "#" >Neue Artikel
ul ( text- align: justify; overflow: versteckt; /* beseitigt die Nebenwirkungen der Methode */ height: 20px; /* beseitigt auch unnötige */ Cursor: Standard; /* legt die anfängliche Form des Cursors fest */ margin : 50px 100px 0 100px; Hintergrund: #eee; padding: 5px; ) li ( display: inline; /* macht Menüelemente zum Text */ ) li a ( display: inline- block; /* eliminiert Wortumbrüche im Menü */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* Bilden der zweiten Zeile zum Ausarbeiten der Methode */ content: "1" ; margin- left: 100 %; height: 1px; Überlauf: versteckt; Anzeige: Inline-Block;
Um im guten alten Internet Explorer zu arbeiten, müssen Sie zusätzlich den folgenden Code zum CSS hinzufügen
ul ( z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* brauche nur ie6 */ height: 30px; )
Nachdem wir die erforderlichen Eigenschaftswerte und den Code angegeben haben, erhalten wir dieses Gummimenü:
Nachteile der Methode6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
Ein horizontales Menü ist eine Liste von Website-Abschnitten, daher ist es logischer, es innerhalb des Elements zu platzieren
- , und wenden Sie dann CSS-Stile auf seine Elemente an. Dieses Menülayout ist aufgrund der offensichtlichen Vorteile bei der Positionierung auf einer Webseite am gebräuchlichsten. So erstellen Sie ein horizontales Menü: Layout- und Designbeispiele
HTML-Markup und grundlegende Stile für ein horizontales Menü
- Menüpunkt
- Menüpunkt
- Menüpunkt ...
- Block-Wrapper für Menü
- das Menü selbst, angezeigt durch eine Liste mit Aufzählungszeichen (ul-Tag)
- Nun, es gibt darin Menüpunkte, und in ihnen gibt es dementsprechend bereits Links
- Vertical-Align: Bottom – Diese Eigenschaft ist notwendig, damit der Text in einem Menüelement, wenn er zwei Zeilen umfasst, gleichmäßig angezeigt wird. Wenn wir das Menü erstellen, können Sie diese Eigenschaft entfernen, hineinzoomen, sodass die Elemente komprimiert werden und der Text auf zwei Zeilen verschoben wird, und Sie werden ein Anzeigeproblem sehen. Geben Sie die Immobilie zurück und alles wird gut.
- display: table-cell – Da wir das Anzeigemenü selbst als Tabellenzeile festlegen, wäre es logisch, seine Elemente so festzulegen, dass sie als Zellen in einer Tabelle angezeigt werden. Das ist ein Muss.
- width: auto – die Breite wird automatisch berechnet, abhängig von der Länge des Textes im Absatz
- text-align: center – dies dient nur dazu, den Text darin zu zentrieren
- Höhe: 50 Pixel – Stellen Sie die Höhe auf 50 Pixel ein
- Nun, border-right ist nur ein Rand auf der rechten Seite, ein Trennzeichen für Elemente
- Die Eigenschaft text-decoration überschreibt die Standardunterstreichung für Links
- width: 1000px ist vielleicht die wichtigste Zeile. Sie müssen die Links auf ungefähr diese Breite einstellen, vielleicht weniger, aber auf jeden Fall größer als der breitestmögliche Menüpunkt. Die Links werden nicht 1000 Pixel breit sein, da die Breite durch das li-Menüelement begrenzt wird, dessen Breite auf „Auto“ eingestellt ist. Dadurch kann jedoch sichergestellt werden, dass sie für jede beliebige Anzahl von Elementen im Menü immer 100 beträgt Prozent der Breite.
- Vertical-Align: Middle und Display: Table-Cell – der erste richtet den Text vertikal zur Mitte aus und der zweite zeigt auch Links als Zellen an. Beide Eigenschaften werden benötigt.
- Schriftart – nun, das ist nur eine Reihe von Einstellungen für die Schriftart. Lesen Sie in diesem Artikel mehr über CSS-Eigenschaften für Schriftarten.
- Heim
- Über uns
- Unsere Leistungen
- Unser Service Nr. 1
- Unser Service Nr. 2
- Unser Service Nr. 3
- Unser Service Nr. 4
- Dienst 5
- Nachricht
- Kontakte
- das Menü wird dynamisch gezeichnet;
- die Einzüge vom Trennzeichen zum Absatz sind überall gleich;
- schöneres und flexibleres Design.
- mit einem VIP-Pad, wenn man zur Seite zeigt
- mit einem Popup-Dropdown der dritten Ebene
- Heim
- Über uns
- Unsere Leistungen
- Unser Service Nr. 1
- Ergänzung zur Leistung 1
- Ergänzung zur Leistung 2
- Unser Service Nr. 2
- Ergänzung zur Leistung 3
- Ergänzung zur Leistung 4
- Unser Service Nr. 3
- Unser Service Nr. 4
- Dienst 5
- Unser Service Nr. 1
- Nachricht
- Kontakte
- Anfahrtskarte
- Karten-Add-on
- Ergänzung für Karte 2
- Feedback-Formular
- Anfahrtskarte
Standardmäßig sind alle Listenelemente vertikal angeordnet und nehmen die gesamte Breite des Containerelements ein, das wiederum die gesamte Breite seines Containerblocks einnimmt.
HTML-Markup für die horizontale Navigation
Ein horizontales Menü, das sich innerhalb eines Tags befindet, kann zusätzlich innerhalb des ... und/oder ...-Elements platziert werden. Dadurch erhält das HTML-Markup eine semantische Bedeutung und bietet zudem eine zusätzliche Möglichkeit zur Formatierung des Menüblocks.
Es gibt verschiedene Möglichkeiten, sie horizontal zu platzieren. Zuerst müssen Sie die Standardbrowserstile für Navigationselemente zurücksetzen:
Ul ( list-style: none; /*Listenmarkierungen entfernen*/ margin: 0; /*den oberen und unteren Rand entsprechend 1em entfernen*/ padding-left: 0; /*den linken Abstand entsprechend 40px entfernen*/ ) a (Textdekoration: keine; /*Unterstreichung des Linktextes entfernen*/)
Methode 1. li (Anzeige: inline;)Listenelemente in Kleinbuchstaben umwandeln. Dadurch werden sie horizontal positioniert, wobei auf der rechten Seite zwischen ihnen ein Abstand von 0,4 cm hinzugefügt wird (berechnet relativ zur Schriftgröße). Um es zu entfernen, fügen Sie einen negativen rechten Rand für li li (margin-right: -4px;) hinzu. Als nächstes gestalten wir die Links nach unseren Wünschen.
Methode 2. li (float: left;)Listenelemente schweben lassen. Dadurch sind sie horizontal positioniert. Die Höhe des Containerblocks ul wird Null. Um dieses Problem zu lösen, fügen wir (overflow: versteckt;) zu ul hinzu, erweitern es und ermöglichen so, dass es schwebende Elemente enthält. Fügen Sie für Links einen (display: block;) hinzu und gestalten Sie sie nach Ihren Wünschen.
Methode 3. li (Anzeige: inline-block;)Listenelemente inline-blockieren. Sie liegen horizontal, auf der rechten Seite entsteht wie im ersten Fall eine Lücke. Fügen Sie für Links einen (display: block;) hinzu und gestalten Sie sie nach Ihren Wünschen.
Methode 4. ul (Anzeige: flex;)Machen Sie die UL-Liste mithilfe von zu einem flexiblen Container. Dadurch werden die Listenelemente horizontal angeordnet. Wir fügen einen (display:block;) für die Links hinzu und formatieren sie wie gewünscht.
1. Adaptives Menü mit Unterstreichungseffekt, wenn Sie mit der Maus über einen Link fahren @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( Listenstil: keine; Rand: 40px 0 5px; Polsterung: 25px 0 5px; Textausrichtung: zentriert; Hintergrund: weiß; ) .menu-main li (Anzeige: inline-block;).menu- main li:after ( Inhalt: „|“; Farbe: #606060; Anzeige: inline-block; Vertical-align:top; ) .menu-main li:last-child:after (Inhalt: none;) .menu-main a ( Textdekoration: keine; Schriftfamilie: „Ubuntu Condensed“, serifenlos; Buchstabenabstand: 2 Pixel; Position: relativ; Polsterung unten: 20 Pixel; Rand: 0 34 Pixel 0 30 Pixel; Schriftgröße: 17 Pixel; Texttransformation: Großbuchstaben; Anzeige: Farbe .2s; .menu-main a:visited (Farbe: #9d999d;). ) .menu-main a:before, .menu-main a:after ( Inhalt: ""; Position: absolut; Höhe: 4px; oben: automatisch; rechts: 50%; unten: -5px; links: 50%; Hintergrund : #feb386; Übergang: .8s; ) .menu-main a:hover:before, .menu-main .current:before (links: 0; .menu-main .current:after (rechts:). 0;) @media (max-width: 550px) ( .menu-main (padding-top: 0;).menu-main li (display: block; ) .menu-main li:after (content: none;) . menu-main a ( padding: 25px 0 20px; @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( position: relative; Hintergrund: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 1px; border-top: 3px solid #575350; margin-bottom: 2px; border-bottom: 3px solid #575350; border-bottom: 1px solid # 575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; .menu-main (list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; ) .menu-main:before, .menu-main:after ( content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translatorY(-50% ); (Textdekoration: keine; Anzeige: Inline-Block; Rand: 2px 5px; Abstand: 6px 15px; Schriftfamilie: „PT Sans“, serifenlos; Schriftgröße: 16px; Farbe: #777777; Rand unten : 1px durchgehend transparent; Übergang: .3s linear; ) .menu-main .current, .menu-main a:hover ( Randradius: 3px; Hintergrund: #f3ece1; Farbe: #313131; Textschatten: 0 1px 0 #fff; Randfarbe: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) ) 3. Responsives gewelltes Menü @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( Listenstil: keine; Polsterung: 0 30 Pixel; Rand: 0; Schriftgröße: 18 Pixel; Textausrichtung: Mitte; Position: relativ; Hintergrund: weiß; ) .menu-main: after ( Inhalt: ""; Position: absolut; unten: -20px; weiß 70%, rgba(255,255,0) 0 -10px; wiederholen: repeat-x; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: inline-block; padding: 10px 30px; Font-family: „PT Sans Caption", serifenlos; Übergang: .3s linear; -main a:before, .menu-main a:after ( Inhalt: ""; Position: absolut; oben: calc(50% - 3px); Breite: 6px; Höhe: 6px; Randradius: 0; Deckkraft: .menu-main a:before (links: 5px;) .menu-main a:after (rechts: 5px;) .menu-main a. current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after (Deckkraft: 1; ) .menu-main a.current, .menu- main a:hover (color: #F58262;) @media(max-width:680px) ( .menu-main li (display: block;) ) 4. Adaptives Menü ein das Band @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; Position: relativ; Hintergrund: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12) .top-menu:before, .top-menu:after ( Inhalt: ""; Position: absolut ; z -index: 2; width: 100%; height: 3px; ) .top-menu:after (bottom: 0; border-top: 1px gestrichelt rgba(255,255,255,2); ) none; padding: 0; text-align: center; .menu-main:after ( content: ""; position: absolute; width: 0; top: 8px; border-top: 18px solid #5A394E; transform: rotation(360deg); z-index: -1 .menu-main:before (left: -30px; border-left : 12px solid rgba(255, 255, 255, 0 ) .menu- main:after ( right: -30px; border-right: 12px solid rgba(255, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; Font-family: „PT Sans Caption", serifenlos; Farbe: Weiß; Übergang: .3s linear; ) .menu-main a.current, .menu-main a:hover (Hintergrund: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (Inhalt: keiner;) .menu-main a (display: block;) ) 5. Responsives Menü mit einem Logo in der Mitte @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( Position: relativ; Hintergrund: rgba(34,34,34,.2); ) .menu-main ( Listenstil: keiner; Rand: 0; Polsterung: 0; ) .menu-main:after ( Inhalt: ""; Anzeige: Tabelle; klar: beide; ) .left-item (float: left;) .right-item (float: right;).navbar-logo ( Position: absolut; links: 50 %; oben : 50 %; transform: Translate(-50 %, -50 %); Buchstabenabstand: 2px; Schriftfamilie: „Arimo“, serifenlos; Farbe: weiß; .3s linear; main ( padding-top: 90px; text-align: center; ) .navbar-logo ( position: absolut; links: 50 % ; top: 10 px; transform: TranslateX(-50 %) ) .menu-main li ( float: keine; Anzeige: inline-block; ) .menu-main a ( Zeilenhöhe: normal; Auffüllung: 20px 15px; Schriftgröße: 16px; ) ) @media (max-width: 630px) ( .menu-main li ( display: block;) ) 6. Responsives Menü mit Logo auf der linken Seite @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( Hintergrund: rgba(255,255,255,.5); Box-Shadow: 3px 0 7px rgba(0,0,0,.3); Polsterung: 20px; ) .top-menu:after ( Inhalt: "" ; display: table; clear: Both; ) .navbar-logo (display: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (display: inline-block;).menu-main a ( text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; Schriftgröße: 18px; Buchstabenabstand : 2px; Schriftfamilie: „Arimo“, serifenlos; Farbe: #F73E24; Transition:.3s linear; Inhalt: „“; Breite: 9px; Position: absolut left: 50%; transform(45deg) TranslateX(6.5px); Transition: .3s linear; 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:before (transform: rotation(45deg) translatorX( -6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )Guten Tag
Oft ist es notwendig, ein horizontales Menü zu erstellen, das sich über die gesamte Breite des übergeordneten Blocks erstreckt, unabhängig davon, wie viele Elemente es enthält.
Heute möchte ich Ihnen zeigen, wie Sie ein solches Menü erstellen.
Unser Menü wird also wie folgt aussehen:
Es ist auf die volle Breite gedehnt und sticht hervor, wenn man mit der Maus darüber fährt. Die Speisekarte ist an den Seiten abgerundet.
HTML-MARKUP
|
|
...
|
Um das Menü in voller Breite darzustellen, habe ich Tabellen mit 100 % Breite verwendet. Jede Tabelle verfügt über einen Menüpunkt-Div-Container. Je nachdem, ob der erste, letzte oder mittlere Menüpunkt ein Div ist, wird die entsprechende Klasse zugewiesen.
Jeder div-Container verfügt über 2 Seitenränder mit absoluter Positionierung, die für die korrekte Anzeige notwendig sind. Wenn Sie Standardränder verwenden, springt der Text beim Wechseln von Menüelementen um 1-2 Pixel, was gut ist.
Die aktive Klasse ist für den ausgewählten Menüpunkt verantwortlich und hebt ihn hervor.
In jedem Artikel haben wir ein Bild und einen Text. Damit das alles streng in der Mitte vertikal ausgerichtet ist, verwenden wir eine Tabelle. Dank der Eigenschaft der vertikalen Ausrichtung werden unsere Menüpunkte immer reibungslos angezeigt und verschwinden nicht.
CSS-REGELN
Legen wir zunächst Stile für die allgemeine Anzeige des Menüs fest:
Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( Vertical-Align: Middle; /* Vertical Alignment */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( Breite: 100 %; Höhe: 1 Pixel; Position: relativ; Rand links: keine; Rand: links; Breite: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; Schriftstärke: fett; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px ; Vertical-Alignment: Mitte; Text-Alignment: Left; ( Breite: 30px! wichtig; Höhe: 30px! wichtig; padding-left: 15px; )
Lassen Sie uns der Schönheit halber die Ecken an den Seiten der Speisekarte abrunden:
First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-unten-left-radius: 5px; border-right: 1px solid #dadbda; Bottom-Right-Radius: 5px; -moz-border-radius-topright ;
Jetzt hat unsere Speisekarte ein schöneres Aussehen:
Bisher hat der erste Punkt keinen linken Rand. Wir werden es etwas später beheben.
Fügen wir nun Hover-Effekte für das Menü hinzu.
Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( Hintergrundfarbe: #CAE285; Hintergrundbild: -moz-linear- gradient(top, #CAE285, #9FCB56); Hintergrundbild: -webkit-gradient(linear, 0 0, 0 100 %, from(#CAE285), to(#9FCB56)); -gradient(top, #CAE285, #9FCB56); Hintergrundbild: -o-linear-gradient(oben, #CAE285, #9FCB56); Hintergrundbild: linear-gradient(nach unten, #CAE285, #9FCB56); Rand: -color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover ( border: 1px solid #9FCB56; border-left: none;
Rahmenfarbe: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )
/* Stile für Seitenränder */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) /* absolute Offsets für Ränder */ .borderLeftSecond ( left: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* behandelt die Fälle von das erste und letzte Element */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )
Das ist es!
Wir haben ein hervorragendes Menü erhalten, das sich über die gesamte Breite des Hauptblocks erstreckt! Die Elemente überlappen sich nicht, wenn Sie mit der Maus darüber fahren, und das Layout springt nicht.
Hallo. Ich habe schon sehr lange keine Beiträge mehr zum Thema HTML/CSS-Arbeit geschrieben. Kürzlich habe ich gerade angefangen, ein neues Layout zusammenzustellen, und dabei bin ich auf einen interessanten Trick gestoßen, mit dem man das Menü flexibel gestalten kann (man kann neue Elemente hinzufügen und die Größe wird nicht größer, sondern bleibt immer 100 % der übergeordneter Block). Deshalb werden wir heute ein Gummimenü mit CSS implementieren.
Wenn Sie zu faul sind, den Artikel zu lesen, können Sie sich dieses Video ansehen. Der Autor erklärt auch alles sehr gut:
Der erste Schritt ist immer das HTML-Markup. Was wären wir ohne es? Aber in unserem Fall wird alles einfach sein:
Alles ist klar, hier ist mein Markup-Code:
Es sieht alles normal aus, etwa so:
Jetzt bringen wir alles in die gewünschte Form, CSS macht sich an die Arbeit.
Schritt 2 – GrundstileAls Nächstes füge ich Stile zum Wrapper-Block hinzu. Ich stelle nämlich die maximale Breite auf 600 Pixel ein (nur um es einfacher zu machen, einen Screenshot zu machen, damit das Menü passt) und zentriere den Block auch.
Wickeln(
Hintergrund: #fff;
maximale Breite: 600 Pixel;
Rand: 0 automatisch;
}
Kommen wir nun zum Menü selbst. Ich werde die Markierungen daraus entfernen (das ul-Tag), einen linearen Hintergrundverlauf erstellen und, was am wichtigsten ist, die Eigenschaft display:table-row verwenden, damit sich der Container für das Menü wie eine Tabellenzeile verhält. Dies ist für weitere Manipulationen wichtig.
R-Menü(
Hintergrund: linearer Farbverlauf (nach rechts, #b0d4e3 0 %, #88bacf 100 %);
Anzeige: Tabellenzeile;
Listenstil: keiner;
}
Wie Sie sehen können, hat der obige Code einfach alles gelöst, worüber ich geschrieben habe. Übrigens ist es praktisch, Farbverläufe mit dem Ultimate CSS Gradient Generator-Tool zu generieren. Ich werde eines Tages wieder über ihn schreiben.
R-Menü(
vertikal ausrichten: unten;
Anzeige: Tabellenzelle;
Breite: automatisch;
Textausrichtung: Mitte;
Höhe: 50px;
border-right: 1px solid #222;
}
Bisher sieht die Speisekarte unansehnlich aus, aber das ist in Ordnung, es ist Zeit, sich daran zu erinnern.
Als letztes müssen Sie die Links innerhalb der Elemente formatieren. Hier habe ich diesen Code:
R-Menü li a(
Textdekoration: keine;
Breite: 1000px;
Höhe: 50px;
vertikal ausrichten: Mitte;
Anzeige: Tabellenzelle;
Farbe: #fff;
Schriftart: normal 14px Verdana;
}
Und so sieht das Menü jetzt aus:
Lassen Sie mich noch einmal einige Zeilen erklären:
Zum Beispiel, damit sich die Farbe eines Menüpunkts ändert, wenn man mit der Maus darüber fährt. Dies kann ganz einfach mit der Hover-Pseudoklasse implementiert werden:
R-Menü li:hover(
Hintergrundfarbe: #6bba70;
}
Toll, die Menüs sind fertig, aber das Wichtigste haben wir noch nicht überprüft – wie gummiartig es ist, wie ich versprochen habe. Nun, ich werde dem Menü noch zwei weitere Elemente hinzufügen:
Das Menü bleibt 600 Pixel breit. Die restlichen Artikel wurden einfach ein wenig geschrumpft, um 2 neue unterzubringen.
Ich füge noch einen langen Punkt hinzu:
Wie Sie sehen, ist das Menü etwas kleiner geworden und der lange Eintrag wird ganz normal angezeigt. Und wenn es nicht die Eigenschaft Vertical-Align: Bottom gäbe, von der ich Ihnen erzählt habe, würde das Menü schlechter aussehen.
Ich werde die Speisekarte auf drei Punkte reduzieren.
Die Elemente sind deutlich freier geworden, das Menü selbst hat sich in der Breite jedoch nicht verändert. Also haben wir ein Menü aus 100 % Gummi zusammengestellt!
Wenn man den Wrapper-Block nicht auf eine feste, sondern auf eine maximale Breite einstellt, muss er im Prinzip nicht einmal angepasst werden. In meinem Fall habe ich die Eigenschaft max-width: 600px und wenn die Breite weniger als 600 Pixel beträgt, wird der Block einfach zusammen mit dem Bildschirm verkleinert, ohne dass ein horizontaler Bildlauf entsteht.
Nun, wenn Sie das Menü auf Mobilgeräten oder Breitbildschirmen irgendwie ändern oder korrigieren möchten, dann helfen Ihnen Medienabfragen! Viel Glück beim Erstellen der Website!
Wir setzen die Serie mit einer Lektion über Dropdown-Menüs fort. Als nächstes folgt ein horizontales Dropdown-Menü zum Selbermachen mit CSS.
Wenn Sie zufällig hierher gekommen sind oder nach einer anderen Implementierung des Dropdown-Menüs gesucht haben, empfehle ich Ihnen, zum übergeordneten Bereich zu gehen.
In diesem Abschnitt wird ein horizontales Dropdown-Menü in CSS und HTML beschrieben.
Seitennavigation:
Also, Unsere Aufgabe:
Erstellen Sie ein horizontales Menü mit einem Dropdown-Listen-CSS (auf Ul-Li-Listen), ohne jQuery und Javascript zu verwenden und auch ohne Tabellen