Codepen ile güzel katmanlı menülere harika bir genel bakış. Yalnızca CSS kullanarak yatay olarak ortalanmış menü

Yatay bir menüyü ortalamak, özellikle CSS'ye yeni başlayanlar için zor olabilir. Çözüm bulmak, çoğu CSS'ye, JavaScript hilelerine veya tüm tarayıcılar tarafından desteklenmeyen standart dışı kuralların kullanımına dayanan çok sınırlı bir yöntem listesine yol açar. Bu öğreticide, yalnızca standart CSS kurallarını kullanan ve tüm tarayıcılarda çalışan yatay bir menüyü ortalama yönteminde size yol göstereceğiz.

Bir ortalanmış menü örneği

Aşağıda, ikinci sekmenin etkinleştirildiği bu sütunda ortalanmış yatay bir menü bulunmaktadır. Menünün her zaman ortalanmış ve duyarlı kaldığından emin olmak için tarayıcı penceresini veya sayfasını yeniden boyutlandırmayı deneyebilirsiniz.

Demo sayfasında, yatay olarak ortalanmış bir menü için çeşitli tasarım seçenekleri görebilirsiniz. Bunlardan herhangi biri projelerinizde kullanılabilir.

HTML işaretlemesi

Bu derste gösterilen tüm menüler basit bir yapı kullanır. Bu, bir öğeye yerleştirilmiş sıradan bir sırasız bağlantı listesidir. div.

Ortalanmış Menü CSS Kodu

Menüyü ortalayacak CSS'nin tamamı aşağıdadır. Ve çalışma prensibinin açıklamaları dersin ilerleyen kısımlarında verilmektedir.

#centeredmenu (kayan: sol; genişlik: %100; arka plan: #fff; kenarlık-alt: 4 piksel katı # 000; taşma: gizli; konum: göreli;) #centeredmenu ul (temizle: sol; kayan nokta: sol; liste stili : yok; kenar boşluğu: 0; dolgu: 0; konum: göreceli; sol: %50; metin hizalama: merkez;) #centeredmenu ul li (ekran: blok; kayan nokta: sol; liste stili: yok; kenar boşluğu: 0; dolgu: 0; konum: göreceli; sağ: %50;) #centeredmenu ul li a (ekran: blok; kenar boşluğu: 0 0 0 1 piksel; dolgu: 3 piksel 10 piksel; arka plan: #ddd; renk: # 000; metin dekorasyonu: yok; satır yüksekliği: 1.3em;) #centeredmenu ul li a: vurgulu (arka plan: # 369; color: #fff;) #centeredmenu ul li a.active, #centeredmenu ul li a.active: vurgulu (renk: # fff; arka plan: # 000; yazı tipi ağırlığı: kalın;)

Merkezleme yöntemi nasıl çalışır?

Yöntem, kayan blok elemanlarının birbiri içinde göreli olarak konumlandırılmasına dayanmaktadır. İlk olarak, ofset yapıldığında elemanların nasıl yeniden boyutlandırıldığını görelim.

eleman div(blok), ofset olmadan, kendisine sunulan tam genişliğe kadar uzanır.

Ancak div öğesini sola hareket ettirirsek, içeriğine uyacak şekilde otomatik olarak küçülür. Sıkıştırma, uygulamanın anahtarıdır Bu method menünün ortalanması. Menüyü doğru konuma taşımaya yardımcı olur.

Standart sola hizalanmış menü

Standart bir sola hizalanmış menüyü ele alalım ve adım adım yeniden tasarlayalım. Anlaşılır olması için, öğeler farklı renklerde renklendirilir, bu nedenle neyin nereye yatırıldığı hemen anlaşılır.

Aşağıdaki noktalara dikkat edin:

• eleman ortalanmış menü div(mavi dikdörtgen) sola kaydırılır, ancak %100 geniştir, bu nedenle tüm sayfayı dolduracak şekilde uzatılmış halde kalır.
• eleman ul(pembe dikdörtgen) öğenin içinde ortalanmış menü div ve sola kayar. Bu, içeriğinin genişliğine, yani tüm yer imlerinin toplam genişliğine küçüleceği anlamına gelir.
• Tüm li öğeleri (yeşil dikdörtgenler) öğenin içindedir ul ve sola hareket ettirin. Böylece içlerindeki halkaların boyutuna küçülür ve tek bir yatay çizgide sıralanırlar.
• Her bağlantıda (turuncu dikdörtgenler) yer işaretinin metni görüntülenir: Yer İşareti 1, Yer İşareti 2 vb.

Sırasız listenin konumunu kaydırma

Sonra elemanı dengeleriz ul konumu kullanarak %50 sağa: göreceli özellik; ... Bir öğe bu koşullar altında yüzde olarak kaydırıldığında, içerdiği öğelerin toplam genişliğinin onun genişliği olmadığını hatırlamak önemlidir. Bizim durumumuzda, kaydırma, tarayıcı penceresinin yarısı kadar (veya görüntüleme için kullanılabilir alan) gerçekleşir.Sonuç olarak, menümüz pencerenin ortasından başlar ve kısmen onun ötesine uzanır. Ve bir sonraki adıma geçin.

Tüm menü öğelerinin konumunu değiştirme

Sadece tüm öğeleri taşımak için kalır li%50 kaldı. Bu, ul öğemizin (menüyü içeren kapsayıcı) genişliğinin %50'sidir. Böylece sekmeler tam olarak pencerenin ortasına kaydırılır.

Birkaç önemli not

Bu merkezleme yöntemini kullanırken akılda tutulması gereken birkaç önemli nokta vardır:

• eleman beri ul kısmen pencerenin dışına uzanır, bu da kaydırma çubuklarının görüntülenmesine neden olur. Bu nedenle, overflow: hidden kuralını kullanmanız gerekir; eleman için ortalanmış menü div... Böylece, elemanın çıkıntılı kısmı div kesilecektir.
• eleman beri ul yer imlerine hizalı değil, bunun için herhangi bir görsel stil kullanamazsınız. ul öğesini arka plan rengi ve kenarlık olmadan bırakın, böylece tamamen görünmez olur. Ve yer imi stilleri yalnızca öğeler için kullanılmalıdır. li.
• İlk ve son yer imleri için özel stiller ayarlamanız gerekiyorsa, ilk ve son öğeler için bir sınıf eklemeniz gerekir. li böylece onları ayrı ayrı şekillendirebilirsiniz.

Çözüm

Önerilen çözüm tüm tarayıcılarla uyumludur, JavaScript kullanmaz ve yeniden boyutlandırılabilir metni destekler.

İnternetteki klasik sitelerin çoğu, ana gezinme öğesi olarak yatay bir menü kullanır. Bazen çeşitli ek özellikler içerebilir - çok düzeyli yapılar, alt öğeler için simgeler, bir arama bloğu, karmaşık listeler vb. Son zamanlarda, blog zaten küçük bir koleksiyona sahipti ve bugün CSS + HTML'de açılır menünün nasıl oluşturulacağına dair 4 pratik örneğe bakacağız. Bilgiler, acemi geliştiriciler ve sitelerinde gezinmeyi değiştirmek isteyenler için yararlıdır.

İlk CSS3 Açılır Menü öğreticisi, bu koleksiyondaki en yeni öğreticidir (Nisan 2016 için). Çözümün artıları: Site için bu yatay açılır menü, alt öğelerde simgeler içerir, uygulama ve CSS kodunun kendisinin anlaşılması ve uygulanması oldukça basittir.

1. Adım - HTML işaretlemesi

İlk adım, öğeleri için bağlantı bağlantılarıyla (#) HTML'de sırasız bir liste oluşturmaktır. Orada, öğelerden birine, alt menüden sorumlu olacak başka bir iç içe liste ekleyin.

• Gösterge Panelim
• Seviyor
• Görüntüleme
  • Belgeler
  • Mesajlar
  • oturumu Kapat
• Yüklemeler
• Videolar
• Belgeler

Adım2 - menüyü göster

Sitenin yatay açılır menü öğeleri için gereksiz CSS dolgusunu kaldırın. Aynı aşamada, menü öğelerinin sabit bir genişlik ve yüksekliğini ayarlayacağız ve ayrıca yuvarlatılmış köşeler ekleyeceğiz.

Menu, .menu ul, .menu li, .menu a (kenar boşluğu: 0; dolgu: 0; kenarlık: yok; anahat: yok;) .menu (yükseklik: 40 piksel; genişlik: 505 piksel; arka plan: # 4c4e5a; arka plan: - webkit-linear-gradient (üst, # 4c4e5a %0, # 2c2d33 %100); arka plan: -moz-linear-gradient (üst, # 4c4e5a %0, # 2c2d33 %100); arka plan: -o-linear-gradyan ( üst, # 4c4e5a %0, # 2c2d33 %100); arka plan: -ms-doğrusal-gradyan (üst, # 4c4e5a %0, # 2c2d33 %100); arka plan: doğrusal gradyan (üst, # 4c4e5a %0,, # 2c2d33 %100); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (konum: göreceli; liste stili: yok; kayan nokta: sol; ekran: blok ; yükseklik: 40 piksel;)

3. Adım - bağlantı tasarımı

Temel stil özelliklerine (yazı tipi, renk, yükseklik) ek olarak, fareyle üzerine gelindiğinde metin renginin yumuşak bir geçişini kullanır ve oluştururuz. Ayrıca, ilk öğeden sola ve sondan sağa kenarlığı kaldırarak menüye ayırıcılar ekleriz.

Menü li a (ekran: blok; dolgu: 0 14 piksel; kenar boşluğu: 6 piksel 0; satır yüksekliği: 28 piksel; metin dekorasyonu: yok; sol kenarlık: 1 piksel düz # 393942; sağ kenarlık: 1 piksel düz # 4f5058; yazı tipi- aile: Helvetica, Arial, sans-serif; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 13 piksel; renk: # f3f3f3; metin gölgesi: 1 piksel 1 piksel 1 piksel rgba (0,0,0, .6); -webkit-geçişi : renkli .2s kolay çıkış; -moz-geçiş: renkli .2s giriş kolaylığı; -o-geçiş: renkli .2s kolay çıkış; -ms-geçişi: renkli .2s kolay giriş- çıkış; geçiş: renkli .2s kolay giriş;) .menu li: ilk çocuk a (sol sınır: yok;) .menu li: son çocuk a (sağ sınır: yok;) .menu li: üzerine gelin> a (renk: # 8fde62;)

Adım4 - alt menü

CSS'de sitenin bir açılır menüsüne sahip olduğumuz için, yuvalanmış listenin tasarımını da ayarlamalıyız. İlk olarak, dolguyu üstten 40 piksele ve sola 0 piksele ayarlayın + yuvarlatılmış köşeler ekleyin. Alt menüyü göstermek / gizlemek için, başlangıçta opaklık özelliğini sıfıra ve üzerine gelindiğinde - bire ayarlayın. Bir alt menünün görünümünün efektini oluşturmak için listenin yüksekliğini sıfıra ve vurgulu = 36 piksele ayarlayın.

Menü ul (konum: mutlak; üst: 40 piksel; sol: 0; opaklık: 0; arka plan: # 1f2024; -webkit-border-yarıçapı: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- yarıçap: 0 0 5px 5px; -webkit-geçiş: opaklık .25s hareket hızı .1s; -moz-geçiş: opaklık .25s hareket hızı .1s; -o-geçiş: opaklık .25s hareket kolaylığı .1s; -ms-geçişi: opaklık. 25s hareket hızı .1s; geçiş: opaklık .25s hareket hızı .1s;) .menu li: hover> ul (opaklık: 1;) .menu ul li (yükseklik: 0; taşma: gizli; dolgu: 0; -webkit-geçiş: yükseklik .25s hareket kolaylığı .1s; -moz-geçiş: yükseklik .25s hareket kolaylığı .1s; -o-geçiş: yükseklik .25s hareket hızı .1s; -ms-geçiş: yükseklik .25s hareket kolaylığı .1s; geçiş: yükseklik .25s hareket kolaylığı. 1s;) .menu li: hover> ul li (yükseklik: 36 piksel; taşma: görünür; dolgu: 0;)

Bağlantıların genişliğini = 100px olarak ayarlıyoruz, sonuncusu hariç tüm öğelerin altına bir kenarlık-alt kenarlık eklenir. Ayrıca dilerseniz alt menü öğelerine de resim koyabilirsiniz (Dikkat! Koddaki resimlerin yollarını kendi kullandıklarınızla değiştirmeyi unutmayınız).

Menü ul li a (genişlik: 100 piksel; dolgu: 4 piksel 0 4 piksel 40 piksel; kenar boşluğu: 0; kenarlık: yok; kenarlık-alt: 1 piksel katı # 353539;) .menu ul li: son çocuk a (kenarlık: yok;). menü a.documents (arka plan: url (../ img / docs.png) tekrarsız 6 piksel merkez;) .menu a.mesajlar (arka plan: url (../ img / bubble.png) tekrarsız 6 piksel merkez; ) .menu a.signout (arka plan: url (../ img / arrow.png) tekrarsız 6 piksel merkez;)

Ben şahsen uygulama kolaylığını ve simgelerin kullanımını seviyorum. İşte codepen ile son kod:

Josh Riser'ın sürümü, HTML ve CSS'deki önceki açılır listeye görsel olarak benzer. Kodda ">" alt seçicisi yoktur (çok düzeyli yapılarda kullanışlıdır), ancak yazar daha iyi bir sonuç için CSS3 efektlerinden (geçiş, kutu gölgesi ve metin gölgesi) iyi bir şekilde yararlanır. Kaynaktaki bağlantıya göre, yatay bir açılır menü oluşturma sürecinin açıklaması yok, bu yüzden hemen son kodu vereceğim:

Bu örnekte, CSS'de öğelere ek olarak bir arama bloğunun olacağı bir açılır menünün nasıl oluşturulacağına bakacağız. Benzer bir uygulama genellikle modern olanlarda bulunabilir. Uygulama süresi ve karmaşıklık açısından çözüm, öncekilerden biraz daha karmaşıktır. Mayıs 2013'te yayınlandı, bu nedenle testlerimizde harika çalışmasına rağmen birkaç şeyi düzeltmeniz gerekebilir.

HTML Kodu

Navigasyon için her zaman olduğu gibi sırasız bir liste (nav sınıfı ile) kullanılır. Normal menü öğeleri liste öğeleridir (li) ve herhangi bir sınıf ve kimlik içermeyen bağlantılar (a href) içerir. İstisna, aşağıdaki kimliklere sahip bu yatay açılır menünün 3 özel öğesidir:

• ayarlar - bağlantı resmi;
• arama - arama ve ilgili düğme içeren bir blok;
• seçenekler - bir alt menü içerir (subnav sınıfına sahip bir liste aracılığıyla uygulanır).

Ayrıca kodda, CSS özelliklerini önekler olmadan kullanmak için öneksiz komut dosyasını göreceksiniz. Açılır menünün son HTML'si şöyle görünür:

• 
• Başvuru
• Pano
• Seçenekler
  • Ayarlar
  • Başvuru
  • Pano
  • Seçenekler

menü için CSS

1. Temel stiller ve menü öğeleri

İlk olarak, menü öğeleri için Montserrat yazı tipini, koyu gri bir arka planı ve sabit bir yüksekliği belirliyoruz. Tüm öğeler, kayan nokta: sola hizalanır ve göreli olarak konumlandırılır, böylece daha sonra konum: mutlak;

@import url'si (http://fonts.googleapis.com/css?family=Montserrat); * (kenar boşluğu: 0; dolgu: 0;) .nav (arka plan: # 232323; yükseklik: 60 piksel; görüntü: satır içi blok;) .nav li (kayan nokta: sol; liste stili türü: yok; konum: göreli; )

2. Bağlantı tasarımı

Temel görünüm + menü öğelerine uygulanır. Yükseklik, nav sınıfındakiyle aynıdır. Menünün başındaki bağlantı görüntüsünün #ayarları için hizalama yapılır.

Nav li a (yazı tipi boyutu: 16 piksel; renk: beyaz; ekran: blok; satır yüksekliği: 60 piksel; dolgu: 0 26 piksel; metin dekorasyonu: yok; kenarlık-sol: 1 piksel katı # 2e2e2e; yazı tipi ailesi: Montserrat, sans-serif; metin-gölge: 0 0 1px rgba (255, 255, 255, 0.5);) .nav li a: vurgulu (arka plan rengi: # 2e2e2e;) #settings a (dolgu: 18 piksel; yükseklik: 24 piksel; yazı tipi boyutu: 10 piksel; satır yüksekliği: 24 piksel;)

3. Arama bloğu

Bu öğe sabit bir genişliğe sahiptir ve birkaç bölümden oluşur - yeşil arka plana sahip bir giriş alanı (#search_text) ve bir arama düğmesi (#search_button). Bazı tarayıcılarda arka plan rengi gri olabilir.

#search (genişlik: 357 piksel; kenar boşluğu: 4 piksel;) #search_text (genişlik: 297 piksel; dolgu: 15 piksel 0 15 piksel 20 piksel; yazı tipi boyutu: 16 piksel; yazı tipi ailesi: Montserrat, sans-serif; kenarlık: 0 yok; yükseklik: 52 piksel ; kenar boşluğu: 0; renk: beyaz; anahat: yok; arka plan: # 1f7f5c; kayan nokta: sol; kutu boyutu: kenarlık kutusu; geçiş: tümü 0.15s;) :: - webkit-giriş-yer tutucu (/ * WebKit tarayıcıları * / renk: beyaz;): -moz-yer tutucu (/ * Mozilla Firefox 4 - 18 * / renk: beyaz;) :: - moz-yer tutucu (/ * Mozilla Firefox 19+ * / renk: beyaz;): -ms-input-placeholder (/ * Internet Explorer 10+ * / renk: beyaz;) #search_text: odak (arka plan: rgb (64, 151, 119);) #search_button (kenarlık: 0 yok; arka plan: # 1f7f5c url (search.png) tekrarsız merkez; genişlik: 60 piksel; kayan nokta: sol; dolgu: 0; metin hizalama: merkez; yükseklik: 52 piksel; imleç: işaretçi;)

4. Açılır alt menü

Son dokunuş, son #options öğesi için tetiklenen bir CSS açılır menüsü oluşturmamıza izin verecektir.

#options a (border-sol: 0 yok;) #options> a (arka plan resmi: url (triangle.png); arka plan konumu: %85 merkez; arka plan tekrarı: tekrar yok; dolgu sağ: 42 piksel; ) .subnav (görünürlük: gizli; konum: mutlak; üst: %110; sağ: 0; genişlik: 200 piksel; yükseklik: otomatik; opaklık: 0; geçiş: tümü 0,1 sn; arka plan: # 232323;) .subnav li (kayan : yok;) .subnav li a (kenarlık-alt: 1px katı # 2e2e2e;) #options: hover .subnav (görünürlük: görünür; üst: %100; opaklık: 1;)

Stillerde, bir alt menüyü belirtmek için bir üçgen arka plan görüntüsü (triangle.png) eki bulacaksınız - bu ve örnekteki diğer resimler için doğru yolu belirtmeyi unutmayın. Bir alt menünün görünümü, opacity özelliği kullanılarak uygulanır. Codepen'de son çözüm:

V bu seçenekÇoğunlukla CSS2.1 teknikleri kullanılır, artı veya eksi yeni çözüm - Mart 2015 için. Sitenin yatay açılır menüsünde bir alt düzey eksikse, bu örnek aynı anda üç tane içerir. Sadece-çocuk sözde sınıfının yardımıyla, alt menülerin varlığını belirtmek için öğelere bir "+" sembolü eklenir.

Genel olarak, iyi ve karmaşık olmayan bir örnek. Uygulama sürecini ayrıntılı olarak açıklamayacağız, çünkü öncekilere benzer - önce bir HTML tel çerçevesi oluşturursunuz ve ardından yavaş yavaş bunun için stiller eklersiniz. Son kodu bağlantıdan kaynağa indirin, kısmen Codepen'de inceleyebilirsiniz:

Toplam

Yukarıda, nette çok daha benzer örnekler olmasına rağmen, CSS + HTML'de açılır menünün nasıl oluşturulacağına dair 4 seçeneğe baktık. jQuery ile ilgili çözümler var, ancak bu büyük olasılıkla yalnızca bazı özel efektlerin ve standart olmayan görevlerin uygulanması için kullanışlıdır. Çoğu durumda, bir grup CSS + HTML yeterli olacaktır, özellikle de artık menü için ana gereksinimler kolaylık ve hızlı yükleme hızı olduğundan.

Son olarak, yukarıdaki kodlar hakkında iki yorum. Bazı örnekler, CSS'deki açılır menü için resimler kullanır, bu nedenle resimlerin yollarına dikkatlice bakmanız ve siteniz için doğru değerleri sağlamanız gerekir. İkincisi, bazı çözümler 2 veya 3 yaşında, bu nedenle performanslarını farklı tarayıcılarda bir kez daha kontrol etmelisiniz.

Site için yatay açılır menülerin başka ilginç modern uygulamalarını biliyorsanız, yorumlarda bağlantılar gönderin.

Şartname

Açıklama

Etiket