- Saf CSS / HTML açılır menüsü Bu derste saf CSS'de klasik bir yatay menü yapacağız. Listelerde simgeleri...
- İşaret ederken yatay menüyü canlandırıyoruz.
- CSS / HTML açılır menüsünü tanımlayın
Saf CSS / HTML açılır menüsü
Bu derste saf CSS'de klasik bir yatay menü yapacağız. Listelerde simgeleri var. Bir öğeye işaret ederken, düğmenin ve metnin rengini yumuşak bir şekilde değiştirir, bir gölge eklenir. Açılır listeler çok seviyeli yapılabilir ve asıl şey tamamen basit CSS3'te uygulanır.
Burada bu dersin devamı - Bölüm 2 MOBİL SÜRÜM yatay menü ".
Kaleme bakın POyzbW Denis (tarafından @Dwstroy ) tarihinde CodePen .
Ders kullanımında:
- ekran: esnek;
- geçiş kullanın;
- elemanları konumlandırın.
HTML yatay menü yapısı
İlk önce yatay menünün altındaki işaretlemeyi yazın. Geliştirme ortamımızı benim durumumda açıyoruz, bu PhpStorm, bir index.html dosyası oluştur, html: 5 karesini yaz, lang'ı ru ile değiştir.
Kodlama hariç tüm metalar silinecek, “ Tom menu ” başlığımı kaydettireceğim.
Gövde arasına başlık etiketi yazıyoruz ve içine menüde içerecek olan .dws-menu sınıfında bir blok var. Daha sonra, yapı aşağıdaki gibi olacak, beş adetlik bir liste oluşturacağız. Her listede, href = "#" özniteliği ile bir bağlantı olacaktır. Daha sonra .fa .fa- sınıfı ile ikona gideceğim.
<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ başlık>
Başvurmak için basın.
Menü öğelerinin adını yazalım ( Ev, Ürünler, Hizmetler, Haberler, Rehber ).
Ardından, simgeleri seçin ve bağlayın. Siteye gidin, şu menü öğelerinin simgelerini seçeceğiz:
<i class = "fa fa- home "> </ i> <i class = "fa fa alışveriş sepeti "> </ i> <i class = "fa fags"> </ i> <i class = "fa fa -list "> </ i> <i sınıfı = "fa faope açık "> </ i>
Arşivi ikonlarla siteden indirin, içeriğini bilgisayarınıza çıkartın, font klasörünü ve css klasörünü geliştirme ortamınıza kopyalayın.
Yazı tipleri klasörü, simge yazı tiplerini ve css klasörü kendi stillerini içerir. Sıkıştırılmış stiller font-awesome.min içinden kaldırılabilir, sıkıştırılmamış font-awesome.css komutunu bağlarız.
İndex.html'de ikonları bağlarız ve her öğeyi kendi ikon stiline göre kaydederiz ( ev , alışveriş sepeti , çarklar , th-list , zarf açık ).
Ana çerçeveyi yaptık, ana stilin tanımlanmasından sonra bir alt menü oluşturduk ve şimdi yatay menü style.css'nin ana stillerini tanımlayacağımız ve index.html'e bağlayacağımız bir dosya oluşturacağız. Stillerin bağlı olup olmadığını kontrol etmek için bir img klasörü oluşturun, içine arka plana rastgele bir resim yerleştireceğim. Resim bağlantısını arka plan kullanarak yazalım.
vücut {background-image: url ("../ img / ep_naturalwhite.png"); }
Gördüğümüz gibi, her şey gösterildi ve sonra stillerin açıklamasına geçeceğiz.
Öncelikle, farklı tarayıcıların varsayılan olarak ayarlayabileceği tüm girintileri sıfırlayalım:
.dws-menu * {marj: 0; dolgu maddesi: 0; }
Üstbilgiyi 200 tepe noktasına ayarlayın. ve ek yazı tipleri yazabilmeniz için siteden kendinize indirebileceğiniz ve kendinize ayrı ayrı bağlanabileceğinizi belirleyin.
başlık {marj: 200px; font ailesi: Cuprum, Arial, Helvetica, sans-serif; }
Listelerdeki işaretleri gizle:
.dws-menü ul, .dws-menü ol {list-style: none; }
Listeler yatay olarak gösterilecek: keten, ve bunu merkezde yapacağız:
.dws-menu> ul {ekran: esnek; haklı içerik: merkez; }
Başlıkta sadece tepeye gireriz, kenar boşluğu yazacağız.
başlık { margin-top: 200px; font ailesi: Cuprum, Arial, Helvetica, sans-serif; }
Menümüzü tasarlayalım, düğmelerin rengini, yazı tipini vs. ayarlayalım.
Nav> ul li linklerini seçin ve onları blok elemanlarına dönüştürün. Menü arka planını ayarlayın, girintileri yazın, boyutunu, rengini belirtin, alt çizgiyi kaldırın ve başlıkları büyük harflerle yapın.
.dws-menu> ul li a {görüntüleme: blok; arkaplan: #ececed; dolgu maddesi: 15px 30px 15px 40px; yazı tipi boyutu: 14 piksel; renk: # 454547; metin dekorasyon: yok; metin dönüşümü: büyük harf; }
Sonra simgeleri konumlandırın, listeleri konumlarına atayın: göreceli; Simgelerin daha fazla hizalanması için:
.dws-menu> ul li {position: relatif; }
Daha sonra, ikonları seçiyoruz, kesinlikle konumlandırıyoruz, yukarıdan 15 zirveye girinti yapıyoruz, soldaki 12 zirveden, boyutu 18 zirveye çıkarıyoruz.
.dws-menu> ul li> bir i.fa {position: absolute; üst: 15px; sol: 12 piksel; yazı tipi boyutu: 18 piksel; }
Ayırıcıyı listeler için kenarlık olarak atayın, ilk LI öğesini seçin, kenarlığı ayarlayın. Son elementi LI seçeriz ve ona benzer bir sınır atarız.
.dws-menu> ul li: ilk çocuk {kenar-sol: 1px katı # b2b3b5; } .dws-menu> ul li: son çocuk {kenar-sağ: 1px katı #babbbd; }
LI listeleri için sınırlayıcılar oluşturmak:
.dws-menu> ul li {position: relatif; sınır-sağ: 1 piksel katı # c7c8ca; }
Menü görünümü edindi, sonra durma sırasında stillerin açıklamasına geçebilirsiniz.
İşaret ederken yatay menüyü canlandırıyoruz.
Bağlantıları seçin ve bloğa bir renk atayın ve bağlantının rengini simgeyle beyaza atayın. Başka bir karanlık gölge ekleyelim. 0,3 saniyede geçiş sayesinde yumuşak bir görünüm elde edeceğiz:
.dws-menu li a: vurgulu {background: # 454547; renk: #ffffff; kutu gölge: 1px 5px 10px -5px siyah; geçiş: tüm 0.3s kolaylığı; }
Ve bu efekti sorunsuz bir şekilde yok etmek için, bu stili kolayca bağlantıya ekle:
.dws-menu> ul li a {görüntüleme: blok; arkaplan: #ececed; dolgu maddesi: 15px 30px 15px 40px; yazı tipi boyutu: 14 piksel; renk: # 454547; metin dekorasyon: yok; metin dönüşümü: büyük harf; geçiş: tüm 0.3s kolaylığı; }
Ana menü bitti ve alt menü ile içlerinde bulunan alt menülerin açıklamasına geçebilirsiniz.
CSS / HTML açılır menüsünü tanımlayın
Hakkında index.html dosyasını açar ve ürünlere ek bir menü ekleriz. UL'yi LI listeleri arasına yerleştirin ve içine herf = ”#” özelliğine sahip bağlantılar içerecek beş liste yerleştirin.
ul> li * 5> a [href = "#"]
Uygulamak için basın, öğelerin adını yazın ( Giyim, Elektronik, Yiyecek, Araçlar, Yaşam. Kimya ).
<ul> <li> <a href="#"> Giysiler </a> </ li> <li> <a href="#"> Elektronikler </a> </ li> <li> <a href = "#"> Yiyecekler </a> </ li> <li> <a href="#"> Araçlar </a> </ li> <li> <a href="#"> Yaşam. kimya </a> </ li> </ ul>
Sonra style.css dosyasını açın ve alt menü stillerini tanımlayın.
İkinci listeyi seçip, pozisyona atadık: absolute; , minimum genişliği 150 tepe olarak ayarlayalım.
/ * alt menü * / .dws-menü li ul {position: absolute; min-genişlik: 150 piksel; }
Sınır listelerine 1 tepe noktaya yazalım.
.dws-menu li> ul li {kenarlık: 1px katı # c7c8ca; }
Alt menüdeki bağlantılar için, 10 tepe noktasında girintiler belirleyeceğiz., Metin dönüşümünü kaldırın ve arka planı birkaç ton daha koyu hale getirin: # e4e4e5; .
.dws-menu li> ul li a {padding: 10px; metin dönüşümü: yok; arkaplan: # e4e4e5; }
Ardından başka bir alt menü oluşturun. İşaretleme dosyasına gidin ve örneğin daha önce yaptığımız gibi analog menüden "Elektronik" formunda. Öğelerin başlıklarını ( Kameralar, Bilgisayarlar, Telefonlar ) tanımlar ve tasarruf ederiz.
<li> <a href="#"> Elektronikler </a> <ul> <li> <a href="#"> Kameralar </a> </ li> <li> <a href="#"> Bilgisayarlar </a> </ li> <li> <a href="#"> Telefonlar </a> </ li> </ ul> </ li>
Dışarı çıkarıldılar, ancak ana menü altında gizlendiler; şimdi pozisyon: mutlak; iç içe UL ve 150 zirveye taşıyın. tarafına:
.dws-menu li> ul li ul {konum: mutlak; sağ: -150 piksel; üst: 0; }
Daha sonra, üst menünün ana öğelerini hedeflerken alt menünün görünmesini sağlayacağız, bunun için ekran ekledik: none; ve böylece tüm iç noktaları gizler.
/ * alt menü * / .dws-menü li ul {position: absolute; min-genişlik: 150 piksel; ekran: yok; }
Ve görünüşleri için, vurgulu listelerini seçeceğiz ve onları ekran yardımı ile göstereceğiz: blok; .
.dws-menu li: vurgulu> ul {ekran: blok; }
Artık, UL bloğunu kopyalayarak, öğelerini değiştirerek çok seviyeli menüler ekleyebilirsiniz.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Ana Sayfa </a> </ li> <li> <a href="#"> < i class = "fa fa-alışveriş sepeti"> </ i> Ürünler </a> <ul> <li> <a href="#"> Giyim </a> <ul> <li> <a href = "#"> Ayakkabılar </a> </ li> <li> <a href="#"> Ceketler </a> </ li> <li> <a href="#"> Pantolonlar </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronikler </a> <ul> <li> <a href="#"> Fotoğraf Makineleri </a> </ li> <li> <a href="#"> Bilgisayarlar </a> </ li> <li> <a href="#"> Telefonlar </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Elma </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Yiyecekler </a> </ li> <li> <a href="#"> Araçlar </ h a> </ li> <li> <a href="#"> Gen. kimya </a> </ li> </ ul> </ li> <li> <a href="#"> <i sınıfı = "fa-faj" "> </ i> Hizmetler </a> <ul > <li> <a href="#"> Hizmet 1 </a> </ li> <li> <a href="#"> Hizmet 2 </a> </ li> <li> <a href = "#"> Hizmet 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-list"> </ i> Haberler </a> </ li> <li> <a href="#"> <i class = "fa-zarf açık"> </ i> Kişiler </a> </ li> </ ul>
Öyleyse düğmeleri düğmelerle bitirelim. Ben kullandım, birkaç Önayar oluşturdum, kendi kodunu kendin oluşturabilirsin, benim durumumda, sadece bu kodu kopyalayıp daha önce yazdığım arkaplan yerine yerleştiririm.
.dws-menu> ul li a {görüntüleme: blok; / * Permalink - bu gradyan: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100; Özel + 3 * / arkaplan: # c9c9c9 ; / * Eski tarayıcılar * / arka plan: -moz-doğrusal-gradyan (üst, # c9c9c9% 0, # f6f6f6% 2, # c4c5c7% 98, # 757577%); / * FF3.6-15 * / arkaplan: -webkit-linear-gradient (üst, # c9c9c9% 0, # f6f6f6% 2, # c4c5c7% 98, # 757577% 100); / * Chrome10-25, Safari5.1-6 * / arka plan: doğrusal gradyan (en 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 maddesi: 15px 30px 15px 40px; yazı tipi boyutu: 14 piksel; renk: # 454547; metin dekorasyon: yok; metin dönüşümü: büyük harf; geçiş: tüm 0.3s kolaylığı; } .dws-menu li a: vurgulu {/ * Permalink - bu gradyan: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / arkaplan: # e0e1e5; / * Eski tarayıcılar * / arka plan: -moz-doğrusal-gradyan (üst, # e0e1e5% 0, # 454547% 2, # 454547% 98, # e0e1e5% 100); / * FF3.6-15 * / arkaplan: -webkit-linear-gradient (üst, # e0e1e5% 0, # 454547% 2, # 454547% 98, # e0e1e5% 100); / * Chrome10-25, Safari5.1-6 * / arka plan: doğrusal gradyan (en 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 * / color: #ffffff; kutu gölge: 1px 5px 10px -5px siyah; geçiş: tüm 0.3s kolaylığı; }
Arzu ederseniz, bu menü sitede sizin için uygun olan stil için tasarlanabilir, sadece bir renk üretmek ve onu kodda değiştirmek yeterlidir. Basit ve aynı zamanda saf CSS ile yapılan güzel bir yatay menü ortaya çıktı.