.
In der Mitte des Basiscontainers benötigen wir ihn stattdessen.
) Geformt in CSS am "Hamburger"-Button selbst, für dessen Hinzufügen ein Link mit der Prikhovani-Checkbox gesetzt wird. Für viele Dinge ist der Name des for-Attributs für die Checkbox-ID verantwortlich. Leeres vikoristovumo onclick-Attribut für iOS
Seite? ˅ <
ul>
<
li><
a href=
"#1"
>Einer
a>
<
li><
a href=
"#2"
>Zwei
a>
<
li><
a href=
"#3"
>Drei
a>
<
li><
a href=
"#4"
>Chotiri
a>
<
li><
a href=
"#5"
>fünf
a>
<
li><
a href=
"#6"
>Scheiße
a>
<
li><
a href=
"#7"
>м
a>
ul>
Einer Zwei Drei Chotiri fünf Scheiße м Das Layout unseres Seitenmenüs ist beendet. Es stimmt, ein anderer ist nicht unbedingt ein Trick, denn der Hintergrund verdunkelt den Hauptinhalt, wenn das Panel eingeschaltet ist. Ich bin sicher, du brauchst es, nur Verschreiben Sie am Ende des Menüs für jeden anderen Ort einen Div-Container mit einer Gesangsklasse:
<
div class
=
"mask-content"
>
div>
Die Demo hat eine Funktion zum Wechseln des Roboters. Nachdem Sie den Block kommentiert haben, können Sie ihn leicht erkennen und genauso einfach einschalten))). Vzagal, es ist einfach, gehen Sie einfach auf die HTML-Demoseite für das Skin-Element und geben Sie die findokladnishі-Kommentare vor, also müssen Sie es versuchen.
Otzhe, alle notwendigen Elemente auf Ihrem Mistyah, fragen Sie nach nygolovnіshe und tsіkave, formulieren zovnishniy viglyad , Kolir, Form und Nadati bewegen unsere Speisekarte. Wir werden sie alle mit CSS ausrauben. Beliebiges Javascript und zusätzliche Bilder.
CSS Die Bestimmung der Skin-Regel und -Macht wird nicht erfolgen CSS-Codes . Stile für Paneele, die in der richtigen Richtung gerostet sind, sind praktisch gleich; In den Archiven mit den Codes sind die Angriffsoptionen mit einigen Dateien gepackt, also wählen Sie die erforderlichen aus, verbinden Sie sich richtig mit dem Dokument und alles. Hier verwende ich "mince css", für das Menü hängt es von der linken Seite der Seite:
/ ** * Änderungen an der Navigationsleiste * hängt bei einem Angriff des Bösen * / ... Navi ( / * Shirn ist gut genug, experimentiere nicht herum * / Breite: 320px; Mindestbreite: 320px; / * Maximale physische und visuelle Anzeige des Panels * / Höhe: 100%; Position: fest; oben: 0; unten: 0; Rand: 0; / * Zrushuєmo (khovaєmo) Panel direkt am Rand der Seite * / links: - 320px; / * Interner Zugriff * / Polsterung: 15px 20px; / * Reibungsloser Übergang des Plattenwechsels * / - Webkit-Übergang: links 0,3s; - Moz-Übergang: links 0,3s; Übergang: links 0. 3s; / * Visnachaєmo färbt den Hintergrund des Panels * / Hintergrund: # 16a085; / * Über den anderen Elementen * / z-Index: 2000; ) / ** * Schaltfläche zum Umschalten des Panels * Tag
*/
... Navi-toggle ( / * Absolut positioniert * / Position: absolut; / * Zum linken Rand des Panels * / links: 320px; / * Zum oberen Rand des Panels springen * / oben: 1em; / * Interner Zugriff * / Polsterung: 0.5em; / * Visnachaєmo-Farbe zum Hintergrund des Remixes * am häufigsten zur Farbe zum Hintergrund des Panels * / Hintergrund: erben; / * Farbtext * / Farbe: #dadada; / * Cursortyp * / Cursor: Zeiger; / * Schriftgröße * / Schriftgröße: 1,2em; Zeilenhöhe: 1; / * Auf die anderen Seitenelemente legen * / z-Index: 2001; / * Animuєmo-Farbtext beim Schweben * / - Webkit- Übergang: Farbe. 25s Easy-In-Out; - Moz- Übergang: Farbe. 25s Easy-In-Out; Übergang: Farbe. 25s Easy-In-Out; ) / * Zunächst der Text der Schaltfläche * Unicode-Zeichen (TRIGRAMM FÜR HIMMEL) * / ... nav- toggle: after (Inhalt: "\ 2630"; Text-Dekoration: keine;) / * Farbtext beim Hover * / ... nav- toggle: schweben (Farbe: # f4f4f4;) / ** * Prikhovanie Checkbox (Vorfahr) * unsichtbar і unzugänglich :) * іm'ya Selektorattribut Kämpfer * / [Id = "nav-toggle"] (Position: absolut; Anzeige: keine;) / ** * Position des Schalthebels ändern * beim Betrachten mobile Nebengebäude * Wenn eine Öffnung vorhanden ist, kann diese in der Mitte des Panels angezeigt werden * / [Id = "nav-toggle"]: geprüft ~. Navi>. nav- toggle (links: auto; rechts: 2px; oben: 1em;) / ** * Wenn Sie die Vorfahren von Arrangements sind, wird das Panel angezeigt * vikoristovu псевmo Pseudoklasse: geprüft * / [Id = "nav-toggle"]: geprüft ~. nav (links: 0; box- shadow: 4px 0px 20px 0px rgba (0, 0, 0, 0.5); - moz- box- shadow: 4px 0px 20px 0px rgba (0, 0, 0, 0.5); - webkit- Box-Schatten: 4px 0px 20px 0px rgba (0, 0, 0, 0.5); Überlauf- y: Auto;) / * * Ersetzen Sie den Inhalt der Seite * auf die Größe der Breite des Panels, * das Gerät ist optional, für einen Amateur * / [Id = "nav-toggle"]: geprüft ~ main> article (- webkit-transform: translateX (320px); - moz-transform: translateX (320px); transform: translateX (320px);) / * * Eine Änderung des Kommandantensymbols, * ein Kreuzzeichen (MULTIPLICATION X), * Sie können jedes beliebige Zeichen verwenden * / [Id = "nav-toggle"]: geprüft ~. Navi>. nav- toggle: nach (Inhalt: "\ 2715";) / ** * PROFIX-Fehler in Android<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
body (- webkit- animation: bugfix unendlich 1s;) @ - webkit- keyframes bugfix (to (padding: 0;)) / ** * Erzählen Sie mir von mittleren und kleinen Bildschirmen * mobile Anhänge * / @ Medienbildschirm und (min-Breite: 320px) (html, body (margin: 0; overflow- x: hidden;)) @ media screen and (max- width: 320px) (html, body (margin: 0; overflow- x: versteckt;). nav (Breite: 100%; Box-Schatten: keiner)) / ** * Kopfzeilenstil des Formєmo-Panels (Logo) * / ... nav h2 (Breite: 90%; Auffüllung: 0; Rand: 10px 0; Textausrichtung: Mitte; Textschatten: rgba (255, 255, 255, .1) - 1px - 1px 1px, rgba (0, 0, 0, .5) 1px 1px 1px; Schriftgröße: 1.3em; Zeilenhöhe: 1.3em; Deckkraft: 0; Transform: scale (0.1, 0.1); - ms- transform: scale (0.1, 0.1); - moz - transform: scale (0.1, 0.1); - webkit- transform: scale (0.1, 0.1); transform- origin: 0% 0%; - ms- transform- origin: 0% 0%; - moz- transform- origin: 0% 0%; - Webkit-Transformation-Ursprung: 0% 0%; Übergang: Opazität 0,8s, Transformation 0,8s; - ms-Übergang: Opazität 0,8s, - ms-Transformation 0,8s; - Moz-Übergang: Opazität 0,8 s, - moz-transform 0.8s; - webkit-transition: opacity 0.8s, - webkit-transform 0.8s;). nav h2 a (Farbe: #dadada; Textdekoration: keine; Texttransformation: Großbuchstaben;) / * Glattes Erscheinungsbild des Titels (Logo) beim Öffnen des Panels * / [Id = "nav-toggle"]: geprüft ~. nav h2 (opacity: 1; transform: scale (1, 1); - ms- transform: scale (1, 1); - moz- transform: scale (1, 1); - webkit- transform: scale (1, 1 );) / ** * form mo ohne die Mitte des Menüs selbst * vikorist mo Liste für Elemente im Menü * geschraubte Transformationen und fließende Übergänge * / ... nav> ul (display: block; margin: 0; padding: 0; list-style: none;). nav> ul> li (line- height: 2.5; opacity: 0; - webkit- transform: translateX (-50%); - moz- transform: translateX (-50%); - ms- transform: translateX (-50% ); transform: translateX (-50%); - webkit-transition: opacity.5s. 1s, - webkit-transform.5s. 1s; - moz-transition: opacity.5s. 1s, - moz-transform. 5s. 1s ; - MS-Übergang: Opazität 5s. 1s, - MS-Transform. 5s. 1s; Übergang: Opazität. 5s. 1s, Transformation 5s. 1s;) [id = "nav-toggle"]: geprüft ~. nav> ul> li (opacity: 1; - webkit- transform: translateX (0); - moz- transform: translateX (0); - ms- transform: translateX (0); transform: translateX (0);) / * Visnachaєmo-Intervalle erscheinen im Menü * / ... nav> ul> li: n-tes-Kind (2) (- Webkit-Übergang: Opazität. 5s. 2s, - Webkit-Transformation. 5s. 2s; Übergang: Opazität. 5s. 2s, Transformation. 5s. 2s;). nav> ul> li: n-tes-Kind (3) (- Webkit-Übergang: Opazität. 5s. 3s, - Webkit-Transform.5s. 3s; Übergang: Opazität. 5s. 3s, Transformation. 5s. 3s;). nav> ul> li: n-tes-Kind (4) (- Webkit-Übergang: opacity.5s.4s, - webkit-transform.5s.4s; Übergang: opacity.5s.4s, transform.5s.4s;). nav> ul> li: n-tes-Kind (5) (- Webkit-Übergang: Opazität. 5s. 5s, - Webkit-Transform. 5s. 5s; Übergang: Opazität. 5s. 5s, Transformation. 5s. 5s;). nav> ul> li: n-tes-Kind (6) (- Webkit-Übergang: Opazität. 5s. 6s, - Webkit-Transform. 5s. 6s; Übergang: Opazität. 5s. 6s, Transformation. 5s. 6s;). nav> ul> li: n-tes-kind (7) (- webkit-transition: opacity. 5s. 7s, - webkit-transform. 5s. 7s; Transition: opacity. 5s. 7s, transform. 5s. 7s;) / ** * Registrierung von Elementen im Menü * / ... nav> ul> li> a (Anzeige: Inline-Block; Position: Relativ; Padding: 0; Schriftfamilie: "Open Sans", Sans- Serif; Schriftgewicht: 300; Schriftgröße: 1,2em; Farbe: #dadada; Breite: 100%; Textdekoration: keine; / * weicher Übergang * / - Webkit- Übergang: Farbe. 5s Leichtigkeit, Polsterung. 5s Leichtigkeit; - Moz- Übergang: Farbe. 5s Leichtigkeit, Polsterung. 5s Leichtigkeit; Übergang: Farbe. 5s Leichtigkeit, Polsterung. 5s Leichtigkeit; ) / ** * Menü beim Schweben einstellen * / ... nav>ul>li>a: schweben ,. nav> ul> li> a: Fokus (Farbe: weiß; Polster- links: 15px;) / ** * die Zeile des Sitzplatzes für das Menü * / ... nav> ul> li >
ein :
Vor {
Inhalt :
""
;
Anzeige :
Block ;
Position :
absolut ;
rechts :
0
;
Unterseite :
0
;
Höhe :
1 Pixel ;
Breite :
100
%;
-
Webkit -
Überleitung :
Breite 0s Leichtigkeit ;
Überleitung :
Breite 0s Leichtigkeit ;
}
.
Navi >
ul >
li >
ein :
nach {
Inhalt :
""
;
Anzeige :
Block ;
Position :
absolut ;
links :
0
;
Unterseite :
0
;
Höhe :
1 Pixel ;
Breite :
100
%;
Hintergrund :
# 3bc1a0; -
Webkit -
Überleitung :
Breite .
5s Leichtigkeit ;
Überleitung :
Breite .
5s Leichtigkeit ;
}
/ ** * animuєmo zu einer Sitzlinie * eine Reaktion beim Schweben * /
.
Navi >
ul >
li >
ein :
schweben :
Vor {
Breite :
0
%;
Hintergrund :
# 3bc1a0; -
Webkit -
Überleitung :
Breite .
5s Leichtigkeit ;
Überleitung :
Breite .
5s Leichtigkeit ;
}
.
Navi >
ul >
li >
ein :
schweben :
nach {
Breite :
0
%;
Hintergrund :
transparent ;
-
Webkit -
Überleitung :
Breite 0s Leichtigkeit ;
Überleitung :
Breite 0s Leichtigkeit ;
}
/ * Der Hintergrund wird zum Hauptinhalt abgedunkelt * wenn die Elemente blockiert sind * spirna ist so ein Feature, wenn du es brauchst * einfach kommentieren * /
/ * .Maskeninhalt (Anzeige: Block; Position: fest; oben: 0; links: 0; z-Index 1000; Breite: 100%; Höhe: 100%; Hintergrundfarbe: rgba (0, 0, 0, 0.4); Sichtbarkeit: versteckt; Deckkraft: 0;): geprüft ~ .mask-content (Sichtbarkeit: sichtbar; Deckkraft: 1; -webkit-Übergang: Deckkraft .5s, Sichtbarkeit .5s; Übergang: Deckkraft .5s, Sichtbarkeit. 5s ;) * /
/ ** * Ändern des Navigationsbereichs * hängt bei einem Angriff des Bösen * / .nav (/ * Shirn ist hübsch, verlier dich nicht beim Experimentieren * / width: 320px; min-width: 320px; / * behoben und angezeigt maximal * Höhe / Höhe des Panels : 100%; Position: fest; oben: 0; unten: 0; Rand: 0; / * zrushuєmo (hovaєmo) Panel nur am Rand der Seite * / links: -320px ; / * Innenränder * / Padding: 15px 20px; / * sanfter Übergang des Panelwechsels * / -webkit-transition: left 0.3s; -moz-transition: left 0.3s; Transition: left 0.3s; / * default color zum Hintergrund des Panels * / background: # 16a085; / * über die anderen Elemente * / z-index: 2000;) / ** * Button zum Umschalten des Panels * tag / 0.5em; / * Standardfarbe für den Hintergrund des Remixes * oft als Hintergrundfarbe des Panels bezeichnet * / background: inherit; / * Textfarbe * / color: #dadada; / * Cursortyp * / Cursor : Zeiger; / * Schriftgröße * / Schriftgröße: 1.2em; Zeilenhöhe: 1; / * Über anderen Seitenelementen legen * / Z-Index: 2001; / * Textfarbe beim Überfahren * / -webkit -Übergang: Farbe .25s Ease-In-Out ; -moz-Transition: Farbe .25s Ease-In-Out; Übergang: Farbe .25s Ease-In-Out;) / * Schaltflächentext initialisieren * Unicode-Zeichen (TRIGRAM FOR HEAVEN ) * / .nav-toggle: after (content : "\ 2630"; text-decoration: none;) / * Text beim Schweben einfärben * / .nav-toggle: hover (Farbe: # f4f4f4;) / ** * Prying checkbox (Urvater) * unsichtbar і unzugänglich :) * im'ya Selektorattribut großartig * / (pos it on: absolut; Anzeige: keine; ) / ** * Position des Transfers ändern * beim Blick auf die mobilen Nebengebäude * wenn das Display geöffnet ist, ist es in der Mitte des Panels sichtbar * /: aktiviert ~ .nav> .nav-toggle (links: auto ; rechts: 2px; oben: 1em;) / * * * Wenn Sie der Urvater des Ausschießens sind, wird das Panel angezeigt * vikoristovuєmo Pseudoklasse: geprüft * /: geprüft ~ .nav (links: 0; Kastenschatten: 4px 0px 20px 0px rgba (0,0,0, 0.5); -moz-box-shadow : 4px 0px 20px 0px rgba (0,0,0, 0.5); -webkit-box-shadow: 4px 0px 20px 0px rgba ( 0,0,0, 0.5); overflow-y: auto;) / * * Inhaltsänderung Seitenlinien * für die Größe der Panelbreite, * das Feature ist optional, für alle * /: geprüft ~ main> article (-webkit -transform: translateX (320px); -moz-transform: translateX (320px); transform: translateX (320px) ;) / * * Wechsel zum Überweisungssymbol, * Rückruf (MULTIPLICATION X), * Sie können jede Art verwenden des Symbols * /: geprüft ~ .nav> .nav-toggle: nach (Inhalt: "\ 2715";) / ** * PROFIX-Bug in Android<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/ body {
-webkit-animation: bugfix infinite 1s;
} @-webkit-keyframes bugfix {
to {
padding: 0;
}
} /**
* позаботьтимся о средних и маленьких экранах
* мобильных устройств
*/ @media screen and (min-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
} @media screen and (max-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.nav {
width: 100%;
box-shadow: none
}
} /**
* Формируем стиль заголовка (логотип) панели
*/ .nav h2 {
width: 90%;
padding: 0;
margin: 10px 0;
text-align: center;
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
font-size: 1.3em;
line-height: 1.3em;
opacity: 0;
transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transition: opacity 0.8s, transform 0.8s;
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
} .nav h2 a {
color: #dadada;
text-decoration: none;
text-transform: uppercase;
} /*плавное появление заголовка (логотипа) при раскрытии панели */ :checked ~ .nav h2 {
opacity: 1;
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
} /**
* формируем непосредственно само меню
* используем неупорядоченный список для пунктов меню
* прикрутим трансфомации и плавные переходы
*/ .nav > ul (Anzeige: Block; Rand: 0; Auffüllung: 0; Listenstil: keiner;) .nav> ul> li (Zeilenhöhe: 2.5; Deckkraft: 0; -webkit-transform: translateX (-50%); -moz-transform: translateX (-50%); -ms-transform: translateX (-50%); transform: translateX (-50%); -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; -moz-Übergang: Deckkraft .5s .1s, -moz-transform .5s .1s; -ms-Übergang: Deckkraft .5s .1s, -ms-transform .5s .1s; Übergang: Deckkraft .5s .1s , transform .5s .1s;): geprüft ~ .nav> ul> li (opacity: 1; -webkit-transform: translateX (0); -moz-transform: translateX (0); -ms-transform: translateX (0 ); transform: translateX (0);) / * Öffnen Sie zunächst den Menüpunkt * / .nav> ul> li: nth-child (2) (-webkit-transition: opacity .5s .2s, -webkit-transform . 5s .2s; Übergang: opacity .5s .2s, transform .5s .2s;) .nav> ul> li: n-tes-kind (3) (-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; Übergang: Deckkraft .5s .3s, transformieren .5s .3s;) .nav> Ul> li: n-tes-Kind ( 4) (-webkit-transition: Opazität .5s .4s, -webkit-transform .5s .4s; Übergang: Deckkraft .5s .4s, transformieren .5s .4s; ). .nav> ul> li: n-tes-Kind (6) (-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; Übergang: opacity .5s .6s, transform .5s .6s;). nav> ul> li: nth-child (7) (-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; Übergang: opacity .5s .7s, transform .5s .7s;) / * * * entsprechend dem Menüpunkt * / .nav > ul > li > a (Anzeige: Inline-Block; Position: Relativ; Padding: 0; Schriftfamilie: "Open Sans", Sans-Serif; Schriftstärke: 300; Schriftgröße: 1,2em; Farbe: #dadada; Breite: 100%; Textdekoration: keine; / * glatter Übergang * / -webkit-übergang: Farbe .5s Leichtigkeit, Auffüllen .5s Leichtigkeit; -moz-Übergang : Farbe .5s Leichtigkeit, Auffüllung .5s Leichtigkeit; Übergang: Farbe .5s Leichtigkeit, Auffüllung .5s Leichtigkeit;) / ** * Menü auf Hover setzen * / .nav> ul> li> a: schweben, .nav> ul > li > a: focus (Farbe: weiß; Padding-links: 15px;) / ** * die Zeile vor dem Menü * / .nav > ul > li > a: vor (Inhalt: ""; Anzeige: Block; Position: Absolut; Rechts: 0; Unten: 0; Höhe: 1px; Breite: 100%; -webkit-transition: Breite 0s Leichtigkeit; Übergang: Breite 0s Leichtigkeit;) .nav> ul> li> a: after ( Inhalt: ""; Anzeige: Block; Position: absolut; l rechts: 0; unten: 0; Höhe: 1px; Breite: 100 %; Hintergrund: # 3bc1a0; -webkit-Übergang: Breite. 5s Leichtigkeit; Übergang: Breite .5s Leichtigkeit; ). ;). Blockieren für jedes Element * spirna ist so ein Feature, wenn du es brauchst * einfach kommentieren * / / * .mask-content (Anzeige: Block; Position: Fest; Oben: 0; Links: 0; Z-Index 1000; Breite: 100 %; Höhe: 100 %; Hintergrundfarbe: rgba (0, 0, 0, 0.4); Sichtbarkeit: versteckt; Deckkraft: 0;): geprüft ~ .mask-content (Sichtbarkeit: sichtbar; Deckkraft: 1; -webkit - Übergang: Deckkraft .5s, Sichtbarkeit .5s; Übergang: Deckkraft .5s, Sichtbarkeit .5s;) * /
Tatsächlich ist praktisch die gesamte Bedeutung der Behörden optional, so dass Sie alle Elemente leicht nach Ihrem Geschmack und Ihrer Farbe ändern können, wie erklärt, ich helfe Ihnen gleichzeitig. Nun, es ist auch kein Vorwurf, denn es ist etwas, das nicht mein Pfosten ist, schreibt in die Kommentare, es ist unauffällig und korrekt.
Am Ende möchte ich vermuten, dass nicht alle Browser gleich gut mit der Leistungsfähigkeit von CSS3-Hintergrundbildern umgehen können. Die Lösung ist würdevoll, noch kniffliger, aber noch experimenteller. Wenn Sie Ihren Verbraucher fertig haben, schrauben Sie ihn zuerst fest an die Arbeitsstelle und drehen Sie ihn dem Roboter in neue Browser und auf mobilen Nebengebäuden.
Noch einmal das Ergebnis bestaunen, die Archive mit den Ausgabecodes sperren, mit den verschiedenen Parametern experimentieren und erstellen, erstellen, erstellen ...
In der nächsten Stunde werde ich versuchen, konsequent zu sein und zu zeigen, wie auf der Grundlage von diese Entscheidung , Kann leicht visuvni realisiert werden, Bichni-Platten , Mit інshim, nicht weniger wichtigen Elementen, für die Interaktion mit koristuvachi, an Bord.
Jetzt bei koristuvachіv є die Gelegenheit zum Kennenlernen. Alle Stinks werden in derselben Kategorie präsentiert, wie Sie auf dem TemplateMonster-Marktplatz sehen können. Sie machen sich keiner Faltung schuldig. Gib einfach dein einzigartiger Inhalt und fertig - Sie können Ihr Geschäft starten und alle neuen und neuen Leser gewinnen. Es ist auch sehr wichtig, sich an die zu erinnern, denen ich den Text für die Skin-Vorlage zum Schreiben übergeben werde.
Mit Hilfe von Andriy
Die Garna-Navigation auf der Website ist für Blogger noch wichtiger. Von її domoguyu vіdvіduvach kennen Sie schnell die notwendige Seite des Blogs. Schätzen Sie die Intelligenz der Website und den Klang des Systems. Die Statistiken zeigen Ihnen, wie Sie ein horizontales Menü für Blogger mit Symbolen zum Zusammenführen erstellen. Menü mit bündigen Tasten-Symbolen von Falten in CSS. Um das Menü anzuzeigen, klicken Sie auf die Schaltfläche unten:
Yak fügt ein horizontales CSS-Menü mit Symbolen auf Blogger ein
Gehen Sie auf die Registerkarte "Vorlage", setzen Sie den Cursor in den Editor (auf jeden Fall),
Drücken Sie Strg + F, um den Code zu scherzen und den Code zu kennen ]]>
Fügen Sie den anstößigen Code vor dem CIM-Code ein: ../ * Der CSS-Code für das Menü beginnt hier bloggertrix.com * / # btrix-nav (margin: 100px auto; list-style: none; width: 632px; height: 87px; overflow-y: hidden;) # Btrix-Nav li (Schwimmer: links;) # Btrix-nav li a (Anzeige: Block; Farbe: Weiß; Breite: 120px; Höhe: 61px; Rand-Oberseite: 24px; Text-Dekoration: Keine; Text-Ausrichtung: Mitte; Rand-Oberseite: 1px Solid #bbb; Rand-unten: 1px solid # 555;) # Btrix-nav li a span.aname (Schriftart: Fett 17px / 61px "Arial"; Farbe: #fff; Text-Transformation: Großbuchstaben; Cursor: Zeiger; Position: Relativ; Oben: 0; Übergang: Oben .5s Leichtigkeit; Text-Schatten: 1px 1px 1px rgba (0, 0, 0, 0.5);) # Btrix-nav li a img (Position: relativ; oben: 0; Übergang: oben .5s Leichtigkeit;) # Btrix-nav li a: schweben (Cursor: Zeiger;) # Btrix-nav li a: hover img (oben: -85px;) # Btrix-Nav li a: hover .aname (oben: 85px;) # Btrix-nav li: nth-child (1) a (Hintergrund: # 3eb006; border-radius: 5px 0 0 5px; border-left: 1px solid #bbb;) # Btrix-nav li: n-tes-Kind (2) a (Hintergrund: # 9bc704;) # Btrix-nav li: n-tes Kind (3) a (Hintergrund: # 0dc3ff;) # Btrix-nav li: n-tes-Kind (4) a (Hintergrund: # 51a2ec;) # Btrix-nav li: nth-child (5) a (Hintergrund: # 6e3cab; border-radius: 0 5px 5px 0; border-right: 1px solid # 555;)
Gehen Sie nun auf die Registerkarte "Design",
neu geben HTML-Element / JavaScript und geben Sie den Code ein:
Golovna https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
Bestechung https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />
MySql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png " />
HTML-Datei https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png " />
Kontaktiere uns https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />
Fügen Sie die erforderlichen Änderungen an dem Code hinzu, der dem HTML-/JavaScript-Gadget hinzugefügt wurde:
Das #-Änderungssymbol für den Link zur gewünschten Seite des Blogs Kopfseite Blog und)
Wenn wir das Bild sehen, sehen wir die Orange , Wechseln Sie zu einer direkten Linie auf dem Symbolbild für ein bestimmtes Element.
Gegenstand, Visionen von Blau Der Name der CSS-Menüseite.
HTML-Element ändern? JavaScript ist beim Blogeintrag "Design" gefragt.
Für Ihr Menü können Sie vikoristovuvati Symbole, Logos und Bilder png z lass uns den hintergrund durchschauen ... Um mehr zu erfahren, braucht man Bilder schöner als vicoristovuvati einen Witz über die Symbole. übrigens, iconsearch.ru
Auf der Website ist alles schuldig, aber es ist anpassungsfähig, kein horizontales Menü, aber in ähnlicher Weise sind wir auf allen Bildschirmen freundlich. Deproponieren Sie, um die klassische Navigation wie ein Viconan in einem reinen Stil zu sehen, ohne JS zu speichern. Für Ihren eigenen Stil können Sie viele Websites aufrufen, da sie in einer einfachen Standardansicht erstellt wurden, wenn auch mit Effekten. Wenn Sie es von mobilen Nasen aus betrachten, wird die Schaltfläche automatisch erstellt. rechte Seite Wenn der Druck nicht auf der vollen Breite ist, werden die Kategorien angezeigt, aber alles ist ordentlich von der Seite, so dass die Schriftschaltflächen visuell sichtbar sind. Yak kann mitgenommen werden, dann waren hier die Vicoristen einfach HTML-Listen , Alle, um alle Listen beizubehalten, die beispielsweise vor dem Übergang in die aktuelle Kategorie zu finden sind. Das Konzept einer Stange besteht darin, dass die Navigationsliste schön horizontal angeordnet ist oder, wenn das Mobile in einem Ständer steht, automatisch vertikal ist, wie auf den Bildern gezeigt, die hinter dem Material eingeschlossen sind.
Es gibt eine Sammlung von Informationen hinter dem Skin-Feed, der Rozrobnik selbst kann zu diesem Thema geändert werden, oder zu diesen Figuren, es ist eher thematisch zu gehen. Das Menü selbst ist in einer dunkelgrünen Farbe gehalten, nur ein Blick auf die Ansichten, die sehr einfach erstellt werden können. Ansonsten kann alles radikal geändert werden, wenn Sie im Stil von CSS sind, und es wird den Stil des Designs geben, den Sie brauchen, und vor allem ist es gut, es auf die Basis der Internet-Ressource zu schreiben.
1
... Also für die Änderung, wenn Sie auf das Portal gehen.
2
... Schon staunend über das mobile Gerät, zwinkerten sie nicht aus dem Menü.
3
... Hier klirrten sie, die ganze Stromversorgung war weit weg.
Erste Schritte vor der Installation:
CSS Sektion ( Breite: 100 %; maximale Breite: 1198px; Rand: 0px automatisch; Anzeige: Tabelle; Position: relativ; }
Header ( Breite: 100 %; Anzeige: Tabelle; Hintergrundfarbe: # 175812; Rand-unten: 50px; }
#kamtukagnpos ( Schwimmer: links; Schriftgröße: 25px; Texttransformation: Großbuchstaben; Farbe: #fffab2; Schriftstärke: 600; Polsterung: 19,8 Pixel 0 Pixel; }
#kamtukagnpos: schweben ( Textschatten: 0px 0px 6px rgba (255, 250, 250, 0.67); }
Navi ( Breite: automatisch; schweben rechts; }
Navi ( Anzeige: Tabelle; schweben rechts; }
Navi ul li ( Schwimmer: links; }
Nav ul li: letztes Kind ( padding-rechts: 0px; }
Nav ul li a ( Farbe: # e4f2ff; Schriftgröße: 19px; Polsterung: 24px 19px; Anzeige: Inline-Block; Textschatten: 0 1px 0 # 2e2f2e; }
Navi ul li a: schweben ( Hintergrundfarbe: # 143a06; Farbe: # fff9c8; Übergang: alle 0.7s lockern 0s; Textschatten: 0 1px 0 # 282b28; }
Navi ul li a: hover i ( Farbe: # fdf7c9; Übergang: alle 0.7s lockern 0s; Textschatten: 0 1px 0 # 1c1d1c; }
Nav ul li a i ( Polsterung-rechts: 9px; Farbe: # f4faff; Übergang: alle 0.7s lockern 0s; Textschatten: 0 1px 0 # 202120; }
Navigationsmenüs ul ( Anzeige: Tabelle; Breite: 24px; }
Navigationsmenüs ul li ( Breite: 100 %; Höhe: 3px; Hintergrundfarbe: # e9f0f7; Rand-unten: 4px; }
Navigationsmenüsaita ul li: letztes Kind ( Rand-unten: 0px; }
Eingabe, Etikett ( Anzeige: keine; }
@media nur Bildschirm und (max-Breite: 1440px) ( Sektion ( maximale Breite: 95%; } }
@media nur Bildschirm und (max-Breite: 980px) ( Header ( Füllung: 20px 0px; }
#kamtukagnpos ( Füllung: 0px; }
Eingabe ( Position: absolut; oben: -9999px; links: -9999px; Hintergrund: keiner; }
Eingabe: fous ( Hintergrund: keiner; }
Etikett ( schweben rechts; Polsterung: 8px 0px; Anzeige: Inline-Block; Cursor: Zeiger; }
Eingabe: geprüft ~ nav ( Bildschirmsperre; }
Navi ( Anzeige: keine; Position: absolut; rechts: 0px; oben: 53px; Hintergrundfarbe: # 174810; Füllung: 0px; z-Index: 99; }
Navi ( Breite: automatisch; }
Navi ul li ( Schwimmer: keiner; Füllung: 0px; Breite: 100 %; Anzeige: Tabelle; }
Nav ul li a ( Farbe: # f7f2f2; Schriftgröße: 15px; Polsterung: 10px 20px; Bildschirmsperre; Rand-unten: 1px festes rgba (204, 197, 197, 0,1); }
Nav ul li a i ( Farbe: # f9f5d5; Polsterung-rechts: 13px; } }
@media nur Bildschirm und (max-Breite: 480px) ( Abschnitt (max-Breite: 90%;) }
@media nur Bildschirm und (max-Breite: 360px) ( Etikett (Auffüllung: 5px 0px;) #kamtukagnpos (Schriftgröße: 20px;) Navi (oben: 47px;) }
Setzen Sie ein Yak vor die Tim, dann ist es wichtig, sich zu wundern Demoseite , І wirklich schätzen, da alles großartig ist, obwohl in der Tat nichts so dumm ist, benennen Sie einfach die Ressource, um eine Wirkung zu erzielen, aber wenn alle Zeichen angezeigt werden, werden sie zum Fenster gehen, damit sie angezeigt werden noch einfacher. vertikales Menü auf einer Liste basieren, markiert oder nummeriert sein. Hinter allen Elementen in der Liste müssen sie vertikal gefaltet werden und die gesamte Breite des Containerelements entlang der Breite abdecken, die die gesamte Breite des Containerblocks einnimmt.
Die Elemente der Liste dürfen nicht nur irreführend sein, sondern auch Überschriften, Symbole, Bilder. Neben dem vertikalen Menü können Sie Kommentare zur Site, eine Liste von Kategorien usw.
1. Vertikales Menü mit Titel
Einfache elegante Designoption. Gehen Sie für die Stilisierung der Kategorien auf der Website. Wenn Sie mit der Maus über ein Element fahren, ändert die Liste die Farbe der Liste.
* (Box-Sizing: border-box; margin: 0;) .widget (padding: 20px 30px; background: white; font-family: "Roboto", serifenlos;) .widget-title (Text-Transformation: Großbuchstaben ; Buchstabenabstand: 2px; Farbe: # 222; Schriftgröße: 16px; Auffüllen-links: 15px; Rand-Unten: 15px; Rand-links: 2px Vollton # b99d61;) .widget-Liste (Auffüllung: 0; Liste -style: keine;) .widget-list a: vorher (Inhalt: "\ 2014"; Rand-rechts: 14px;) .widget-list a (Text-Dekoration: keine; Umriss: keine; Anzeige: Block; Auffüllung: 6px 0; Buchstabenabstand: 1px; Schriftstärke: 300; Farbe: # 444; Übergang: .3s linear;) .widget-list a: Hover (Farbe: # b99d61;)2. Vertikales Menü im Stil der "Metrokarte"
Tsikave-Lösung für das Design des vertikalen Menüs, zusätzliche verschachtelte Menüs hinzugefügt. "Gilka Metro" - liva zwischen der Liste, Marker werden vor Skin-Anfragen generiert.
.metro (Listenstil: keine; Auffüllung: 0; Rand: 30px 0 0 50px; Rand links: 5px solid # DAE4F1;) .metro li (Zeilenhöhe: 2em;) .metro ul (Rand: 20px 0 20px 15px; padding: 0; border: none; list-style: none;) .metro ul: vorher, .metro ul: nach (Inhalt: ""; Breite: 5px; Höhe: 28px; Hintergrund: # DAE4F1; Position: relativ ; display: block; left: -9px;) .metro ul: vor (transform: rotieren (-45deg); margin-top: -15px;) .metro ul: after (transform: rotieren (45deg); unten: -20px ;) .metro ul li (border-left: 5px solid # DAE4F1;) .metro ul li: first-child (margin-top: -5px; padding-top: 5px;) .metro ul li: last-child (padding -unten: 9px; Rand-unten: -25px;) .metro a (Textdekoration: keine; Display: Block; Schriftfamilie: "Noto Sans", serifenlos; Farbe: # 4A4B4D;) .metro a: vorher (Inhalt: ""; Anzeige: Inline-Block; Hintergrund: # CA682D; Breite: 12px; Höhe: 12px; links: -9px; Position: relativ; Randradius: 50%; Rand-rechts: .5em;)3. Vertikales Menü mit Effekten beim Schweben
Das Symbol und die Hintergrundfüllung, die angezeigt werden, wenn Sie mit der Maus über ein Element in der Liste fahren, unterstützen die Gestaltung von Elementen im vertikalen Menü.
.category-wrap (Padding: 15px; Hintergrund: weiß; Breite: 200px; Box-Shadow: 2px 2px 8px rgba (0,0,0, .1); Schriftfamilie: "Helvetica Neue", Helvetica, Arial, sans -serif;) .category-wrap h3 (Schriftgröße: 16px; Farbe: rgba (0,0,0, .6); Rand: 0 0 10px; Auffüllung: 0 5px; Position: Relativ;) .category-wrap h3: nach (Inhalt: ""; Breite: 6px; Höhe: 6px; Hintergrund: # 80C8A0; Position: absolut; rechts: 5px; unten: 2px; Kastenschatten: -8px -8px # 80C8A0, 0 -8px # 80C8A0 , -8px 0 # 80C8A0;) .category-wrap ul (Listenstil: none; margin: 0; padding: 0; border-top: 1px solid rgba (0,0,0, .3);) .category- Wrap li (Margin: 12px 0 0 0px;) .category-wrap a (Text-Dekoration: keine; Display: Block; Schriftgröße: 13px; Farbe: rgba (0,0,0, .6); Padding: 5px ; Position: relativ; Übergang: .3s linear;) .category-wrap a: after (Inhalt: "\ f18e"; Schriftfamilie: FontAwesome; Position: absolut; rechts: 5px; Farbe: weiß; Übergang: .2s linear ;) .category-wrap a: hover (Hintergrund: # 80C8A0; Farbe: weiß; )4. Vertikales Menü mit Symbolen
Die Symbole im Menü zeigen den visuellen Anker, eine zusätzliche verbale Beschreibung der Skin-Kategorie. Um Symbole anzuzeigen, müssen Sie eine Verbindung herstellen. Sie können auch siegreich sein, egal ob es sich um eine іnshiy іnochny-Schrift oder іkonki-Bilder handelt.
* (Boxgröße: border-box; margin: 0;) .widget (padding: 20px; border: 5px solid # f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans- serif;) .widget h3 (margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: # 424949;) .widget ul (margin: 0; padding: 0; list -style: none; width: 250px;) .widget li (border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px;) .widget li: last-child (border-bottom: none; margin-bottom: 0; padding-bottom: 0;) .widget a (Textdekoration: keine; Farbe: # 616a6b; Display: Inline-Block;) .widget li: vor (Schriftfamilie: FontAwesome; Schriftgröße : 20px; vertikal ausrichten: unten; Farbe: # dd3333; Rand-rechts: 14px;) .widget li: n.-Kind (1): vorher (Inhalt: "\ f1fc";) .widget li: n-tes-Kind 2): vor (Inhalt: "\ f0d0";) .widget li: n-tes-Kind (3): vor (Inhalt: "\ f0cd";) .widget li: n-tes-Kind (4): vor (Inhalt: " \ f028 ";) .widget li: n-tes-Kind (5): vorher (Inhalt:" \ f03d " ;)5. Vertikales Menü mit Bildern
Dänischer Kolben kann zur Registrierung von Blöcken mit Neuheiten, ähnlichen Waren usw. verwendet werden. Website für einen Online-Shop.
JPEG ">