.
Temel konteynerin içine ihtiyacımız olan içeriği yerleştiriyoruz.
) css'de çok “hamburger düğmesi” şeklinde oluşturulmuş, bunun yardımıyla gizli onay kutusuyla bağlantı kuracağız. Bunun için zorunludur, for niteliğinin adı onay kutusunun kimliğiyle eşleşmelidir. iOS için boş bir onclick özelliği kullanılıyor
İnternet sitesi <
ul>
<
li><
a href=
"#1"
>Bir
<
li><
a href=
"#2"
>İki
<
li><
a href=
"#3"
>Üç
<
li><
a href=
"#4"
>dört
<
li><
a href=
"#5"
>Beş
<
li><
a href=
"#6"
>Altı
<
li><
a href=
"#7"
>Yedi
Bir İki Üç dört Beş Altı Yedi Bu, yan menü düzenimizi tamamlıyor. Doğru, tamamen isteğe bağlı bir özellik daha var, bu, panel açıkken ana içeriği karartmanın arka planıdır. İhtiyacın olursa, sadece
<
div class
=
"mask-content"
>
Demoda, bu özelliği varsayılan olarak işten çıkardım, bu bloğu yorumladım, aniden ihtiyacınız olursa kolayca bulabilir ve kolayca açabilirsiniz))).
Böylece, gerekli tüm unsurlar yerlerinde, en önemli ve ilginç olan, menümüze görünüm, renk, şekil ve hareket kazandırmak için kalıyor. Tüm bunları sadece CSS ile yapacağız. Javascript veya ek resim yok.
css Direkt olarak yaptığım için her bir kuralı ve özelliği açıklamayacağım. css kodu .
/** * Değiştirilebilir yan gezinme çubuğu * sol tıklamayla dışarı kayar */ . nav( /* genişlik isteğe bağlıdır, denemekten çekinmeyin */ genişlik: 320 piksel minimum genişlik: 320 piksel; /* panelin yüksekliğini sabitleyin ve maksimuma ayarlayın */ yükseklik: %100; pozisyon: sabit; üst: 0 alt: 0 kenar boşluğu: 0 /* paneli sayfanın sol kenarına göre kaydır (gizle) */ sol: -320 piksel; /* dolgu malzemesi */ dolgu: 15 piksel 20 piksel; /* yumuşak bir geçiş panel ofseti */ - webkit geçişi: sola 0. 3s; - moz geçişi: sola 0. 3s; geçiş: sola 0. 3s; /* panelin arka plan rengini tanımlayın */ arka plan: #16a085; /* diğer elemanların üstüne */ z-endeksi: 2000 ; ) /** * Panel geçiş düğmesi * etiketi
*/
. gezinme geçişi( /* kesinlikle konum */ pozisyon: mutlak; /* panelin sol kenarına göre */ sol: 320 piksel; /* panelin üst kenarından dolgu */ üst: 1em; /* dolgu malzemesi */ dolgu: 0.5em /* radyo düğmesinin arka plan rengini tanımlayın * panelin arka plan rengine göre daha sık */ arka plan: miras; /* metin rengi */ renk: #dadada; /* imleç türü */ imleç: işaretçi; /* yazı Boyutu */ yazı tipi boyutu: 1.2em; satır yüksekliği: 1 ; /* her zaman diğer sayfa öğelerinin üstünde */ z-endeksi: 2001; /* üzerine gelindiğinde metin rengini canlandır */ -webkit-geçiş: renk . 25s kolay giriş çıkış; - moz geçişi: renk . 25s kolay giriş çıkış; geçiş: renk . 25s kolay giriş çıkış; ) /* buton metnini tanımla * Unicode karakter (CENNET İÇİN TRIGRAM) */ . nav- toggle: after (içerik: "\2630" ; metin dekorasyonu: yok; ) /* metin renginin üzerine gelin */ . gezinme geçişi: fareyle üzerine gelin (renk: #f4f4f4; ) /** * Gizli onay kutusu (onay kutusu) * görünmez ve erişilemez :) * seçici adı bayrak özelliği */ [ id="nav-toggle" ] (konum: mutlak; görüntü: yok; ) /** * açıldığında anahtar konumunu değiştir * mobil cihazlar * gezinme genişletildiğinde, onu panelin içine koyun */ [ id= "nav-toggle" ] : kontrol edildi ~ . gezinme > . gezinme geçişi (sol: otomatik; sağ: 2 piksel; üst: 1em; ) /** * Onay kutusu işaretlendiğinde panel açılır * :checked sözde sınıfını kullanın */ [ id= "nav-toggle" ] : kontrol edildi ~ . 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- kutu gölgesi: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; taşma- y: otomatik; ) /* * sayfa içeriği ofset * panel genişliğinin boyutuna göre, * özellik isteğe bağlıdır, amatörler için */ [ id= "nav-toggle" ] : kontrol edildi ~ ana > makale ( - webkit- transform: translateX(320px) ; - moz- transform: translateX(320px) ; transform: translateX(320px) ; ) /* * anahtar sembolünü değiştirin, * normal çarpı işareti (ÇARMA X), * başka herhangi bir simgeyi kullanabilirsiniz */ [ id= "nav-toggle" ] : kontrol edildi ~ . gezinme > . nav-toggle: after (içerik: "\2715" ; ) /** * Android'deki hatayı düzelt<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
body ( - webkit-animation: bugfix sonsuz 1s; ) @- webkit- keyframes bugfix ( to ( dolgu: 0 ; ) ) /** * mobil cihazların orta ve küçük ekranlarıyla * ilgilenin */ @ medya ekranı ve (min- genişlik: 320px) ( html, gövde ( kenar boşluğu: 0 ; taşma- x: gizli; ) ) @ ortam ekranı ve (maks- genişlik: 320 piksel) ( html, gövde ( kenar boşluğu: 0 ; taşma- x: gizli; ) .nav ( genişlik: %100; kutu gölgesi: yok ) ) /** * Panelin başlığının (logosunun) stilini oluşturuyoruz */ . 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üşüm: ölçek(0.1 , 0.1 ) ; -ms- dönüşümü: ölçek(0.1 , 0.1 ) ; - moz- dönüşümü: ölçek(0.1 , 0.1 ) ; - webkit-dönüşüm: ölçek(0.1 , 0.1 ) ;dönüşüm-kökeni: %0 %0; - ms-dönüşüm-kökeni: %0 %0; - moz- dönüşümü- orijin: %0 %0 - webkit- transform- orijin: %0 %0 - geçiş: opaklık 0. 8s, dönüşüm 0. 8s - ms- geçiş: opaklık 0. 8s, - ms- dönüşüm 0. 8s - moz-geçiş : opaklık 0.8s, -moz-dönüşüm 0.8s;-webkit-geç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) düzgün görünmesi */ [ id= "nav-toggle" ] : kontrol edildi ~ . nav h2 ( opaklık: 1 ; dönüşüm: ö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 kendisini oluşturur * menü öğeleri için sırasız bir liste kullanır * dönüşümleri ve yumuşak geçişleri sabitler */ . nav > ul (gösterge: blok; kenar boşluğu: 0 ; dolgu: 0 ; liste stili: yok; ) . nav > ul > li ( line-height: 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- dönüşümü. 5s. 1s; - moz- geçiş: opaklık. 5s. 1s, - moz- dönüşümü. 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 ( opacity: 1 ; - webkit- transform: translateX(0 ) ; - moz- transform: translateX(0 ) ; - ms- transform: translateX(0 ) ; transform: translateX(0 ) ; ) /* menü öğelerinin görünme aralıklarını belirle */ . nav > ul > li: nth-child(2) ( - webkit- geç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ş: opacity . 5s . 3s, - webkit- transform . 5s . 3s; geçiş: opacity . 5s . 3s, transform . 5s . 3s; ) . nav > ul > li: nth-child(4) ( - webkit- geç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ş: 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; ) /** * stil menü öğesi bağlantıları */ . 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şi: renk . 5s kolaylığı, dolgu . 5s kolaylığı; geçiş: renk . 5s kolaylığı, dolgu . 5s kolaylığı; ) /** * fareyle üzerine gelindiğinde menü bağlantılarının durumu */ . nav > ul > li > a:hover, . nav > ul > li > a: odak ( color: white; padding-sol: 15px; ) /** * menü bağlantılarının altını çiz */ . gezinme > ul > li >
a :
önceki {
içerik :
""
;
Görüntüle :
engellemek ;
durum :
mutlak ;
Sağ :
0
;
alt :
0
;
yükseklik :
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 ;
durum :
mutlak ;
ayrıldı :
0
;
alt :
0
;
yükseklik :
1 piksel ;
Genişlik :
100
%;
arka fon :
#3bc1a0; -
web seti -
geçiş :
Genişlik .
5s kolaylığı ;
geçiş :
Genişlik .
5s kolaylığı ;
}
/** * fareyle üzerine gelindiğinde bağlantıların alt çizgisini * canlandır */
.
gezinme >
ul >
li >
a :
üzerine gelmek :
önceki {
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ğin arka planını karartma * öğeleri engellerken * tartışmalı özellik, eğer ihtiyacınız varsa * sadece yorum yapmayın */
/* .mask-content ( 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; ) :checked ~ .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;) */
/** * Değiştirilebilir yan gezinme çubuğu * sol tıklamayla dışarı kayar */ .nav ( /* genişlik isteğe bağlıdır, denemekten çekinmeyin */ width: 320px; min-width: 320px; /* panel maksimum */ yükseklik : %100; konum: sabit; üst: 0; alt: 0; kenar boşluğu: 0; /* paneli sayfanın sol kenarına göre kaydır (gizle) */ sol: -320 piksel; /* padding */ padding: 15px 20px; / * düzgün panel ofset geçişi */ -webkit-transition: sol 0.3s; -moz-transition: sol 0.3s; geçiş: sol 0.3s; /* panel */ arka plan: #16a085; /* diğer öğelerin üstünde * / z-endeksi: 2000; ) /** * Panel geçiş düğmesi * etiketi */ .nav-toggle ( /* kesinlikle konum */ konum: mutlak; /* panelin sol kenarına göre */ sol: 320 piksel; /* panelin üst kenarından dolgu */ üst: 1em; / * dolgu */ dolgu: 0,5em; /* radyo düğmesinin arka plan rengini tanımlayın * panelin arka plan rengine göre daha sık */ arka plan: miras; /* metin rengi */ renk: #dadada; /* imleç type */ imleç: işaretçi; /* font boyutu * / font-size: 1.2em; line-height: 1; /* her zaman diğer sayfa öğelerinin üstünde */ z-index: 2001; /* üzerine gelindiğinde metin rengini canlandır */ -webkit-geçiş: renkli .25s kolay çıkış; -moz-geçiş: renkli .25s kolay giriş; geçiş: renkli .25s kolay giriş; ) /* düğme metnini tanımla * Unicode karakter (CENNET İÇİN TRIGRAM) */ .nav-toggle:after ( içerik: "\2630"; metin-dekorasyon: yok; ) /* metin rengi üzerine gelin */ .nav-toggle:hover ( color: #f4f4f4; ) /* * * Gizli onay kutusu (onay kutusu) * görünmez ve kullanılamaz :) * seçici adı bayrak özelliği */ ( positi açık: mutlak; görüntü yok; ) /** * geçiş konumunu değiştir * mobil cihazlarda görüntülerken * gezinme genişletildiğinde, panelin içindeki konum */ :checked ~ .nav > .nav-toggle ( sol: otomatik; sağ: 2 piksel; üst: 1em; ) /* * * Kutu işaretlendiğinde panel açılır * sözde sınıfı kullanın :checked */ :checked ~ .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: auto; ) /* * içerik ofset sayfası * panelin genişliğine göre, * özellik isteğe bağlı, amatörler için */ :kontrol edildi ~ ana > makale ( -webkit-transform: translateX(320px); -moz-transform: translateX( 320px); transform: translateX(320px); ) /* * geçiş sembolünü değiştir, * özel çarpı (ÇARMA X), * başka herhangi bir simgeyi kullanabilirsiniz */ :checked ~ .nav > .nav-toggle:after ( içerik: "\2715"; ) /** * android'de önek 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; ) :checked ~ .nav > ul > li ( opaklık: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0 ); transform: translateX(0); ) /* menü öğesi aralıklarını tanımla */ .nav > ul > li:nth-child(2) ( -webkit-transition: opacity .5s .2s, -webkit-transform .5s . 2s; geçiş: opacity .5s .2s, transform .5s .2s; ) .nav > ul > li:nth-child(3) ( -webkit-geçiş: 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ş: opacity .5s .4s, -webkit-transform .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ü öğesi bağlantı stili */ .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 kolaylığı, dolgu .5s hareket kolaylığı; geçiş: renkli .5s hareket kolaylığı, dolgu .5s hareket kolaylığı; ) /** * fareyle üzerine gelindiğinde menü bağlantılarının durumu */ .nav > ul > li > a:hover, .nav > ul > li > a:focus ( renk: beyaz; dolgu-sol : 15 piksel; ) /** * menü bağlantısı altı çizili */ .nav > ul > li > a:before ( içerik: ""; görüntü: blok; konum: mutlak; sağ: 0; alt: 0; yükseklik: 1 piksel; genişlik: %100 ; -webkit-geçiş: genişlik 0s hareket hızı; geçiş: genişlik 0s hareket kolaylığı; ) .nav > ul > li > a:after ( içerik: ""; görüntü: blok; konum: mutlak; sol: 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; ) /** * fareyle üzerine gelindiğinde alt çizgiyi canlandırır */ .nav > ul > li > a:hover:before ( 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:hover:after ( genişlik: %0; arka plan: şeffaf; -webkit-geçiş: genişlik 0s kolaylık; geçiş: genişlik 0s kolaylık; ) /* ana içeriğe arka planı soldur * öğeleri engellerken * tartışmalı özellik, eğer ihtiyacınız varsa * sadece açıklamayı kaldırı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; ) */
Anladığınız gibi, hemen hemen tüm özellik değerleri isteğe bağlıdır, yani. tüm unsurlarını zevkinize ve renginize göre kolayca değiştirebilirsiniz, umarım açıklamalar size bu konuda yardımcı olur. Pekala, bir şey çiğnenmezse ya da canımın bir kısmı bulunursa, yorumlara yazın, kesinlikle çözeceğiz ve düzelteceğiz.
Sonuç olarak, tüm tarayıcıların CSS3 özelliklerini işlemede eşit derecede iyi olmadığını hatırlatmak istiyorum. Bu çözüm elbette çok ilginç ama yine de daha deneysel. İhtiyaçlarınıza göre ayarladıktan sonra, çalışma alanına sıkıca vidalamadan önce, çalışmasını kontrol ettiğinizden emin olun. farklı tarayıcılar ve çeşitli mobil cihazlarda.
Sonuca tekrar bakın, kaynak arşivi indirin, farklı parametrelerle denemeler yapın ve oluşturun, oluşturun, oluşturun...
Yakın gelecekte, nasıl olduğunu anlatmaya ve göstermeye çalışacağım, bu karar , kolayca geri çekilebilir uygulayabilirsiniz, yan paneller , gemideki kullanıcılarla etkileşim kurmak için diğer eşit derecede önemli unsurlarla.
Artık kullanıcılar kendilerini tanıma fırsatına sahipler. Hepsi TemplateMonster pazarında bulunabilen ayrı bir kategoride sunulmaktadır. Onlarla ilgili herhangi bir sorun olmamalıdır. Sadece benzersiz içeriğinizi ekleyin ve bitirdiniz - bir iş kurabilir ve daha fazla okuyucu çekebilirsiniz. Her şablon için metnin elle yazıldığını hatırlamak da çok önemlidir.
Tüm saygımla, Andrew
İyi günler sevgili okuyucular. Bugün konuyu tartışacağız html ve css kullanarak yatay menü nasıl yapılır ". Menü, kural olarak, sitenin başlığında bulunur ve en önemli sayfalara bağlantıların bir listesidir, aynı zamanda denir. ana menü . Kullanıcılar sürekli olarak bu bağlantılara tıklayacaktır. Bunları nasıl düzenlediğiniz ve menüye hangi tasarımı verdiğiniz, kullanıcı davranışını, dönüşümü, sitenizle ilgili genel deneyimlerini ve tabii ki .
Yatay menü için HTML kodu
Bir zamanlar sitenin ana menüsü resimler, tablolar, flash ve muhtemelen başka bir şey üzerinde yapılırdı, ancak günümüzde “liste” etiketlerini kullanarak bir menü oluşturmanın en popüler ve doğru yöntemi var.
Etiketler menü oluşturmak için kullanılır.
Aşağıdaki kodda bir menü oluşturmak için html etiketlerini kullanma örneği:
ev
Hizmetler
Fiyat:% s
Kişiler
Yatay Menü için Standart CSS Stilleri ul ( liste stili: yok; /*liste işaretçilerini kaldır*/ kenar boşluğu: 0; /*padding'i kaldır*/ padding-left: 0; /*remove padding*/ ) a ( text-decoration: none; /*alt çizgiyi kaldır link text*/ ) li ( float:left; /*Menüyü uygulamak için listeyi yatay olarak yerleştirin*/ margin-right:5px; /*Menü öğelerini girintileyin*/ ) Başlıkta, özel stiller ve ziller ve ıslıklar olmadan hazır bir üst menü alıyoruz, buna geleceğinizin çerçevesi denilebilir. güzel menü . Bu html ve css'yi kopyalayıp yapıştırırsanız, şöyle görünecektir.
Gelecekteki menünüz için bir çerçeve (şablon) örneği
Her şey oldukça basit çıktı, elbette, hemen güzel bir ana menü istiyorsunuz, ancak temelleri anlamadan, html ve css'de hatasız iyi bir menü oluşturamayacaksınız.
Ayrıca menüleri yatay yapmak için kullanılan float:left; , örneğin display:inline-block; veya ekran:esnek; , ancak yukarıda açıklanan yöntemin kullanılması önerilir.
Menü şablonumuzu çeşitli stiller ile dolduralım ve yapalım güzel .
Bir web sitesi için güzel bir yatay menü örnekleri
Şimdi hazır bir yatay menü tasarımı ile bazı hazır örnekler vereceğim.
Siteniz için tüm "güzel şeyleri" kendiniz yaratabilirsiniz ve İnternet'e bakmayın. Bunu yapmanın en kolay yolu aşağıdaki örneklerden birine dayanmaktadır.
Ayrı öğeler içeren basit mavi menü
"Üst" menü için CSS stilleri
Aşağıda bu menü için stiller bulunmaktadır. HTML, "iskelet" menüsündekiyle aynı kalır.
Ul ( liste stili: yok; /*liste işaretçilerini kaldır*/ kenar boşluğu: 0; /*padding'i kaldır*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*indent top*/ ) a ( text-decoration: none; /*bağlantı metni altını çizmeyi kaldır*/ background:#30A8E6; /*menü öğesine arka plan ekle*/ color:#fff; /*bağ rengini değiştir*/ padding:10px; /*dolgu ekle */ font-family: arial; /*yazı tipini değiştir*/ border-radius:4px; /*yuvarlama ekle*/ -moz-transition: tümü 0.3s 0.01s kolaylığı; /*yumuşak bir geçiş yap*/ -o-transition : tümü 0,3 sn 0,01 sn kolaylık; -webkit-geçiş: tümü 0,3 sn 0,01 sn hareket hızı; ) a:hover ( background:#1C85BB;/*vurgu efekti ekle*/ ) li ( float:left; /*listeyi yatay olarak yerleştir menüyü uygulayın*/ margin-right:5px; /*Menü öğelerini girintileyin*/ )
Kırmızı bir arka plan ile renkli bir çizgi üzerinde bulunan ana menü
renk çizgisinde css tarzı menü ul ( list-style: none; /*liste işaretçilerini kaldır*/ margin: 0; /*padding'i kaldır*/ padding-left: 0; /*demove padding*/ margin-top:25px; /*indent top*/ background :#FF4444; /*tüm menüye bir arka plan ekle (bu parametrenin değiştirilmesi tüm menünün rengini değiştirecektir)*/ height: 50px; /*yüksekliği ayarla*/ ) a ( text-decoration: none; /* bağlantı metninin alt çizgisini kaldırın* / background:#FF4444; /*menü öğesine bir arka plan ekleyin (bu ayarın değiştirilmesi tüm menü öğelerinin rengini değiştirir)*/ color:#fff; /*bağlantı rengini değiştirin* / padding:0px 15px; /*padding ekle*/ font-family: arial; /*yazı tipini değiştir*/ line-height:50px; /*menüyü dikey olarak hizala*/ display: block; border-right: 1px solid # F36262; /*sağa kenarlık ekle*/ -moz-transition : tümü 0.3s 0.01s kolaylığı; /*yumuşak bir geçiş yap*/ -o-transition: tümü 0.3s 0.01s kolaylığı; -webkit-transition: tümü 0,3 sn 0,01 sn kolaylık; ) a:hover ( background:#D43737;/ *hover efekti ekle*/ ) li ( float:left; /*listeyi gerçek olarak yatay olarak yerleştir Menü*/ ) HTML+CSS'de açılır menü
Uygulama için sitede ek açılır (açılır) menü herhangi bir menü öğesi için, yatay menüden herhangi bir bağlantı için HTML koduna ek bir öğe listesi eklememiz ve CSS stillerini değiştirmemiz gerekiyor. Stillerde, basit bir numara kullanacağız - fareyle üzerine gelindiğinde açılır menünün görüntüsünü ihtiyacımız olan öğeye değiştirmek üst menü . Örneğin, "hizmetler" öğesini ele alalım.
Basit bir açılır menü oluşturma örneği
Açılır menünün HTML kodu
ev
Hizmetler
Hizmet 1
Uzun hizmet 2
Hizmet 3
Fiyat:% s
Kişiler
Açılır CSS Stilleri ul ( list-style: none; /*liste işaretçilerini kaldır*/ margin: 0; /*padding'i kaldır*/ padding-left: 0; /*demove padding*/ margin-top:25px; /*indent top*/ background :#819A32; /*tüm menüye bir arka plan ekle*/ height: 50px; /*yüksekliği ayarla*/ ) a ( text-decoration: none; /*bağlantı metninin altını kaldır*/ background:#819A32 ; /*menü öğesine bir arka plan ekle*/ color:#fff; /*bağlantıların rengini değiştir*/ padding:0px 15px; /*padding ekle*/ font-family: arial; /*yazı tipini değiştir*/ line-height :50px; /*menüyü dikeylere hizala*/ display: block; border-right: 1px solid #677B27; /*sağa bir kenarlık ekle*/ -moz-transition: all 0.3s 0.01s kolaylık; /*make a yumuşak geçiş*/ -o-geçiş: tümü 0,3 sn 0,01 sn kolaylık; -webkit-geçişi: tümü 0,3 sn 0,01 sn kolaylık; ) a:hover ( background:#D43737;/*vurgu efekti ekle*/ ) li ( kayan nokta :left; /*Menüyü uygulamak için listeyi yatay olarak yerleştirin* / position:relative; /*konumlandırma için konumu ayarlayın*/ ) /*Gizli açılır menü için stiller* / li > ul ( konum:mutlak; üst:25 piksel; görüntü yok; ) /*Gizli kısmı görünür yap*/ li:hover > ul ( display:block; width:250px; /*Açılır menünün genişliğini ayarla*/ ) li:hover > ul > li ( float:none; /* Yatay konumlandırmayı kaldırın* / ) Hangi hizmetlere ve kategorilere sahip olmanız gerektiğini tam olarak anlamak için, malzemeyi tanımanızı tavsiye ederim:.
Ana yatay menü nasıl oluşturulur, birkaç şablon yapılır, buna basit stiller nasıl eklenir ve daha güzel hale getirilir, siteniz için bir açılır menü nasıl yapılır, sizlere olabildiğince kısaca anlatmaya çalıştım. Kolaylık sağlamak için yukarıda sunulan tüm menüleri aşağıda indirebileceğiniz tek bir html dosyasında topladım. Ekran görüntüsünde görünüyor:
İlginiz için teşekkür ederim.
Bu derste, klasik bir yatay menü yapacağız. saf CSS . Listelerde simgeler var. Bir öğenin üzerine gelindiğinde, düğmenin ve metnin rengini düzgün bir şekilde değiştirir ve bir gölge ekler. Açılır listeler çok seviyeli yapılabilir ve en önemlisi, bunların hepsi oldukça basit bir şekilde saf CSS3'te uygulanır.
Derste kullanacağız:
ekran:esnek;
geçiş kullanın;
elementleri position kullanarak konumlandıracağız.
Yatay menünün HTML yapısı
Öncelikle yatay menü için işaretlemeyi yazalım. Geliştirme ortamımızı açıyoruz, benim durumumda PhpStorm , bir index.html dosyası oluşturun, html:5 çerçevesini yazın, lang yerine ru .
Kodlama hariç tüm metaları sileceğim, başlığımı yazacağım" tom menüsü ».
Gövde arasına başlık etiketi yazıyoruz ve içinde menümüzün yer alacağı .dws-menu sınıfının olduğu bir blok var. Ayrıca yapı şu şekilde olacak, beş adetlik listeler oluşturacağız. Her liste, href="#" özniteliğine sahip bir bağlantıya sahip olacaktır. Sonra .fa .fa- sınıfına sahip bir simge I olacak.
Uygula'yı tıklayın.
Menü maddelerinin adını yazalım ( Ana Sayfa, Ürünler, Hizmetler, Haberler, Kişiler ).
Ardından, simgeleri seçin ve bağlayın. Font Awesome web sitesine gidiyoruz, şu menü öğeleri için simgeleri seçiyoruz:
Arşivi simgelerle siteden indiriyoruz, içeriğini bilgisayarımıza çıkarıyoruz, fontlar klasörünü ve css klasörünü geliştirme ortamımıza kopyalıyoruz.
Yazı tipleri klasörü simge yazı tiplerini içerir ve css klasörü bunların stillerini içerir. Sıkıştırılmış stiller, font-awesome.min tarafından kaldırılabilir, sıkıştırılmamış font-awesome.css içerir.
index.html'de simgeleri bağlarız ve her öğeye kendi simge stilini belirleriz ( ev , alışveriş Sepeti , çarklar , ikinci liste , açık zarf ).
Ana çerçeveyi yaptık, ana stili tanımladıktan sonra alt menüyü oluşturacağız ve şimdi yatay menü style.css'nin ana stillerini anlatacağımız ve index.html'ye bağlayacağımız bir dosya oluşturacağız. Stillerin birbirine bağlı olduğunu kontrol etmek için bir img klasörü oluşturacağım, içine rastgele bir resim yerleştireceğim arkaplan . Arkaplan kullanarak resmin bağlantısını yazalım.
Gövde( arka plan resmi: url("../img/ep_naturalwhite.png"); )
Yatay Menü için CSS Stillerini Tanımlama
Öncelikle farklı tarayıcıların varsayılan olarak ayarlayabileceği tüm girintileri sıfırlayalım:
Dws-menüsü *( kenar boşluğu: 0; dolgu: 0; )
Başlığı 200 maça ayarlayalım. ve indirilebilir ve sitenize ayrı olarak bağlanabilen Cuprum fontunu atayın, her ihtimale karşı ek fontlar yazacağız.
Başlık ( kenar boşluğu: 200 piksel; yazı tipi ailesi: Cuprum, Arial, Helvetica, sans-serif; )
İşaretçileri listelerden gizleyelim:
dws-menu ul, .dws-menu ol( liste stili: yok; )
Listeleri display: flax ile yatay olarak gösterelim ve ortalayalım:
Dws-menu > ul( display: flex; justify-content: center; )
Başlıkta sadece üstten girinti yapalım, margin-top yazalım.
başlık( üst kenar boşluğu: 200 piksel; yazı tipi ailesi: Cuprum, Arial, Helvetica, sans-serif; )
Menümüzü tasarlayalım, butonların rengini, yazı tipini vs. belirleyelim.
Dws-menu > ul li a( ekran: blok; arka plan: #ececed; dolgu: 15 piksel 30 piksel 15 piksel 40 piksel; yazı tipi boyutu: 14 piksel; renk: #454547; metin dekorasyonu: yok; metin dönüşümü: büyük harf; )
Sonra simgeleri konumlandırıyoruz, listelere konum atayacağız: göreceli; simgeleri daha fazla ortalamak için:
dws-menu > ul li(konum: göreli; )
dws-menu > ul li > bir i.fa( konum: mutlak; üst: 15 piksel; sol: 12 piksel; yazı tipi boyutu: 18 piksel; )
Listelere bir sınır ayırıcı atayalım, ilk LI öğesini seçelim ve kenarlığı ayarlayalım. Son eleman LI'yi seçiyoruz ve ona benzer bir sınır atadık.
Dws-menu > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )
LI listeleri için ayırıcılar yapmak:
.dws-menu > ul li( konum: göreli;
sağ kenarlık: 1 piksel katı #c7c8ca;
}
Menü görünümü aldı, ardından üzerine gelindiğinde stilleri tanımlamaya başlayabilirsiniz.
Fareyle üzerine gelindiğinde yatay menüyü canlandırın
Dws-menu li a:hover( arka plan: #454547; renk: #ffffff; kutu gölgesi: 1 piksel 5 piksel 10 piksel -5 piksel siyah; geçiş: tümü 0,3 saniyelik kolaylık; )
Ve bu efektin sorunsuz bir şekilde kaybolmasını sağlamak için, bu stili bekleme durumundaki bağlantıya ekleyin:
.dws-menu > ul li a( ekran: blok; arka plan: #ececed; dolgu: 15 piksel 30 piksel 15 piksel 40 piksel; yazı tipi boyutu: 14 piksel; renk: #454547; metin dekorasyonu: yok; metin dönüşümü: büyük harf; geçiş: tüm 0.3 saniyelik kolaylık; ) Ana menü bitti ve alt menüleri ve alt menülerini tanımlamaya başlayabilirsiniz.
Bir CSS/HTML Açılır Menüsünü Tanımlama
index.html dosyasını açıyoruz ve örneğin ürünlere ek bir menü ekliyoruz. Eklediğimiz LI listeleri arasına UL , içine herf=”#” özniteliği ile bağlantıların olacağı beş liste yerleştireceğiz.
ul>li*5>a
Uygula'ya tıklayın, öğelerin adını yazın ( Giyim, Elektronik, Gıda, Araçlar, Yaşam. kimya ).
Giyim
Elektronik
Gıda
Aletler
Gen. kimya
Ardından style.css dosyasını açıp alt menünün stillerini açıklıyoruz.
İkinci listeyi seçin ve ona pozisyon verin: mutlak; , minimum genişliği 150 piksele ayarlayın.
/*alt menü*/ .dws-menu li ul( konum: mutlak; minimum genişlik: 150 piksel; )
Listelere 1 tepe sınırını yazalım.
Dws-menu li > ul li( border: 1px solid #c7c8ca; )
Alt menüdeki bağlantılar için dolguyu 10 piksele ayarlayın, metin dönüşümünü kaldırın ve arka planı birkaç ton daha koyu arka plan yapın: #e4e4e5; .
Dws-menu li > ul li a( dolgu: 10 piksel; metin dönüşümü: yok; arka plan: #e4e4e5; )
Daha sonra başka bir iç içe menü oluşturacağız. İşaretleme dosyasına gidelim ve örneğin "Elektronik" de daha önce yaptığımız gibi menüyü analojiyle oluşturuyoruz. Paragraf başlıklarını açıklayın ( Kameralar, Bilgisayarlar, Telefonlar ) ve kaydet.
Elektronik
kameralar
bilgisayarlar
telefonlar
Görüntülenirler, ancak ana menünün altına gizlenirler, şimdi konum: mutlak; iç içe UL ve 150 tepe ile kaydırın. tarafa:
Dws-menu li > ul li ul( konum: mutlak; sağ: -150 piksel; üst: 0; )
/*alt menü*/ .dws-menu li ul( konum: mutlak; minimum genişlik: 150 piksel; görüntü yok; ) Ve görünümleri için, fareyle üzerine gelindiğinde listeleri seçeceğiz ve bunları display:block; .
dws-menu li:hover > ul( ekran: blok; )
şimdi ekleyebilirsiniz katmanlı menüler sadece UL bloğunu kopyalayarak, maddelerini değiştirerek.
Giyim
Ayakkabı
ceketler
Pantolon
Elektronik
kameralar
bilgisayarlar
telefonlar
Gıda
Aletler
Gen. kimya
Hizmet 1
Hizmet 2
Hizmet 3
Ardından son aşamalar için butonları malzeme ile süsleyelim. Bir CSS oluşturucu kullanıyorum, birkaç Hazır Ayar oluşturdum, kendinizinkini oluşturabilirsiniz, benim durumumda sadece kopyalıyorum verilen kod ve daha önce yazdığım arka planı yerine yerleştirin.
.dws-menu > ul li a( ekran: blok;
/* Kalıcı bağlantı - bu degradeyi düzenlemek ve paylaşmak için kullanın: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ arka plan: #c9c9c9 ; /* Eski tarayıcılar */ arka plan: -moz-linear-gradient(üst, #c9c9c9 %0, #f6f6f6 %2, #c4c5c7 %98, #757577 %100); /* FF3.6-15 */ arka plan: -webkit-linear-gradient(üst, #c9c9c9 %0,#f6f6f6 %2,#c4c5c7 %98,#757577 %100); /* Chrome10-25,Safari5.1-6 */ arka plan: doğrusal gradyan(alta, #c9c9c9 %0,#f6f6f6 %2,#c4c5c7 %98,#757577 %100); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filtre: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */
dolgu: 15px 30px 15px 40px; yazı tipi boyutu: 14 piksel; renk: #454547; metin-dekorasyon: yok; metin dönüştürme:büyük harf; geçiş: tüm 0.3 saniyelik kolaylık; ) .dws-menüsü li a:hover( /* Kalıcı bağlantı - bu degradeyi düzenlemek ve paylaşmak için kullanın: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ background: #e0e1e5; /* Eski tarayıcılar */ arka plan: -moz-linear-gradient(üst, #e0e1e5 %0, #454547 %2, #454547 %98, #e0e1e5 %100); /* FF3.6-15 */ arka plan: -webkit-linear-gradient(üst, #e0e1e5 %0,#454547 %2,#454547 %98,#e0e1e5 %100); /* Chrome10-25,Safari5.1-6 */ arka plan: doğrusal gradyan(alta, #e0e1e5 %0,#454547 %2,#454547 %98,#e0e1e5 %100); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filtre: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */
renk: #ffffff; kutu gölgesi: 1px 5px 10px -5px siyah; geçiş: tüm 0.3 saniyelik kolaylık; )
İstenirse bu menü Sitede size uygun stili ayarlayabilirsiniz, bir renk oluşturmak ve kodda değiştirmek oldukça basittir. Sonuç, saf CSS ile yapılmış basit ve aynı zamanda hoş bir yatay menüdür.
Bu yazımızda sabit bir yan bilgi menüsü yapacağız. Simgeleri uygulamak için yazı tipini bağlayacağız.
Adım 1. Yazı tipini simgelerle bağlayın, boş bir belge oluşturun
Yazımda FontAwesome yazı tipiyle çalışma hakkında ayrıntılı bilgi ve projenin kendisine bir bağlantı bulabilirsiniz -.
Bağlı dosyaların bulunduğu sayfanın kodu:
Sabit yan menü
Adım 2: Sabit Menü HTML İşaretini Ekleme
Sabit menümüz için işaretleme kodu:
Fark ettiğiniz gibi, etiketi uyguladım - bu bir html5 biçimlendirme öğesidir, html4 kullanıyorsanız bu etiketi normal bir etiketle değiştirebilirsiniz veya tamamen kaldırın ve tanımlayıcıyı aşağıdaki gibi listeye taşıyın:
