.
Taban kabının ortasında bunun yerine ihtiyacımız olacak.
) "Hamburger" düğmesinin kendisinde css şeklindedir, buna ek olarak, prikhovani onay kutusuyla bir bağlantı ayarlanır. Pek çok şey için, onay kutusu kimliğinden for niteliğinin adı sorumludur. iOS için boş vikoristovumo onclick özniteliği
alan <
ul>
<
li><
a href=
"#1"
>Bir
<
li><
a href=
"#2"
>2
<
li><
a href=
"#3"
>Üç
<
li><
a href=
"#4"
>Chotiri
<
li><
a href=
"#5"
>beş
<
li><
a href=
"#6"
>şist
<
li><
a href=
"#7"
>Сім
Bir 2 Üç Chotiri beş şist Сім Yan menümüzün düzeni bitti. Doğru, bir diğeri mutlaka bir hile değil, panel açıldığında arka plan ana içeriği karartıyor. Yaksho ihtiyacın var, sadece
<
div class
=
"mask-content"
>
Demo, robotu değiştirme, blok hakkında yorum yapma özelliğine sahiptir, kolayca tanıyabilir ve kolayca açabilirsiniz))).
Otzhe, mіtsyah'ınızdaki gerekli tüm unsurlar, nygolovnіshe ve tsіkave'ye kadar ekleyin, formüle edin zovnishniy viglyad , Kolir, form ve nadati menümüzü hareket ettirin. CSS ile her şeyi soyacağız. Herhangi bir javascript ve ek resimler.
CSS Cilt kuralının ve gücünün belirlenmesi olmayacak css kodları .
/ ** * Gezinme panelindeki değişiklikler * bir kötülük saldırısı olduğunda kilitleniyor * / ... gezinme ( / * Shirn yeterince iyi, denemelerle uğraşma * / genişlik: 320 piksel; minimum genişlik: 320 piksel; / * Panelin maksimum fiziksel ve görsel gösterimi * / yükseklik: %100; pozisyon: sabit; üst: 0; alt: 0; kenar boşluğu: 0; / * Zrushuєmo (khovaєmo) paneli hemen yan tarafta * / sol: - 320 piksel; / * Dahili erişim * / dolgu: 15 piksel 20 piksel; / * Panel değişikliğinin yumuşak geçişi * / - webkit- geçişi: sola 0,3s; - moz- geçiş: sola 0,3s; geçiş: sola 0. 3s; / * Visnachaєmo renkleri panelin arka planına * / arka plan: # 16a085; / * Diğer öğelerin üstüne * / z-endeksi: 2000; ) / ** * Paneli değiştirme düğmesi * etiketi
*/
... gezinme geçişi ( / * Kesinlikle konumlandırılmış * / pozisyon: mutlak; / * Panelin sol kenarına * / sol: 320 piksel; / * Panelin üst kenarına atla * / üst: 1em; / * Dahili erişim * / dolgu: 0,5em; / * Visnachaєmo rengi remiksin arka planına * en sık olarak panelin arka planına renk * / arka plan: miras; / * Renkli metin * / renk: #dadada; / * İmleç türü * / imleç: işaretçi; / * yazı tipine göre boyut * / yazı tipi boyutu: 1.2em; satır yüksekliği: 1; / * Diğer yan elemanların üzerine yerleştirin * / z-endeksi: 2001; / * Gezinirken Animuєmo renkli metin * / - webkit- geçiş: renk. 25s kolay giriş çıkış; - moz- geçiş: renk. 25s kolay giriş çıkış; geçiş: renk. 25s kolay giriş çıkış; ) / * Başlangıçta düğmenin metni * Unicode karakter (CENNET İÇİN TRIGRAM) * / ... nav- toggle: after (içerik: "\ 2630"; metin dekorasyonu: yok;) / * Fareyle üzerine gelindiğinde renkli metin * / ... gezinme geçişi: fareyle üzerine gelin (renk: # f4f4f4;) / ** * Prikhovanie onay kutusu (ata) * görünmez ve erişilemez :) * savaşçının seçici özelliği * / [Id = "nav-toggle"] (konum: mutlak; görüntü: yok;) / ** * Bakarken pompanın konumunu değiştirin * mobil ekler * Bir açıklık varsa panelin ortasında görüntülenebilir * / [Id = "nav-toggle"]: kontrol edildi ~. gezin >. gezinme geçişi (sol: otomatik; sağ: 2 piksel; üst: 1em;) / ** * Eğer dayatmanın ataları iseniz, panel görüntülenecektir * vikoristovu псевmo sözde sınıf: işaretli * / [Id = "nav-toggle"]: kontrol edildi ~. gezinme (sol: 0; kutu-gölge: 4px 0px 20px 0px rgba (0, 0, 0, 0.5); - moz- box- shadow: 4px 0px 20px 0px rgba (0, 0, 0, 0.5); - webkit- kutu-gölge: 4px 0px 20px 0px rgba (0, 0, 0, 0.5); taşma- y: otomatik;) / * * Sayfanın içeriğinin * panelin genişliğinin boyutuna göre değiştirilmesi, * bir amatör için cihaz isteğe bağlıdır * / [Id = "nav-toggle"]: işaretli ~ ana> makale (- webkit-transform: translateX (320px); - moz-transform: translateX (320px); transform: translateX (320px);) / * * Komutanın sembolünde bir değişiklik, * bir çarpı işareti (ÇARMA X), * herhangi bir işareti kullanabilirsiniz * / [Id = "nav-toggle"]: kontrol edildi ~. gezin >. nav- toggle: after (içerik: "\ 2715";) / ** * Android'de PROFIX hatası<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
body (- webkit- animasyon: bugfix sonsuz 1s;) @ - webkit- ana kareler hata düzeltmesi (to (dolgu: 0;)) / ** * Orta ve küçük ekranlardan bahsedin * mobil eklentiler * / @ Medya ekranı ve (min- genişlik: 320px) (html, gövde (marj: 0; taşma- x: gizli;)) @ medya ekranı ve (maks- genişlik: 320px) (html, gövde (marj: 0; taşma- x: gizli;). nav (genişlik: %100; kutu gölgesi: yok)) / ** * Formєmo panel başlık stili (logo) * / ... gezinme h2 (genişlik: %90; dolgu: 0; kenar boşluğu: 10 piksel 0; metin hizalama: merkez; metin gölgesi: rgba (255, 255, 255, .1) - 1 piksel - 1 piksel 1 piksel, rgba (0, 0, 0, .5) 1px 1px 1px; yazı tipi boyutu: 1.3em; satır yüksekliği: 1.3em; opaklık: 0; dönüştürme: ölçek (0.1, 0.1); - ms- dönüşümü: ölçek (0.1, 0.1); - moz - transform: ölçek (0.1, 0.1); - webkit- dönüşümü: ölçek (0.1, 0.1); transform- orijin: %0 %0; - ms- transform- orijin: %0 %0; - moz- transform- orijin: %0 %0; - webkit- dönüşüm- orijin: %0 %0; geçiş: opaklık 0,8 sn, dönüşüm 0,8 sn; - ms- geçiş: opaklık 0,8 sn, - ms- dönüşüm 0,8 sn; - moz-geçişi: opaklık 0,8 s, - moz-dönüşüm 0.8s; - webkit-geçişi: opaklık 0.8s, - webkit-dönüşüm 0.8s;). nav h2 a (renk: #dadada; metin dekorasyonu: yok; metin dönüşümü: büyük harf;) / * Paneli açarken başlığın (logonun) pürüzsüz görünümü * / [Id = "nav-toggle"]: kontrol edildi ~. nav h2 (opaklık: 1; dönüştürme: ölçek (1, 1); - ms- dönüşümü: ölçek (1, 1); - moz- dönüşümü: ölçek (1, 1); - webkit- dönüşümü: ölçek (1, 1 );) / ** * menünün ortası olmadan mo formu * menüdeki öğeler için vikorist mo listesi * vidalı dönüşümler ve yumuşak geçişler * / ... nav> ul (ekran: blok; kenar boşluğu: 0; dolgu: 0; liste stili: yok;). nav> ul> li (satır yüksekliği: 2.5; opaklık: 0; - webkit- transform: translateX (-50%); - moz- transform: translateX (-50%); - ms- transform: translateX (-50% ); transform: translateX (-50%); - webkit-geçişi: opacity.5s. 1s, - webkit-transform.5s. 1s; - moz-geçişi: opacity.5s. 1s, - moz-transform. 5s. 1s ; - ms- geçiş: opaklık. 5s. 1s, - ms- dönüşümü. 5s. 1s; geçiş: opaklık. 5s. 1s, dönüşüm. 5s. 1s;) [id = "nav-toggle"]: kontrol edildi ~. nav> ul> li (opaklık: 1; - webkit- transform: translateX (0); - moz- transform: translateX (0); - ms- transform: translateX (0); transform: translateX (0);) / * Visnachaєmo Aralıkları menüde görünür * / ... nav> ul> li: nth-child (2) (- webkit-geçişi: opacity. 5s. 2s, - webkit-transform. 5s. 2s; geçiş: opacity. 5s. 2s, transform. 5s. 2s;). nav> ul> li: nth-child (3) (- webkit-geçişi: opacity. 5s. 3s, - webkit-transform.5s. 3s; geçiş: opacity. 5s. 3s, transform. 5s. 3s;). nav> ul> li: nth-child (4) (- webkit-geçişi: opacity.5s.4s, - webkit-transform.5s.4s; geçiş: opacity.5s.4s, transform.5s.4s;). nav> ul> li: nth-child (5) (- webkit-geçişi: opacity.5s. 5s, - webkit-transform.5s. 5s; geçiş: opacity.5s. 5s, transform.5s. 5s;). nav> ul> li: nth-child (6) (- webkit-geçişi: opacity. 5s. 6s, - webkit-transform. 5s. 6s; geçiş: opaklık. 5s. 6s, transform. 5s. 6s;). nav> ul> li: nth-child (7) (- webkit-geçişi: opacity. 5s. 7s, - webkit-transform. 5s. 7s; geçiş: opaklık. 5s. 7s, transform. 5s. 7s;) / ** * menüdeki öğelerin kaydı * / ... nav> ul> li> a (ekran: satır içi blok; konum: göreli; dolgu: 0; yazı tipi ailesi: "Açık Sans", sans- serif; yazı tipi ağırlığı: 300; yazı tipi boyutu: 1.2em; renk : #dadada; genişlik: %100; metin- dekorasyon: yok; / * yumuşak bir geçiş * / - webkit- geçiş: renk. 5s kolaylığı, dolgu. 5s kolaylığı; - moz- geçiş: renk. 5s kolaylığı, dolgu. 5s kolaylığı; geçiş: renk. 5s kolaylığı, dolgu. 5s kolaylığı; ) / ** * üzerine gelindiğinde menüyü ayarlayın * / ... nav> ul> li> a: vurgulu ,. nav> ul> li> a: odak (renk: beyaz; dolgu- sol: 15 piksel;) / ** * menü için koltuk sırası * / ... nav> ul> li >
a :
önce {
içerik :
""
;
Görüntüle :
engellemek ;
konum :
mutlak ;
sağ :
0
;
alt :
0
;
boy uzunluğu :
1 piksel ;
Genişlik :
100
%;
-
web seti -
geçiş :
genişlik 0s kolaylığı ;
geçiş :
genişlik 0s kolaylığı ;
}
.
gezinme >
ul >
li >
a :
sonrasında {
içerik :
""
;
Görüntüle :
engellemek ;
konum :
mutlak ;
sol :
0
;
alt :
0
;
boy uzunluğu :
1 piksel ;
Genişlik :
100
%;
arka fon :
# 3bc1a0; -
web seti -
geçiş :
Genişlik .
5s kolaylığı ;
geçiş :
Genişlik .
5s kolaylığı ;
}
/ ** * bir koltuk sırasına animuєmo * gezinirken bir yanıt * /
.
gezinme >
ul >
li >
a :
üzerine gelmek :
önce {
Genişlik :
0
%;
arka fon :
# 3bc1a0; -
web seti -
geçiş :
Genişlik .
5s kolaylığı ;
geçiş :
Genişlik .
5s kolaylığı ;
}
.
gezinme >
ul >
li >
a :
üzerine gelmek :
sonrasında {
Genişlik :
0
%;
arka fon :
şeffaf ;
-
web seti -
geçiş :
genişlik 0s kolaylığı ;
geçiş :
genişlik 0s kolaylığı ;
}
/ * Ana içeriğe arka plan koyulaşıyor * Elementler engellendiğinde * spirna böyle bir özellik, ihtiyacınız varsa * yorum yapmanız yeterli * /
/ * .Mask içeriği (ekran: blok; konum: sabit; üst: 0; sol: 0; z-endeksi 1000; genişlik: %100; yükseklik: %100; arka plan rengi: rgba (0, 0, 0, 0.4); görünürlük: gizli; opaklık: 0;): kontrol edildi ~ .mask-içeriği (görünürlük: görünür; opaklık: 1; -webkit-geçişi: opaklık .5s, görünürlük .5s; geçiş: opaklık .5s, görünürlük. 5s ;) * /
/ ** * Gezinti panelinin değiştirilmesi * bir kötülük saldırısı olduğunda kilitleniyor * / .nav (/ * Shirn güzel, deneyerek kaybolma * / width: 320px; min-width: 320px; / * sabitlendi ve görüntülendi panelin maksimum * yüksekliğinde / yüksekliğinde : %100; konum: sabit; üst: 0; alt: 0; kenar boşluğu: 0; / * zrushuєmo (hovaєmo) paneli yan tarafın hemen kenarında * / sol: -320px ; / * iç kenar boşlukları * / padding: 15px 20px; / * panel değişikliğinin yumuşak geçişi * / -webkit-transition: sola 0,3s; -moz-transition: sola 0,3s; geçiş: sola 0,3s; / * varsayılan renk panelin arka planına * / arka plan: # 16a085; / * diğer öğelerin üzerine * / z-index: 2000;) / ** * Paneli değiştirme düğmesi * etiketi * / .Nav-toggle (/ * kesinlikle konum: mutlak; / * panelin hemen sol kenarından * / sol: 320 piksel; / * panelin üst kenarına bakan * / üst: 1em; / * iç çıkışlar * / dolgu: 0.5em; / * remiksin arka planı için varsayılan renk * çoğunlukla panel arka planının rengine * / arka plan: miras; / * metin rengi * / renk: #dadada; / * imleç türü * / imleç : işaretçi; / * yazı tipi boyutu * / yazı tipi boyutu: 1.2em; satır yüksekliği: 1; / * diğer yan öğelerin üzerine yerleştir * / z-index: 2001; / * üzerine gelindiğinde metin rengi * / -webkit -geçiş: renkli .25s kolay giriş ; -moz-geçiş: renkli .25s giriş kolaylığı; geçiş: renkli .25s kolay giriş;) / * düğme metnini başlat * Unicode karakter (TRIGRAM FOR HEAVEN) * / .nav-toggle: after (içerik : "\ 2630"; text-decoration: none;) / * üzerine gelindiğinde renkli metin * / .nav-toggle: üzerine gelin (renk: # f4f4f4;) / ** * Meraklı onay kutusu (ata) * görünmez ve erişilemez :) * im'ya seçici özellik harika * / (konum iti açık: mutlak; görüntü yok; ) / ** * Geçersiz kılmanın konumunu değiştirin * mobil eklere bakarken * ekran açıksa panelin ortasında görünür * /: işaretli ~ .nav> .nav-toggle (sol: auto ; sağ: 2px; üst: 1em;) / * * * Yüklemenin öncüsüyseniz, panel görüntülenir * vikoristovuєmo sözde sınıf: işaretli * /: işaretli ~ .nav (sol: 0; kutu gölgesi: 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); taşma-y: otomatik;) / * * içerik değiştirme kenar çizgileri * panel genişliğinin boyutu için, * özellik isteğe bağlıdır, amatör için * /: işaretli ~ ana> makale (- webkit-transform: translateX (320px); -moz-transform: translateX (320px); transform: translateX (320px) ;) / * * havale sembolünde değişiklik, * geri arama (ÇARMA X), * herhangi birini kullanabilirsiniz simge türü * /: kontrol edildi ~ .nav> .nav-toggle: after (içerik: "\ 2715";) / ** * Android'de PROFIX hatası<= 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 (ekran: blok; kenar boşluğu: 0; dolgu: 0; liste stili: yok;) .nav> ul> li (satır yüksekliği: 2.5; opaklık: 0; -webkit-transform: translateX (-50%); -moz-transform: translateX (-50%); -ms-transform: translateX (-50%); transform: translateX (-50%); -webkit-geçişi: opaklık .5s .1s, -webkit-transform .5s .1s; -moz-geçişi: opaklık .5s .1s, -moz-dönüşüm .5s .1s; -ms-geçişi: opaklık .5s .1s, -ms-dönüşüm .5s .1s; geçiş: opaklık .5s .1s , transform .5s .1s;): işaretli ~ .nav> ul> li (opaklık: 1; -webkit-transform: translateX (0); -moz-transform: translateX (0); -ms-transform: translateX (0 ); transform: translateX (0);) / * Önce * / .nav> ul> li: nth-child (2) menü öğesini açın (-webkit-transition: opacity .5s .2s, -webkit-transform . 5s .2s; geçiş: opacity .5s .2s, transform .5s .2s;) .nav> ul> li: nth-child (3) (-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; geçiş: opaklık .5s .3s, dönüşüm .5s .3s;) .nav> Ul> li: nth-child ( 4) (-webkit-geçişi: opaklık .5s .4s, -webkit-dönüşüm .5s .4s; geçiş: opaklık .5s .4s, dönüşüm .5s .4s; ) .Nav> ul> li: nth-child (5) (-webkit-geçiş: opacity .5s .5s, -webkit-transform .5s .5s; geçiş: opacity .5s .5s, transform .5s .5s;) .nav> ul> li: nth-child (6) (-webkit-geçiş: opacity .5s .6s, -webkit-transform .5s .6s; geçiş: opacity .5s .6s, transform .5s .6s;). nav> ul> li: nth-child (7) (-webkit-geçiş: opacity .5s .7s, -webkit-transform .5s .7s; geçiş: opacity .5s .7s, transform .5s .7s;) / * * * menü öğesine göre dekore edilmiştir * / .nav> ul> li> a (ekran: satır içi blok; konum: göreceli; dolgu: 0; yazı tipi ailesi: "Açık Sans", sans-serif; yazı tipi ağırlığı: 300; yazı tipi boyutu: 1.2em; renk: #dadada; genişlik: %100; metin dekorasyonu: yok; / * yumuşak geçiş * / -webkit-geçişi: renk .5s kolaylığı, dolgu .5s kolaylığı; -moz-geçişi : renkli .5s hareket hızı, dolgu .5s kolaylığı; geçiş: renkli .5s hareket hızı, dolgu .5s kolaylığı;) / ** * fareyle üzerine gelindiğinde menüyü ayarlayın * / .nav> ul> li> a: vurgulu, .nav> ul > li > a: odak (renk: beyaz; dolgu-sol: 15px;) / ** * Menünün ön ucunun satırları * / .nav> ul> li> a: önce (içerik: ""; ekran: blok; konum: mutlak; sağ: 0; alt: 0; yükseklik: 1 piksel; genişlik: %100; -webkit-geçiş: genişlik 0s hareket kolaylığı; geçiş: genişlik 0s hareket kolaylığı;) .nav> ul> li> a: after ( içerik: ""; görüntü: blok; konum: mutlak; l eft: 0; alt: 0; yükseklik: 1 piksel; genişlik: %100; arka plan: # 3bc1a0; -webkit-geçiş: genişlik. 5s kolaylığı; geçiş: genişlik .5s kolaylık; ) / ** * vurgulu üzerinde animuєmo satırı * / .nav> ul> li> a: vurgulu: önce (genişlik: %0; arka plan: # 3bc1a0; -webkit-geçiş: genişlik .5s kolaylık; geçiş: genişlik .5s kolaylık ;) .nav> ul> li> a: vurgulu: sonra (genişlik: %0; arka plan: şeffaf; -webkit-geçiş: genişlik 0s kolaylık; geçiş: genişlik 0s kolaylık;) / * arka plan ana içeriğe göre karartılır * her eleman için engelleme * spirna böyle bir özelliktir, eğer ihtiyacınız varsa * sadece yorum yapın * / / * .mask-içeriği (ekran: blok; konum: sabit; üst: 0; sol: 0; z-endeksi 1000; genişlik: %100; yükseklik: %100; arka plan rengi: rgba (0, 0, 0, 0.4); görünürlük: gizli; opaklık: 0;): kontrol edildi ~ .mask içeriği (görünürlük: görünür; opaklık: 1; -webkit - geçiş: opaklık .5s, görünürlük .5s; geçiş: opaklık .5s, görünürlük .5s;) * /
Nitekim, otoritelerin pratikte tüm anlamları isteğe bağlıdır, bu nedenle kolayca değiştirebilirsiniz ve tüm unsurları zevkinize ve renginize göre, açıklandığı gibi, size bütün olarak yardımcı olmaya katılıyorum. Eh, ayrıca, bu bir sitem meselesi değil, çünkü bu benim pervazım olmayan bir şey, yorumlara yazın, göze batmayan ve doğru.
Sonunda, tüm tarayıcıların CSS3 duvar kağıdının gücünü kullanmada eşit derecede iyi olmadığını tahmin etmek istiyorum. Karar verildi, daha tuhaf bir şekilde tsikave, ama yine de daha deneysel. Tüketicinizi bitirdikten sonra, önce robotik siteye sıkıca vidalayın ve içindeki robota çevirin. yeni tarayıcılar ve mobil müştemilatlarda.
Bir kez daha sonuca hayran kalın, çıktı kodlarıyla arşivleri kilitleyin, farklı parametrelerle denemeler yapın ve yaratın, yaratın, yaratın ...
Bir sonraki saatte, tutarlı olmaya ve göstermeye çalışacağım, bu karar , Kolaylıkla gerçekleştirilebilen görseller, bichni paneller , інshim ile, gemide koristuvachi ile etkileşim için daha az önemli unsurlar değil.
Şimdi koristuvachіv є ile tanışma fırsatı. TemplateMonster pazarında görebileceğiniz gibi, tüm kokular aynı kategoride sunulmaktadır. Herhangi bir katlamadan suçlu değiller. sadece seninkini ver benzersiz içerik ve hazır - işinize başlayabilir ve tüm yeni ve yeni okuyucuları alabilirsiniz. Yazmak için cilt şablonu için metni teslim edeceğim olanları hatırlamak da çok önemlidir.
Andriy'nin yardımıyla
Sitede Garna navigasyonu bloggerlar için daha da önemli. її'dan yardıma, blogun gerekli tarafını görebiliyorum. Sitenin zekasını ve sistemin sesini takdir edin. İstatistikler, birleştirme simgeleriyle Blogger için yatay bir menünün nasıl oluşturulacağını gösterir.
Yak, Blogger'da simgeler içeren yatay bir css menüsü ekler "Şablon" sekmesine gidin, imleci düzenleyiciye getirin (kısayol olsun),
Kodun etrafında şaka yapmak ve kodu bilmek için Ctrl + F tuşlarına basın ]]>
Rahatsız edici kodu kodun önüne ekleyin: / * Menü için CSS Kodu burada başlar bloggertrix.com * / # btrix-nav (kenar boşluğu: 100 piksel otomatik; liste stili: yok; genişlik: 632 piksel; yükseklik: 87 piksel; taşma-y: gizli;)
Şimdi "Tasarım" sekmesine gidin,
yeni ver HTML öğesi / JavaScript ve kodu verin:
Golovna
şantaj
MySql " />
HTML " />
Bize Ulaşın
HTML / JavaScript gadget'ına eklenen koda gerekli değişiklikleri ekleyin:
Blogun gerekli tarafına bağlantı için # değişiklik simgesi baş tarafı blog ve)
Resmi görünce portakalı göreceğiz , Belirli bir öğe için simge resminde doğrudan bir satıra geçin.Öğe, mavi vizyonlar css menü tarafının adı.HTML öğesi değiştirilsin mi? JavaScript, "Tasarım" blog girişinden talep ediliyor.
Menünüz için ikonları, logoları ve resimleri vikoristovuvati yapabilirsiniz png z arka planda görelim ... Daha fazlasını öğrenmek için, simgeler üzerine bir şaka olan vicoristovuvati'den daha güzel resimlere ihtiyacınız var. bu arada, iconsearch.ru
Sitede her şey suçlu, ancak uyarlanabilir, yatay bir menü değil, benzer şekilde tüm ekranlarda kibar olmaktan suçluyuz. JS'yi kaydetmeden, saf bir tarzda bir viconan gibi klasik navigasyonu görmek için proponasyonu kaldırın. Kendi tarzınız için, efektlerin varlığına rağmen basit, standart bir görünümde oluşturulduğu için birçok siteye gidebilirsiniz. Ayrıca hareketli burunlardan bakarsanız buton otomatik olarak oluşacaktır. Sağ Taraf Baskı tam genişlikte olmadığında, kategoriler görünecektir, ancak her şey yandan, düzgün bir şekilde, böylece yazı tipi düğmeleri görsel olarak görünür olacaktır. Yak alınabilir, o zaman burada papazlar basitti HTML listeleri , Tümü gibi tüm listeleri tutmak için mevcut kategoriye geçişten önce bulunabilecek. Direk kavramı, navigasyon listesinin yatay bir görünümde güzel bir şekilde düzenlenmesi veya cep telefonunun otomatik olarak dikey bir konuma yerleştirilmesi durumunda, resimlerde gösterildiği gibi malzemenin arkasında kilitlenir.
Cilt beslemesinin arkasında bir bilgi koleksiyonu vardır ve rozrobnik'in kendisi bu konuda veya tematik olarak daha uygun olan figürlerde değişebilir. Menünün kendisi koyu yeşil renktedir, sadece görünümlere bir göz atın, bu da yaratılması çok kolay olabilir. Aksi takdirde, CSS stili kullanılarak her şey kökten değiştirilebilir ve ihtiyacınız olan tasarım stili ve hepsinden önemlisi, İnternet kaynağının temeline yazarak olacaktır.
1
... Yani değişiklik için, portala giderseniz.
2
... Zaten mobil cihaza hayran kalan menüden göz kırpmadılar.
3
... Burada bir tıkırtı duyuldu, tüm güç kaynağı uzaktaydı.
Kurulumdan Önce Başlarken:
Bölüm (
Başlık (
#kamtukagnpos (
#kamtukagnpos: üzerine gelin (
Gezinti (
Nav ul (
Nav ul li (
Nav ul li: son çocuk (
Nav ul li bir (
Nav ul li a: üzerine gelin (
Nav ul li a: üzerine gelin (
Nav ul li bir ben (
Navigasyon-menusaita ul (
Navigasyon-menusaita ul li (
Navigasyon-menusaita ul li: son çocuk (
Giriş, etiket (
@media yalnızca ekran ve (maksimum genişlik: 1440 piksel) (
@media yalnızca ekran ve (maksimum genişlik: 980 piksel) (
#kamtukagnpos (
giriş (
Giriş: fous (
Etiket (
Girdi: kontrol edildi ~ nav (
Gezinti (
Nav ul (
Nav ul li (
Nav ul li bir (
Nav ul li bir ben (
@media yalnızca ekran ve (maksimum genişlik: 480 piksel) (
@media yalnızca ekran ve (maksimum genişlik: 360 piksel) (
Demo tarafı , І gerçekten tahmin et, her şey harika, aslında, o kadar aptalca bir şey olmasa da, sadece bir etki vermek için kaynağı adlandırın, ancak tüm işaretler görüntülendiğinde, pencereye gidecekler, bu yüzden görünecek daha kolayca. dikey menü işaretlenmiş veya numaralandırılmış bir listeye dayalı olmalıdır. Listenin tüm öğeleri için, konteyner bloğunun tüm genişliğini kaplayan genişlik boyunca konteyner öğesinin tüm genişliğini kaplayacak şekilde dikey olarak katlanırlar.
Listedeki unsurlar yanıltıcı olabileceği gibi başlıklar, simgeler, resimler de olabilir. Dikey menüye ek olarak, site hakkında yorum, kategori listesi vb.
1. Başlıklı dikey menü
Basit zarif tasarım seçeneği. Sitedeki kategorilerin stilizasyonuna gidin. Bir öğenin üzerine gelindiğinde liste, listenin rengini değiştirir.
* (Box-sizing: border-box; margin: 0;) .widget (dolgu: 20px 30px; arka plan: beyaz; yazı tipi ailesi: "Roboto", sans-serif;) .widget-title (metin dönüşümü: büyük harf) ; harf aralığı: 2 piksel; renk: # 222; yazı tipi boyutu: 16 piksel; sol dolgu: 15 piksel; kenar boşluğu: 15 piksel; kenarlık sol: 2 piksel katı # b99d61;) .widget listesi (dolgu: 0; liste -style: yok;) .widget-list a: önce (içerik: "\ 2014"; kenar-sağ: 14px;) .widget-list a (metin-dekorasyonu: yok; anahat: yok; ekran: blok; dolgu: 6 piksel 0; harf aralığı: 1 piksel; yazı tipi ağırlığı: 300; renk: # 444; geçiş: .3s doğrusal;) .widget listesi a: üzerine gelin (renk: # b99d61;)2. "Metro haritası" tarzında dikey menü
Dikey menünün tasarımı için Tsikave çözümü, ek iç içe menüler ekledi. "Gilka metro" - liste arasında liva, cilt isteklerinden önce belirteçler oluşturulur.
.metro (liste stili: yok; dolgu: 0; kenar boşluğu: 30px 0 0 50px; kenarlık-sol: 5px katı # DAE4F1;) .metro li (satır yüksekliği: 2em;) .metro ul (kenar boşluğu: 20px 0 20px 15 piksel; dolgu: 0; kenarlık: yok; liste stili: yok;) .metro ul: önce, .metro ul: sonra (içerik: ""; genişlik: 5 piksel; yükseklik: 28 piksel; arka plan: # DAE4F1; konum: göreceli ; görüntüleme: blok; sol: -9 piksel;) .metro ul: önce (dönüştürme: döndürme (-45 derece); kenar boşluğu: -15 piksel;) .metro ul: sonra (dönüştürme: döndürme (45 derece); alt: -20 piksel ;) .metro ul li (sol kenarlık: 5 piksel katı # DAE4F1;) .metro ul li: birinci çocuk (üst kenar boşluğu: -5 piksel; dolgu üst: 5 piksel;) .metro ul li: son çocuk (dolgu -bottom: 9px; margin-bottom: -25px;) .metro a (metin-dekorasyon: yok; ekran: blok; yazı tipi ailesi: "Noto Sans", sans-serif; renk: # 4A4B4D;) .metro a: önce (içerik: ""; görüntü: satır içi blok; arka plan: # CA682D; genişlik: 12 piksel; yükseklik: 12 piksel; sol: -9 piksel; konum: göreli; sınır yarıçapı: %50; kenar boşluğu: .5em;)3. Fareyle üzerine gelme efektleriyle dikey menü
Listedeki bir öğenin üzerine gelindiğinde görünen simge ve arka plan dolgusu, dikey menüdeki öğelerin tasarımını teşvik etmeye yardımcı olur.
.category-wrap (dolgu: 15 piksel; arka plan: beyaz; genişlik: 200 piksel; kutu gölgesi: 2 piksel 2 piksel 8 piksel rgba (0,0,0, .1); yazı tipi ailesi: "Helvetica Neue", Helvetica, Arial, sans -serif;) .category-wrap h3 (yazı tipi boyutu: 16px; renk: rgba (0,0,0, .6); kenar boşluğu: 0 0 10px; dolgu: 0 5px; konum: göreli;) .category-wrap h3: after (içerik: ""; genişlik: 6 piksel; yükseklik: 6 piksel; arka plan: # 80C8A0; konum: mutlak; sağ: 5 piksel; alt: 2 piksel; kutu gölgesi: -8 piksel -8 piksel # 80C8A0, 0 -8 piksel # 80C8A0 , -8px 0 # 80C8A0;) .category-wrap ul (liste stili: yok; kenar boşluğu: 0; dolgu: 0; kenarlık üstü: 1px katı rgba (0,0,0, .3);) .category- wrap li (kenar boşluğu: 12px 0 0 0px;) .category-wrap a (metin-dekorasyonu: yok; görüntü: blok; yazı tipi boyutu: 13px; renk: rgba (0,0,0, .6); dolgu: 5px ; konum: göreceli; geçiş: .3s doğrusal;) .category-wrap a: after (içerik: "\ f18e"; yazı tipi ailesi: FontAwesome; konum: mutlak; sağ: 5 piksel; renk: beyaz; geçiş: .2s doğrusal ;) .category-wrap a: üzerine gelin (arka plan: # 80C8A0; renk: beyaz; )4. Simgeli dikey menü
Menüdeki simgeler, dış görünüm kategorisinin görsel çapasını, ek sözlü açıklamasını gösterir. Simgeleri görüntülemek için bağlanmanız gerekir. Ayrıca, ister hafif bir yazı tipi ister klasik resimler olsun, galip gelebilirsiniz.
* (Box-sizing: border-box; margin: 0;) .widget (dolgu: 20px; border: 5px solid # f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans- serif;) .widget h3 (kenar boşluğu: 20 piksel; metin hizalama: merkez; yazı tipi boyutu: 24 piksel; yazı tipi ağırlığı: normal; renk: # 424949;) .widget ul (kenar boşluğu: 0; dolgu: 0; liste -stil: yok; genişlik: 250 piksel;) .widget li (kenarlık-alt: 1 piksel katı #eaeaea; dolgu-alt: 15 piksel; kenar boşluğu: 15 piksel;) .widget li: son çocuk (sınır-alt: yok; margin-bottom: 0; padding-bottom: 0;) .widget a (metin dekorasyonu: yok; renk: # 616a6b; görüntü: satır içi blok;) .widget li: önce (yazı tipi ailesi: FontAwesome; yazı tipi boyutu : 20 piksel; dikey hizalama: alt; renk: # dd3333; kenar boşluğu: 14 piksel;) .widget li: nth-child (1): önce (içerik: "\ f1fc";) .widget li: nth-child ( 2): önce (içerik: "\ f0d0";) .widget li: nth-child (3): önce (içerik: "\ f0cd";) .widget li: nth-child (4): önce (içerik: " \ f028 ";) .widget li: nth-child (5): önce (içerik:" \ f03d " ;)5. Resimli dikey menü
Danimarka poposu, yenilikler, benzer mallar vb. içeren blokların kaydı için kullanılabilir. bir çevrimiçi mağaza için web sitesi.
">
