Html'de gezinme çubuğu nasıl yapılır. СSS Gezinme çubuğu

yatay menü site bölümlerinin bir listesidir, bu nedenle öğenin içinde işaretlemek daha mantıklıdır

ve ardından öğelerine CSS stilleri uygulayın. Menünün bu düzenlemesi, bir web sayfasında konumlandırılmasının bariz avantajlarından dolayı en yaygın olanıdır.

Yatay menü nasıl yapılır: işaretleme ve tasarım örnekleri

Yatay bir menü için HTML işaretlemesi ve temel stiller

Varsayılan olarak, tüm liste öğeleri dikey olarak, genişlik olarak konteyner elemanının tüm genişliğini kaplar, bu da konteyner bloğunun tüm genişliğini kaplar.

Yatay gezinme için HTML işaretlemesi

• Menü seçeneği
• Menü seçeneği
• Menü seçeneği
...

Bir etiketin içindeki yatay bir menü, isteğe bağlı olarak bir öğenin içine yerleştirilebilir

ve / veya
...
... Bu sayede, html işaretlemesine anlamsal bir anlam verilir ve ayrıca menü bloğunu biçimlendirmek için ek bir fırsat vardır.

Bunları yerleştirmenin birkaç yolu vardır. yatay olarak... İlk olarak, gezinme öğeleri için varsayılan tarayıcı stillerini sıfırlamanız gerekir:

Ul (liste stili: yok; / * liste işaretçilerini kaldır * / kenar boşluğu: 0; / * 1em'ye eşit üst ve alt kenar boşluğunu kaldır * / padding-left: 0; / * 40 piksele eşit sol kenar boşluğunu kaldır * /) a ( text-decoration: none; / * bağlantı metninin altını kaldır * /)

Yöntem 1.li (ekran: satır içi;)

Liste öğelerini küçük harf yaparız. Sonuç olarak, yatay olarak yerleştirilirler, aralarına 0,4em'e eşit bir boşluk eklenir (yazı tipi boyutuna göre hesaplanır). Kaldırmak için, li için negatif bir sağ kenar boşluğu li (sağ kenar boşluğu: -4px;) ekleyin. Ardından, bağlantıları istediğimiz gibi şekillendireceğiz.

Yöntem 2.li (kayan: sol;)

Liste öğelerini yüzer. Sonuç olarak, yatay olarak konumlandırılırlar. Konteyner bloğunun yüksekliği ul sıfır olur. Bu sorunu çözmek için, ul'ye (overflow: hidden;) ekleyerek onu genişletir ve böylece yüzen öğeler içermesine izin veririz. Bağlantılar için bir (ekran: blok;) ekleyin ve istediğiniz gibi biçimlendirin.

Yöntem 3.li (ekran: satır içi blok;)

Listenin öğelerini satır içi blok yapıyoruz. Yatay olarak yerleştirilirler, ilk durumda olduğu gibi sağ tarafta bir boşluk oluşur. Bağlantılar için bir (ekran: blok;) ekleyin ve istediğiniz gibi biçimlendirin.

Yöntem 4.ul (ekran: esnek;)

Bir model kullanarak ul'yi esnek bir kap yapmak. Sonuç olarak, listenin öğeleri yatay olarak düzenlenmiştir. Bağlantılar için bir (ekran: blok;) ekleyin ve istediğiniz gibi biçimlendirin.

1. Bir bağlantının üzerine gelindiğinde altı çizili efektli duyarlı menü

• Çalışmak
• Hakkında
• Blog
• Temas
@import url ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (liste stili: yok; kenar boşluğu: 40px 0 5px; dolgu: 25px 0 5px; metin hizalama: merkez; arka plan: beyaz;) .menu-main li (ekran: satır içi blok;) .menu- ana li: after (içerik: "|"; renk: # 606060; görüntü: satır içi blok; dikey hizalama: üst;) .menu-main li: son çocuk: sonra (içerik: yok;) .menu-main a (metin dekorasyonu: yok; yazı tipi ailesi: "Ubuntu Yoğun", sans-serif; harf aralığı: 2 piksel; konum: göreli; alt dolgu: 20 piksel; kenar boşluğu: 0 34 piksel 0 30 piksel; yazı tipi boyutu: 17 piksel; metin dönüşümü: büyük harf; görüntü: satır içi blok; geçiş: renkli .2s;) .menu-main a, .menu-ana a: ziyaret edildi (renk: # 9d999d;) .menu-ana a.akım, .menu- ana a: üzerine gelin (renk: # feb386;) .menu-main a: önce, .menu-main a: sonra (içerik: ""; konum: mutlak; yükseklik: 4 piksel; üst: otomatik; sağ: %50; alt : -5px; sol: %50; arka plan: # feb386; geçiş: .8s;) .menu-ana a: üzerine gelin: önce, .menu-ana .akım: önce (sol: 0;) .menu-ana a: üzerine gelin: sonra, .menu-main .current: sonra (sağ: 0; ) @media (max-width: 550px) (.menu-main (dolgu-top: 0;) .menu-main li (ekran: blok;) .menu-main li: after (içerik: yok;) .menu- ana a (dolgu: 25px 0 20px; kenar boşluğu: 0 30 piksel; ))

2. Bir düğün sitesi için duyarlı menü

@import url ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menü (konum: göreceli; arka plan: #fff; kutu-gölge: iç metin 0 0 10px #ccc;) .top-menü: önce, .top-menü: sonra (içerik: ""; ekran: blok; yükseklik : 1 piksel; kenarlık-üst: 3 piksel katı # 575350; kenarlık-alt: 1 piksel katı # 575350; kenar-alt: 2 piksel;) .üst-menü: sonra (kenarlık-alt: 3 piksel katı # 575350; kenar-üst: düz 1 piksel # 575350; kutu gölgesi: 0 2px 7px #ccc; üst kenar boşluğu: 2 piksel;) .menu-ana (liste stili: yok; dolgu: 0 30 piksel; kenar boşluğu: 0; yazı tipi boyutu: 18 piksel; metin hizalama: merkez; konum: göreli;) .menu-main: önce, .menu-ana: sonra (içerik: "\ 25C8"; satır yüksekliği: 1; konum: mutlak; üst: %50; dönüştürme: çeviriY (-50%) );) .menu-main: önce (sol: 15px;) .menu-main: after (sağ: 15px;) .menu-main li (ekran: satır içi blok; dolgu: 5px 0;) .menu-main a (metin dekorasyonu: yok; görüntü: satır içi blok; kenar boşluğu: 2 piksel 5 piksel; dolgu: 6 piksel 15 piksel; yazı tipi ailesi: "PT Sans", sans-serif; yazı tipi boyutu: 16 piksel; renk: # 777777; kenarlık alt : 1px katı şeffaf; geçiş n: .3s doğrusal; ) .menu-main .current, .menu-main a: vurgulu (sınır yarıçapı: 3 piksel; arka plan: # f3ece1; renk: # 313131; metin gölgesi: 0 1 piksel 0 #fff; kenarlık rengi: # c6c6c6;) @media (maksimum genişlik: 500 piksel) (.menu-main li (ekran: blok;))

3. Deniz taraklı uyarlanabilir menü

• Çalışmak
• Hakkında
• Blog
• Temas
@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (liste stili: yok; dolgu: 0 30 piksel; kenar boşluğu: 0; yazı tipi boyutu: 18 piksel; metin hizalama: merkez; konum: göreceli; arka plan: beyaz;) .menu-ana: sonra (içerik: ""; konum: mutlak; genişlik: %100; yükseklik: 20 piksel; sol: 0; alt: -20 piksel; arka plan: radyal-gradyan (beyaz %0, beyaz %70, rgba (255,255,255,0) %70, rgba ( 255,255,255,0) %100) 0 -10px; arka plan boyutu: 20px 20px; arka plan-tekrar: tekrar-x;) .menu-main li (ekran: satır içi blok;) .menu-main a (metin-dekorasyon: yok; görüntü: satır içi blok; kenar boşluğu: 0 15 piksel; dolgu: 10 piksel 30 piksel; yazı tipi ailesi: "PT Sans Caption", sans-serif; renk: # 777777; geçiş: .3s doğrusal; konum: göreli;) .menu -main a: önce, .menu-main a: after (içerik: ""; konum: mutlak; üst: hesap (%50 - 3 piksel); genişlik: 6 piksel; yükseklik: 6 piksel; kenarlık yarıçapı: %50; arka plan: # F58262; opaklık: 0; geçiş: .5s kolay giriş-çıkış;) .menu-main a: önce (sol: 5 piksel;) .menu-ana a: sonra (sağ: 5 piksel;) .menu-ana a. akım: önce, .menu-main a.cur kira: after, .menu-main a: vurgulu: önce, .menu-ana a: vurgulu: sonra (opaklık: 1;) .menu-ana a.akım, .menu-ana a: vurgulu (renk: # F58262; ) @media (maksimum genişlik: 680 piksel) (.menu-main li (ekran: blok;))

4. Şeritte duyarlı menü

@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menü (kenar boşluğu: 0 60px; konum: göreli; arka plan: # 5A394E; kutu gölgesi: iç metin 1px 0 0 rgba (255.255.255, .1), iç metin -1px 0 0 rgba (255.255.255, .1), iç metin 150px 0 150px -150px rgba (255.255.255, .12), iç metin -150px 0 150px -150px rgba (255.255.255, .12);) .top-menü: önce, .top-menu: sonra (içerik: ""; konum: mutlak ; z-endeksi: 2; sol: 0; genişlik: %100; yükseklik: 3 piksel;) .üst menü: önce (üst: 0; kenarlık-alt: 1 piksel kesikli rgba (255,255,255, .2);) .top- menu: after (alt: 0; kenar-üst: 1px kesikli rgba (255,255,255, .2);) .menu-main (liste stili: yok; dolgu: 0; kenar boşluğu: 0; metin hizalama: merkez;). menü-ana: önce, .menu-ana: sonra (içerik: ""; konum: mutlak; genişlik: 50 piksel; yükseklik: 0; üst: 8 piksel; kenarlık-üst: 18 piksel katı # 5A394E; kenarlık-alt: 18 piksel katı # 5A394E; dönüştürme: döndürme (360 derece); z-endeksi: -1;) .menu-ana: önce (sol: -30 piksel; kenar-sol: 12 piksel katı rgba (255, 255, 255, 0);) .menu- ana: sonra (sağ: -30 piksel; kenar-sağ: 12 piksel katı rgba (2 55, 255, 255, 0); ) .menu-main li (görüntüleme: satır içi blok; kenar-sağ: -4px;) .menu-main a (metin-dekorasyon: yok; ekran: satır içi blok; dolgu: 15px 30px; yazı tipi ailesi: "PT Sans Caption ", sans-serif; renk: beyaz; geçiş: .3s lineer;) .menu-main a.current, .menu-main a: vurgulu (arka plan: rgba (0,0,0, .2);) @media (maks-genişlik: 680px) (.top-menu (kenar boşluğu: 0;) .menu-main li (ekran: blok; kenar boşluğu: 0;) .menu-ana: önce, .menu-ana: sonra (içerik: yok;) .menu-main a (ekran: blok;))

5. Ortasında bir logo bulunan duyarlı menü

@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (konum: göreceli; arka plan: rgba (34,34,34, .2);) .menu-main (liste stili: yok; kenar boşluğu: 0; dolgu: 0;) .menu-ana: sonra (içerik: ""; ekran: tablo; temizle: her ikisi;) .left-item (kayan: sol;) .right-item (kayan: sağ;) .navbar-logo (konum: mutlak; sol: %50; üst : %50; dönüştürme: çevir (-50%, - %50);) .menu-main a (metin-dekorasyon: yok; görüntü: blok; satır yüksekliği: 80 piksel; dolgu: 0 20 piksel; yazı tipi boyutu: 18 piksel ; harf aralığı: 2 piksel; yazı tipi ailesi: "Arimo", sans-serif; yazı tipi ağırlığı: kalın; renk: beyaz; geçiş: .3s doğrusal;) .menu-main a: vurgulu (arka plan: rgba (0, 0,0, .3);) @media (maks. genişlik: 830 piksel) (.menu-ana (üst dolgu: 90 piksel; metin hizalama: merkez;) .navbar-logo (konum: mutlak; sol: %50 ; üst: 10px; transform: translateX (-50%);) .menu-main li (kayan nokta: yok; görüntü: satır içi blok;) .menu-main a (satır yüksekliği: normal; dolgu: 20 piksel 15 piksel; yazı tipi -size: 16px;)) @media (maksimum genişlik: 630px) (.menu-main li (ekran: blok;))

6. Solda logolu duyarlı menü

@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menü (arka plan: rgba (255,255,255, .5); kutu gölgesi: 3px 0 7px rgba (0,0,0, .3); dolgu: 20px;) .top-menu: after (içerik: "" ; görüntüleme: tablo; temizle: her ikisi;) .navbar-logo (görüntüleme: satır içi blok;) .menu-main (liste stili: yok; kenar boşluğu: 0; dolgu: 0; kayan nokta: sağ;) .menu-ana li (görüntüleme: satır içi blok;) .menu-main a (metin süslemesi: yok; görüntü: blok; konum: göreceli; satır yüksekliği: 61 piksel; sol doldurma: 20 piksel; yazı tipi boyutu: 18 piksel; harf aralığı : 2 piksel; yazı tipi ailesi: "Arimo", sans-serif; yazı tipi ağırlığı: kalın; renk: # F73E24; geçiş: .3s doğrusal;) .menu-main a: önce (içerik: ""; genişlik: 9 piksel; yükseklik: 9 piksel; arka plan: # F73E24; konum: mutlak; sol: %50; dönüştürme: döndürme (45 derece) çeviriX (6,5 piksel); opaklık: 0; geçiş: .3s doğrusal;) .menu-ana a: vurgulu: önce (opaklık: 1;) @media (maks-genişlik: 660px) (.menu-main (kayan: yok; dolgu-üst: 20px;) .top-menu (metin hizalama: merkez; dolgu: 20px 0 0 0; ) .menu-main a (dolgu: 0 10px;) .menu-main a: be fore (dönüştürme: döndürme (45deg) translateX (-6px);)) @media (max-width: 600px) (.menu-main li (ekran: blok;))

Sitede rahat gezinmek için HTML ve CSS scriptlerini kullanarak yaptığım navigasyona ihtiyacınız var. Yaptığım çalışmalar sonucunda 2 çeşit menü (dikey ve yatay) görebilirsiniz. Ve şimdi, bana göründüğü gibi, site menüsünün gerçekleştirmesi gereken görevleri size anlatmaya çalışacağım:

• Kullanım kolaylığı;
• Sitenin tüm bölümlerinde gezinme oluşturulmalıdır;
• Sitenin her sayfasının ana sayfaya çıkışı olmalıdır;
• En fazla 3 tıklama ile sitenin herhangi bir sayfasına gidin.

Burada menü oluşturmayla ilgili materyalleri olabildiğince özetlemeye çalışacağım, hazır olun, birçoğunun zorlukları olabilir, en azından benim için ortaya çıktılar. Öyleyse başlayalım!

Öncelikle nasıl yapacağınızı anlatacağım. İlk olarak, betiği stil sayfasına yazıyoruz:

#navigasyon (genişlik: 560 piksel; yükseklik: 50 piksel; kenar boşluğu: 0; dolgu: 0; arka plan görüntüsü: url (img / gor_menu.jpg); arka plan tekrarı: tekrar yok; arka plan konumu: merkez;) #navigasyon ul (liste stili: yok; kenar boşluğu: 0; dolgu: 0;) #navigasyon ul li (ekran: satır içi; kenar boşluğu: 0px;) #navigation ul li a (yükseklik: 28px; ekran: blok; kayan nokta: sol; renk: # 333333; metin dekorasyonu: yok; yazı tipi ailesi: Arial; yazı tipi boyutu: 12 piksel; yazı tipi ağırlığı: kalın; arka plan resmi: url (img / menu_separatorline.jpg); arka plan tekrarı: tekrar yok; arka plan- konum: sağ merkez; dolgu üst: 17 piksel; sağ dolgu: 15 piksel; alt dolgu: 0; sol dolgu: 15 piksel;) #navigasyon ul li a: vurgulu (renk: #FFF; arka plan resmi: url (img) /button_hover.jpg); arka plan tekrarı: tekrar-x; arka plan pozisyonu: sol üst;) #navigasyon ul li # aktif a (arka plan resmi: url (img / button_hover.jpg); arka plan tekrarı: tekrar-x ; arka plan konumu: sol üst;)

Endişelenme, bu kodda yanlış bir şey yok. Sizin için daha açık hale getirmek için hemen bu menünün HTML kodunu yazacağım:

• ev
• site hakkında
• Neden bir web sitesine ihtiyacınız var?
• yazardan
• Kişiler
• Forum

Gördüğünüz gibi, stil sayfası olmadan iyi bir şey olmayan bir listeyle uğraşıyoruz. Div operatörü, harici bir CSS stil sayfasından değişkenleri çağırır, ardından listemiz dönüştürülür ve bence güzel bir yatay menüye dönüşür.

• Tanıtım
• Web sitesi iskeleti oluşturma
• Web sitesi menüsü oluşturma
• Site doldurma
• PHP Bloklarını Kullanma
• Veritabanı oluşturma
• Barındırma seçimi
• Siteyi barındırmaya aktar

Şimdi neyin neyi ifade ettiğini biraz açıklığa kavuşturmanız gerekiyor, o zaman sanırım kendiniz çözeceksiniz:

...
- tüm menü yapısını içerir. Photoshop'ta önceden hazırladığım en üstteki resim içine eklenecek;



...
- menünün gövdesi, sırasız bir liste içerir. İçine dikey olarak tekrarlanacak ve bir arka plan oluşturacak bir görüntü eklenecektir. Belki çok parlak renkler seçtim ama bence göze zarar vermiyorlar;

- menünün iskeletini içerir;

• Web sitesi menüsü oluşturma
- bu, gerekli bağlantıyı bir href = "#" içine eklemeniz gereken konumlardan biridir;
- alt kısmı içerir.

Ve bu aslında CSS stil sayfamızdaki komut dosyasıdır:

Div # menu (genişlik: 144px; arkaplan: url (img / menu_1.jpg) tekrarsız üst; dolgu-üst: 40px;) div # menubody (arka plan: url (img / menu_2.jpg) tekrar-y; dolgu- sol: 15 piksel;) div # menubottom (yükseklik: 16 piksel; arka plan: url (img / menu_4.jpg) alt tekrarsız;) ul # menulist (genişlik: 100 piksel; liste stili-türü: yok;) ul # menulist li (yükseklik: 32 piksel; arka plan: url (img / menu_3.gif) alt tekrar-x;) ul # menulist a (genişlik: 100 piksel; yükseklik: 25 piksel; kenarlık-sol: # 75c5de 10 piksel katı; yazı tipi: kalın 10 piksel Verdana, Arial , sans-serif; renk: #ffffff; metin dekorasyonu: yok; dolgu: 5px 0 0 5px; görüntü: blok! önemli; görüntü: satır içi blok;) ul # menulist a: vurgulu (arka plan: url (img / menu_5) .jpg) sol tekrar-y; renk: # 000) ul # menulist #aktif a (arka plan: url (img / menu_5.jpg) sol tekrar-y;)

CSS kodunu açıklamanız gerektiğini düşünmüyorum. Bir şey net değilse, her zaman sorabilirsiniz.

Her iki menü türü de hazır. Bunlarda JavaScript kullanmadığımızı ve sitemizi arama motorları tarafından dizine eklerken bunun bir "artı" olduğunu ve arama motorları JavaScript'i dizine eklemediği için kesinlikle bir "eksi" olmadığını unutmayın. Şu anda Google arama motoru zaten onu tanımaya başlıyor olsa da.

Sitede ikiden fazla menü olduğunu ve bunların farklı bir yapıya sahip olduğunu muhtemelen uzun zaman önce fark etmişsinizdir. Makale, önceki gibi, düzenlemedim.

Geriye sitemizin sayfalarını içerikle doldurmak kalıyor ve işin yarısının yapıldığını rahatlıkla söyleyebiliriz ancak bunu size bir sonraki yazıda anlatacağım.

Bu derste, sözde öğeler kullanarak geçişli bir menünün nasıl oluşturulacağı hakkında konuşacağız. : önceki ve : sonrasında.

Bir menü örneği burada görülebilir:

İndirmek

Ne yazık ki, yalnızca Mozilla sözde öğe geçişlerini destekler.

HTML bölümü

Menü yapısı normaldir - madde işaretli bir liste ve her liste öğesinin bir sınıfı vardır Etkileri:

1 2 3 4 5 6 7

<ul> <li sınıfı = "efektler"> EV</ bir> <li sınıfı = "efektler"> YAZAR HAKKINDA</ bir> <li sınıfı = "efektler"> PORTFÖY</ bir> <li sınıfı = "efektler"> BLOG</ bir> <li sınıfı = "efektler"> İLETİŞİM</ bir> </ ul>

CSS bölümü

Öncelikle bu listeden yatay bir menü yapalım:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ul (liste stili: yok; üst dolgu: 50 piksel;) li (konum: göreli; kayan nokta: sol; genişlik: 150 piksel; metin hizalama: merkez; dolgu üst: 35 piksel; alt dolgu: 35 piksel; renk: # fff; sağ kenar boşluğu: 20 piksel; kenarlık yarıçapı: 5 piksel; arka plan: # 161616; kenarlık-alt: 1 piksel kesintisiz # 333; sol kenarlık: 1 piksel kesintisiz # 000; sağ kenar: 1 piksel kesintisiz # 333; kenarlık üst: 1px katı # 000; imleç: işaretçi;)

Şimdi bazı efektler ekleyelim:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.effects: after, .effects: önce (-moz-transition: genişlik 0,5s hareket hızı 0s; yükseklik: 0px; genişlik: 0px; konum: mutlak; içerik: ""; görüntü: blok; opaklık: 0; kutu gölgesi: 0px 0px 5px # 00c6ff;) .effects: after (arka plan: -moz-linear-gradient (sol, # 0ad, # 08b); üst: 84px; sol: 75px;) .effects: önce (arka plan: -moz-linear -gradient (sağ, # 0ad, # 08b); üst: 84 piksel; sağ: 75 piksel;) .effects: vurgulu: sonra, .effects: vurgulu: önce (genişlik: 72 piksel; yükseklik: 1 piksel; opaklık: 1;)

Çözüm

Ders küçük çıktı ama çok güzel bir menü oluşturduk. Tek dezavantajı, geçişlerin yalnızca Mozilla tarayıcısında düzgün çalışmasıdır.

yatay

Gezinme Çubukları

Kullanımı kolay bir navigasyona sahip olmak, herhangi bir web sitesi için çok önemlidir.

CSS ile sıkıcı HTML menülerini sevimli gezinme çubuklarına dönüştürebilirsiniz.

Gezinme çubuğu = Bağlantıların listesi

Gezinme çubuğu, temel olarak standart HTML'ye ihtiyaç duyar.

Örneklerimizde standart bir HTML listesinden bir gezinme çubuğu oluşturacağız.

Gezinme çubuğu temel olarak bir bağlantı listesidir, bu nedenle

ve
• elemanlar mantıklı:

  örnek

  
  
  • Ev
  
  
  • Haberler
  
  
  • Temas
  
  
  • Hakkında
  
  
  Kendin dene "

  Şimdi madde işaretlerini, kenar boşluklarını ve dolguyu listeden çıkaralım:

  Örneğin açıklaması:

  • liste stili türü: yok; - Mermileri kaldırır. Gezinme çubuğunun madde işareti listesine ihtiyacı yoktur
  • Kenar boşluğunu ayarla: 0; ve dolgu: 0; varsayılan tarayıcı ayarlarını kaldırmak için

  Yukarıdaki örnekteki kod, hem dikey hem de yatay gezinme çubuklarında kullanılan standart koddur.

  Dikey gezinme çubuğu

  Dikey bir gezinme çubuğu oluşturmak için yukarıdaki koda ek olarak listenin içindeki öğeler:

  Örneğin açıklaması:

  • Ekran bloğu; - Bağlantıları bir öğe bloğu olarak görüntülemek, tüm bağlantı alanını tıklanabilir hale getirir (sadece metni değil) ve bu, genişliği (ve isterseniz dolgu, kenar boşluğu, yükseklik vb.) belirlememize olanak tanır.
  • genişlik: 60 piksel; - blok öğeler, varsayılan olarak tüm kullanılabilir genişliği kaplar. Genişliği 60 piksele ayarlamak istiyoruz

  Genişliği de ayarlayabilirsiniz

  ve genişliği kaldır blok öğeleri olarak görüntülendiklerinde mevcut genişliğin tamamını kaplayacaklarından. Bu, önceki örnektekiyle aynı sonucu verecektir:

  Dikey Gezinti Çubuğu Örnekleri

  Gri arka plan rengine sahip temel bir dikey gezinme çubuğu oluşturun ve kullanıcı fare imlecini bunların üzerine getirdiğinde bağlantıların arka plan rengini değiştirin:

  örnek

  Ul (
  liste stili türü: yok;
  kenar boşluğu: 0;
  dolgu: 0;
  genişlik: 200 piksel;
  arka plan rengi: # f1f1f1;
  }

  li bir (
  Ekran bloğu;
  renk: # 000;
  dolgu: 8px 0 8px 16px;
  metin-dekorasyon: yok;
  }

  / * Fareyle üzerine gelindiğinde bağlantı rengini değiştirin * /
  li a: üzerine gelin (
  arka plan rengi: # 555;
  Beyaz renk;
  }

  Kendin dene "

  Bağlantıları Ortala ve Kenarlık Ekle

  Metin hizalama ekle: orta

  • veya bağlantının ortasına.

    kenarlık özelliğini ekleyin

    gezinme çubuğunun etrafına bir kenarlık ekleyin. Ayrıca gezinme çubuğunun içinde kenarlıklar istiyorsanız, tümü için border-bottom ekleyin
    • sonuncusu hariç öğeler:

      Tam Boy Dondurma Dikey Gezinme Çubuğu

      Tam yükseklikte, "yapışkan" yan gezinme oluşturun:

      örnek

      Ul (
      liste stili türü: yok;
      kenar boşluğu: 0;
      dolgu: 0;
      genişlik: %25;
      arka plan rengi: # f1f1f1;
      yükseklik: %100; / * Tam yükseklik * /
      pozisyon: sabit; / * Kaydırmada bile yapışmasını sağlayın * /
      taşma: otomatik; / * Sidenav'da çok fazla içerik varsa kaydırmayı etkinleştir * /
      }

      Kendin dene "

      Not: Bu örnek, mobil cihazlarda beklendiği gibi çalışmayabilir.

      Yatay gezinme çubuğu

      Yatay gezinme çubuğu oluşturmanın iki yolu vardır. kullanım gömülü veya yüzeröğeleri listeleyin.

      Satır içi liste öğeleri

      belirtmek için yatay bir gezinme çubuğu oluşturmanın bir yolu

    • yukarıdaki "standart" koda ek olarak satır içi olarak öğeler:

      Örneğin açıklaması:

      • ekran: satır içi; - Varsayılan
      • elemanlar blok elemanlardır. Burada, bunları tek bir satırda görüntülemek için her liste öğesinden önceki ve sonraki satır sonlarını kaldırıyoruz.

      Kayan liste öğeleri

      Üzerinde yüzecek yatay bir gezinme çubuğu oluşturmanın başka bir yolu

    • öğeleri ve ayrıca gezinme bağlantılarının düzenini belirtin:

      Örneğin açıklaması:

      • yüzer: sol; - bir öğe bloğunun yan yana kaymasını sağlamak için kayan nokta kullanma
      • Ekran bloğu; - Bağlantıları bir öğe bloğu olarak görüntülemek, tüm bağlantı alanını tıklanabilir hale getirir (yalnızca metni değil) ve bu, dolguyu (ve isterseniz yükseklik, genişlik, kenar boşlukları vb.) belirlememize olanak tanır.
      • dolgu: 8 piksel; - Blok elemanlar mevcut genişliğin tamamını kapladığından yan yana yüzemezler. Bu nedenle, iyi görünmelerini sağlamak için bazı eklemeler belirtin.
      • arka plan rengi: #dddddd; - her eleman için gri arka plan rengi ekleyin

      Tavsiye: için arka plan rengi ekleyin

      her biri yerine tam genişlikte arka plan rengi istiyorsanız öğe:

      Yatay Gezinti Çubuğu Örnekleri

      Koyu arka plan rengine sahip temel bir yatay gezinme çubuğu oluşturun ve kullanıcı fareyi üzerlerine getirdiğinde bağlantıların arka plan rengini değiştirin:

      örnek

      Ul (
      liste stili türü: yok;
      kenar boşluğu: 0;
      dolgu: 0;
      taşma: gizli;
      arka plan rengi: # 333;
      }

      li (
      yüzer: sol;
      }

      li bir (
      Ekran bloğu;
      Beyaz renk;
      metin hizalama: merkez;
      dolgu: 14 piksel 16 piksel;
      metin-dekorasyon: yok;
      }

      / * Fareyle üzerine gelindiğinde bağlantı rengini # 111 (siyah) olarak değiştirin * /
      li a: üzerine gelin (
      arka plan rengi: # 111;
      }

      Kendin dene "

      Aktif / Mevcut navigasyon Bağlantısı

      Kullanıcının hangi sayfada olduğunu bilmesi için mevcut bağlantıya "aktif" bir sınıf ekleyin:

      Bağlantının Hizala öğesine sağ tıklayın

      Bu eğitimde, sadece CSS3 kullanarak bir site navigasyon sistemi oluşturacağız. Buradaki fikir, hedef sözde sınıf kullanılarak görüntülenecek ve gizlenecek birden çok slayt veya içerik katmanı düzenlemektir. CSS geçişleri ile slaytlarınızın görünümü için harika görsel efektler yapabilirsiniz. Ayrıca, navigasyonumuz duyarlı olacaktır.

      Not: Bu öğreticinin sonucu, CSS3'ü destekleyen tarayıcılarda tam olarak çalışır.

      HTML işaretlemesi

      Bir dizi bağlantı, bilgi veya bir alt slayt içerecek her bir slayt için sınıfla bir div oluşturun cn-slayt... Satır başına iki bağlantı içeren alt slaytlar için farklı bir sınıf kullanacağız. cn-slayt-alt... Bilgi slaydında sadece bir sınıf olacak cn-slayt.

      Örneğimizde, üç alt slayt içeren bir ana slayt olacaktır. Her alt slayt, bir bilgi slaydına işaret eden dört bağlantı içerir. Tüm yapı, bir ana slayt, üç alt slayt ve bilgi içeren on iki slayttan oluşacaktır:

      Açıklama

      Felsefe

      Geri

      epistemoloji

      Geri

      Metin...

      Arka planı görmek için sol tuşu basılı tutun

      Metafizik

      . . .

      Estetik

      . . .

      etik

      . . .
      . . .

      Alt ve bilgi slaytları, önceki katmana bağlantılar içerir.

      CSS

      Ana kap, öğenin çok büyük veya küçük olmaması için ganatik koşullarda genişliği ayarlamak için yüzdeleri kullanmamıza izin veren minimum genişlik ve maksimum genişlik özelliklerine sahiptir:

      Cn-kap (genişlik: %60; minimum genişlik: 300 piksel; maksimum genişlik: 820 piksel; kenar boşluğu: 10 piksel otomatik 0 otomatik; metin hizalama: sola; konum: göreli;)

      Slayt "açıldığında", ana başlık kesinlikle efektler kullanılarak konumlandırılacak ve görüntülenecektir. Geçişler, başlığın bağlantı bloklarının çıktısından sonra görünmesi için gecikmeli olarak ayarlanır:

      Cn-container h2 (yazı tipi ailesi: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; yazı tipi değişkeni: küçük harfler; yazı tipi ağırlığı: 700; renk: #fff; konum: mutlak; z -index: 1000; metin-gölge: 0 0 1px rgba (255,255,255,0.8), 1px 1px 1px rgba (0,0,0,0.2); yazı tipi boyutu: 80px; line-height: 80px; üst: 0px; sağ : 200 piksel; beyaz boşluk: nowrap; opaklık: 0; -webkit-geçişi: tümü 0,3s doğrusal 0,4s; -moz-geçişi: tümü 0,3s doğrusal 0,4s; -o-geçişi: tümü 0,3s doğrusal 0,4s; - ms geçişi: tümü 0,3s doğrusal 0,4s; geçiş: tümü 0,3s doğrusal 0,4s;) .cn-container .cn-slide: hedef h2 (sağ: 0px; opaklık: 1;)

      Slaytlar da kesinlikle konumlandırılmıştır. Slaytların ilk opaklığı 0 olarak ayarlanır. Yalnızca hedef olduklarında görüntülenirler:

      Cn-slayt (metin hizalama: merkez; konum: mutlak; sol: -%100; dolgu üst: 80 piksel; kenar boşluğu: %5; genişlik: %90; opaklık: 0; -webkit-geçişi: sol 0,4s doğrusal , opaklık 0,4s doğrusal; -moz-geçişi: sol 0,4s doğrusal, opaklık 0,4s doğrusal; -o-geçişi: sol 0,4s doğrusal, opaklık 0,4s doğrusal; -ms-geçişi: sol 0,4s doğrusal, opaklık 0,4s doğrusal ; geçiş: sol 0,4s doğrusal, opaklık 0,4s doğrusal;) .cn-slide: hedef (sol: 0px; opaklık: 1;)

      Diğer demo dosyalarına bir göz atın. Görsel efektler oluşturmak için diğer geçiş dizilerini kullanır.

      Şimdi bağlantı elemanlarına bakalım. Daha sonra her öğe için yeniden tanımlanacak olan bir arka plan görüntüsüne sahip olacaklar. Varsayılan dosya 1.jpg'dir. Fare imlecini öğenin üzerine getirdiğinizde, metnin gölgesinin rengi ve bloğun kendisi değişecektir:

      Cn-slide nav a (metin hizalama: sola; ekran: blok; yazı tipi ailesi: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; yazı tipi değişkeni: küçük harfler; yazı tipi ağırlığı: 700 ; kenarlık: 8 piksel katı #fff; dolgu: %2; yazı tipi boyutu: 66 piksel; harf aralığı: 7 piksel; metin gölgesi: 0 piksel 0 piksel 10 piksel rgba (255,255,255,0.9); renk: rgba (255,255,255,0.1); satır- yükseklik: 66 piksel; kenar boşluğu: 0 0 10 piksel 0; anahat: yok; kutu gölgesi: 1 piksel 1 piksel 3 piksel rgba (0,0,0,0.1); arka plan: #fff url (../ resimler / 1.jpg) no- tekrar merkez merkezi; -webkit-background-size: %100; -moz-background-size: %100; -o-background-size: %100; background-size: %100; background-clip: padding-box; - webkit-geçişi: tüm 0,3s kolay giriş; -moz-geçiş: tüm 0,3s kolay giriş; -o-geçiş: tüm 0,3s kolay giriş; -ms-geçiş: tüm 0,3s kolaylık -in-out; geçiş: tüm 0,3s kolay giriş;) .cn-slide gezinme a: vurgulu (kutu gölgesi: 1px 3px 7px rgba (0,0,0,0.25); metin-gölgesi: 1px 1px 1px rgba (0,0,0,0.1); renk: rgba (255,255,255,0.9);)

      Cn-slide-sub nav a (genişlik: %42; ekran: satır içi blok; yazı tipi boyutu: 40 piksel;)

      Öğeler arasında küçük bir boşluk oluşturmak için tek torunlar için sağ kenar boşluğunu ayarlayın:

      Cn-slide-sub nav a: nth-child (tek) (sağ kenar boşluğu: 5px;)

      Bilgi slaydı, geçişlerin bitiş noktasıdır:

      Cn-içeriği (arka plan: # 80B8CE url (../ resimler / 1.jpg) tekrarsız merkez merkezi; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: kapak; arka plan boyutu: kapak; metin hizalama: sol; dolgu: 20 piksel 20 piksel 5 piksel; kutu gölgesi: 1 piksel 1 piksel 3 piksel rgba (0,0,0,0.1); kenarlık: 8 piksel düz #fff; kenar boşluğu: 5 piksel ; imleç: işaretçi;)

      Her içerik alanı bir bağlantı bloğuna karşılık gelir. Arka plan görüntüsü daha sonra yüklenecek:

      Paragrafta da geçişler olacaktır. Sözde sınıf: aktif ile, kullanıcının sol fare düğmesini basılı tutarken arka plana bakmasını sağlıyoruz.

      Cn içeriği: aktif p (opaklık: 0;) .cn içeriği p (satır yüksekliği: 24 piksel; metin gölgesi: 1 piksel 1 piksel 1 piksel rgba (255,255,255,0.9); renk: rgba (103,59,77,0.9) ; dolgu: 15px 20px; kenar boşluğu: 10px; arka plan: rgba (255,255,255,0.96); yazı tipi stili: italik; kenarlık-üst: 7px katı rgba (103,59,77,0.6); -webkit-geçişi: opaklık 0,3s doğrusal; -moz-geçişi: opaklık 0,3s doğrusal; -o-geçişi: opaklık 0,3s doğrusal; -ms-geçişi: opaklık 0,3s doğrusal; geçiş: opaklık 0,3s doğrusal; -webkit-touch-bellout: yok; -webkit-kullanıcı-seçimi: yok; -khtml-kullanıcı-seçimi: yok; -moz-kullanıcı-seçimi: yok; -ms-kullanıcı-seçimi: yok; kullanıcı-seçimi: yok;)

      Dönüş oku sola doğru kayar. Başlangıçta -100 piksellik bir konuma sahiptir ve slayt etkinleştirildiğinde 3 piksellik bir konuma kayar:

      Cn-back (anahat: yok; metin girintisi: -9000 piksel; genişlik: 49 piksel; yükseklik: 42 piksel; arka plan: şeffaf url (../ resimler / ok.png) tekrarsız merkez merkez; konum: mutlak; üst: 22 piksel ; sol: -100 piksel; imleç: işaretçi; opaklık: 0; -webkit-geçişi: 0,4 saniyelik kolay giriş 0,5 sn; -moz geçişi: 0,4 sn.lik çıkış kolaylığı 0,5 sn; -o-geçiş : tüm 0,4 sn. giriş kolaylığı 0,5 sn; -ms geçişi: tüm 0,4 sn. giriş kolaylığı 0,5 sn; geçiş: tüm 0,4 sn. giriş kolaylığı 0,5 sn;) .cn-slide: hedef .cn -geri (sol: 3 piksel; opaklık: 1;)

      Şimdi her bağlantı elemanı için bir arka plan resmi tanımlayalım. Kullanışlı bir öznitelik seçici ile belirli bir öğe belirtebiliriz. href niteliğinin değerine bakarız ve resmi tanımlarız:

      / * Öne Çıkanlar * / .cn-slide nav a (arka plan resmi: url (../ resimler / 1.jpg);) .cn-slide nav a (arka plan resmi: url (../ resimler / 2. jpg) );) .cn-slide nav a (arka plan resmi: url (../ resimler / 3.jpg);) / * Slayt 1 için öğeler ve alt öğeler * / .cn-slide nav a, # slayt-1 - 1 .cn-içerik (arka plan resmi: url (../ resimler / 4.jpg);) .cn-slide nav a, # slide-1-2 .cn-content (arka plan resmi: url (.. / resimler / 5.jpg);) .cn-slide nav a, # slide-1-3 .cn-content (background-image: url (../ images / 6.jpg);) .cn-slide nav a , # slide-1-4 .cn-content (background-image: url (../ images / 7.jpg);) / * Slide 2 için tümceler ve alt cümleler * / .cn-slide nav a, # slide- 2- 1 .cn-content (background-image: url (../ images / 8.jpg);) .cn-slide nav a, # slide-2-2 .cn-content (background-image: url (. ./ resimler / 9.jpg);) .cn-slide nav a, # slide-2-3 .cn-content (arka plan resmi: url (../ resimler / 10.jpg);) .cn-slide nav a, # slide-2-4 .cn-content (background-image: url (../ images / 11.jpg);) / * Slide 3 için tümceler ve alt cümleler * / .cn-s lide nav a, # slide-3-1 .cn-content (arka plan resmi: url (../ resimler / 12.jpg); ) .cn-slide nav a, # slide-3-2 .cn-content (background-image: url (../ images / 13.jpg);) .cn-slide nav a, # slide-3-3. cn-content (arka plan resmi: url (../ resimler / 14.jpg);) .cn-slide nav a, # slide-3-4 .cn-content (arka plan resmi: url (../ resimler / 15.jpg);)

      Son olarak, şablonu küçük ekran boyutlarında şekillendirmek için birkaç medya sorgusu tanımlıyoruz. Şablonun kesme noktalarını belirlemek ve onlar için değişiklik kuralları belirlemek en iyisidir. Bizim durumumuzda böyle iki nokta var: 1060 piksel ve 900 piksel. Yazı tipi boyutunu değiştirelim ve alt slaytlarda satır başına sadece bir eleman kullanacağız.

      @media ekranı ve (maksimum genişlik: 1060 piksel) (.cn-slide-sub nav a (yazı tipi boyutu: 28 piksel;)) @ ortam ekranı ve (maksimum genişlik: 900 piksel) (.cn-container h2 (yazı tipi boyutu) : 48 piksel; satır yüksekliği: 95 piksel;) .cn-slide gezinme a (yazı tipi boyutu: 38 piksel;) .cn-slayt-al gezinme a (genişlik: otomatik; yazı tipi boyutu: 36 piksel; ekran: blok;) .cn -slide-sub nav a: nth-child (tek) (sağ kenar boşluğu: 0px;))