Yatay bir css menüsü yapmak. Html5 kullanarak yatay menü nasıl yapılır. İlginç jQuery efektli taze menü

1. Dikey parlak jQuery menüsü

2. Soğuk etki. Dans menüsü.

4. jQuery kullanarak açılır liste

Bir açılır menü olarak UI öğesinin harika stili.

Fareyi düğmenin üzerine getirdiğinizde, panel yukarıdan kayar.

6. Radyal menüyü görüntülemek için jQuery eklentisi "MobilyBlocks"

7. Sprite kullanan menü

Parlama efektli animasyonlu javascript menüsü.

Taze ve güzel jQuery menüsü.

9. jQuery Garaj Kapısı menüsü

10.jQuery dikey kaydırma menüsü

Çok sayıda öğe içeren bir menünün uygulanması. Fare imlecini yukarı veya aşağı hareket ettirdiğinizde kayar.

11.jQuery açılır stili

12. Sayfa gezinme eklentisi

Sayfada istenen bölüme yumuşak kaydırma. Eklenti "jQuery One Page Navigation".

13. "Animasyonlu İçerik Menüsü" Eklentisi

Yeni jQuery eklentisi. Animasyonlu site navigasyonunun mükemmel uygulaması. Menü öğeleri arasında gezinirken, bir açıklama ve olası bağlantıların bulunduğu bir blok açılır ve seçilen öğeye bağlı olarak, tarayıcı penceresinin boyutundan bağımsız olarak tam ekrana uzanan sayfanın arka planı değişir. Demo sayfasına mutlaka göz atın.

14. jQuery Tatlı Menü eklentisi

Hareketli öğeler içeren animasyonlu menü.

15. Sabit jQuery menüsü

Sayfayı aşağı kaydırdığınızda, menü ekranın üst kısmında sabit kalır.

16. Kaydırıcı Kiti Kaydırılan Menüler

Çok sayıda öğe içeren dikey bir menü uygulamak için. Öğeler arasında gezinme, fare tekerleği kullanılarak veya "Öncekiler" ve "İleri" bağlantıları kullanılarak gerçekleştirilir.

17. Şık CSS3 Menüsü

18. Yeni CSS3 Elma Stili Menüsü

Yeni Apple tarzı menü. Eskisinden daha koyu görünüyor ama daha az sevimli değil.

19. Orijinal jQuery menüsü

Arka plan efektli açılır menü. Alt menü öğeleri yukarı doğru genişler. Bir menü öğesinin üzerine geldiğinizde arka plan görüntüsü değişir.

20. Hareketli jQuery menüsü

Animasyonlu menü. Menü öğeleri, simgeler ve açıklamalar şeklinde sunulur. bir menü öğesinin üzerinde gezinmenin bazı harika etkileri. Hepsini görmek için 8 efekt vardır - demo sayfasındaki Exemple1-Exemple8 bağlantılarını takip edin.

21. "Kaydırma menüsü" XML kaydırma menüsü

Dikey ve yatay menüleri kaydırma. Menüde çok fazla öğe olduğunda iyi bir çözüm.

22. jQuery'deki sitedeki içerik menüsü

Belirli bir alana sağ tıkladığınızda bir menü açılır.

23. Site için dairesel iki seviyeli bir menü

Bir menü öğesi seçildiğinde, alt menü öğeleri sağda görüntülenir.

24. Bulanıklaştırma Menüsü CSS3 ile jQuery CSS3 Menüsü

Orijinal jQuery CSS3 menüsü 7 farklı stilde gelir. Fare imlecini menü öğelerinden birinin üzerine getirdiğinizde, geri kalanı olduğu gibi bulanıklaşıyor.

25. Birkaç muhteşem animasyonlu jQuery CSS3 menüsü

10 yaratıcı animasyonlu menü. Çeşitli efektler ve geçişler içeren yatay ve dikey CSS3 menüleri.

Arşiv ayrıca menünün orijinal PSD dosyasını da içerir.

27. MagicLine Menüsü

Bir menü öğesinin arka planı veya alt çizgisi, fareyi hafif bir gecikmeyle takip ederken, siz öğeden öğeye geçerken arka plan rengini yumuşak bir şekilde değiştirir. Çok güzel bir efekt, sıradışı görünüyor. Dikkat: Efekt operada çalışmıyor

28. Görüntü Baloncukları

Fareyi resimlerden birinin üzerine getirdiğinizde harika etki. Etki, yukarıda açıklanan jQDock'a biraz benzer.

31. Farklı efektlere sahip ilginç jQuery menüleri

Yatay, dikey menü. İlginç etkiler.

32. Harika jQuery Apple Stil Menüsü

34. İlginç efektli jQuery menüsü

36. İlginç jQuery efektli taze menü

Çok ilginç bir etki. Portföy siteleri için mükemmel.

Fareyle üzerine gelindiğinde ilginç küçük resim açılır efekti.

40. Otomatik kaydırmalı açılır liste

Paragraflar arasında güzel geçiş efekti.

42. Harika jQuery menüsü

43. Güzel büyük jQuery menüsü

44. jQuery menülerini kaydırma

Menü öğeleri küçük resimler olarak sunulur.

46. ​​​​jQuery Navigasyon Radyal Menüsü

47 CSS ve jQuery menüleri

Sayfayı aşağı kaydırdıkça yarı saydam hale gelen arama kutusuna sahip bir gezinme çubuğu.

48. Yatay jQuery menüsü

49. Dikey jQuery menüsü

Mükemmel dik menü. İmleci üzerine getirdiğinizde bir menü öğesi açılır.

50. Yatay jQuery menüsü

Bir menü öğesinin üzerine gelindiğinde ilginç efekt.

52. jQuery açılır menüsü

Fare imlecini menünün üzerine getirdiğinizde, öğeleri görünecektir. Görünen öğeler, eklentiyi yapılandırırken yarıçapını ayarlayabileceğiniz bir yay olarak görüntülenir. Bazı tarayıcılarda yay görüntüsünü görmezsiniz, menü doğrudan görüntülenir, ancak bu yine de bu jQuery menü uygulamasının genel izlenimini bozmaz.

53 CSS ve jQuery gezinme çubuğu

Fare imlecini bir menü öğesinin üzerine getirdiğinizde ilginç bir etki.

54. jQuery açılır paneli

Gri tonlamalı yeni animasyonlu menü.

58. jQuery ile sütun site gezintisi

Dikey çubuklar şeklinde sunulan navigasyon için ilginç bir çözüm. Fare imlecini bu şeritlerin üzerine getirdiğinizde, öğe için bir resim ve bir alt menü listesi belirir. Bir alt menü öğesini tıkladığınızda, bir açıklama sayfası görüntülenir. Bu uygulama, tanıtım siteleri veya sunumlar için mükemmeldir. Eklenti demosunu kontrol ettiğinizden emin olun.

59 jQuery site gezintisi

Sitede gezinme, üzerine geldiğinizde ilginç bir animasyon efekti göreceğiniz 4 resim şeklinde sunulur.

60. Gezinti çubuğu içerikle birlikte kayar

Gezinti çubuğu. Ok tıklandığında sayfa kaydırılır. Gezinme, sayfa içeriğiyle birlikte kayar.

61. Çeşitli sosyal hizmetlere sahip jQuery paneli

62. Düzgün animasyonlu jQuery menüsü

63. jQuery Suluboya Fırçaları Menüsü

Habr, merhaba!

Codepen'de farklı uzmanlardan birçok iyi çözüm var ve bunların en iyilerinin tek bir yerde toplanması gerektiğine inanıyorum. Bu nedenle 2 yıl önce bilgisayarımda çeşitli konularda ilginç scriptler kaydetmeye başladım.

Bunları bulut IDE ürün grubunda yayınlardım mr. Gefest, bunlar 5-8 çözümden oluşan derlemelerdi. Ama şimdi farklı konularda (düğmeler, menüler, ipuçları vb.) 15-30 komut dosyası biriktirmeye başladım.

Bu tür büyük setler daha fazla profesyonele gösterilmelidir. Bu nedenle, onları Habr'da yayınlıyorum. Umarım sizin için faydalı olurlar.

Bu derlemede, katmanlı menülere bir göz atacağız.

Düz Yatay Gezinme

Sorunsuz görünen alt menülere sahip güzel gezinme çubuğu. Kod iyi yapılandırılmış, js kullanılıyor. Kullanılan özelliklere bakılırsa ie8+ da çalışıyor.
http://codepen.io/andytran/pen/kmAEy

Malzeme Gezinti Başlığı w / Hizalanmış Açılır Listeler

İki sütunlu alt menüye sahip duyarlı bağlantı çubuğu. Her şey css ve html ile yapılır. ie8'de desteklenmeyen uygulanan css3 seçicileri.
http://codepen.io/colewaldrip/pen/KpRwgQ

Pürüzsüz Akordeon Açılır Menüsü

Sorunsuz açılır öğelere sahip şık dikey menü. Geçiş, dönüşüm js-kodu kullanılır.
http://codepen.io/fainder/pen/AydHJ

Saf CSS Koyu Satır İçi Gezinme Menüsü

İyonlardan simgeler içeren koyu dikey gezinme çubuğu. Javascript uygulandı. ie8'de büyük olasılıkla animasyon olmadan çalışacaktır.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Animasyonlu Saf CSS3 Mega Açılır Menü

İki çıktı formatına sahip şık menü: yatay ve dikey. Simgeler ve css3 animasyonu kullanılır. ie8'de kesinlikle berbat görünecek, ancak diğer tarayıcılarda her şey harika.
Dikey bağlantı: http://codepen.io/rizky_k_r/full/sqcAn/
Yatay bağlantı: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 Açılır Menüsü

Büyük öğeler ve açılır bir bağlantı listesi içeren yatay bir menü. js olmadan temiz ve minimalist kod.
http://codepen.io/ojbravo/pen/tIacg

Basit Saf CSS Açılır Menüsü

Basit ama şık yatay menü. Font-awesome tarafından kullanılır. Her şey css ve html'de çalışır, js yok. ie8'de çalışacaktır.
http://codepen.io/Duyarlı/pen/raNrEW

Bootstrap 3 mega açılır menü

Çevrimiçi mağazalar için mükemmel bir çözüm. Birden çok kategori düzeyi ve büyük görseller (örneğin, stok öğeleri) görüntüler. Boostrap 3'e dayanmaktadır.
http://codepen.io/organizedchaos/full/rwlhd/

Düz Navigasyon

Pürüzsüz alt menülere sahip şık gezinme çubuğu. Eski tarayıcılarda sorunlarla görüntülenecektir.
http://codepen.io/andytran/pen/YPvQQN

3B iç içe gezinme

js olmadan çok güzel animasyonlar ile yatay menü!
http://codepen.io/devilishalchemist/pen/wBGVor

Duyarlı Mega Menü - Navigasyon

Yatay duyarlı menü. İyi görünüyor, ancak mobil sürüm biraz topal. Kullanılan css, html ve js.
http://codepen.io/samiralley/pen/xvFdc

Saf Css3 Menüsü

Orijinal menü. js olmadan basit ve temiz kod ile. Wow efektleri için kullanın.
http://codepen.io/Sonick/pen/xJagi

Tam CSS3 Açılır Menüsü

Bir yuvalama düzeyine sahip renkli bir açılır menü. Font-awesome, html ve css'den simgeler kullanılır.
http://codepen.io/daniesy/pen/pfxFi

Yalnızca Css3 açılır menüsü

Üç seviyeli yuvalama ile oldukça iyi bir yatay menü. js olmadan çalışır.
http://codepen.io/riogrande/pen/ahBrb

açılır menüler

İç içe geçmiş bir öğe listesi görünümünün orijinal etkisine sahip minimalist bir menü. Bu çözümün de javascript içermemesine sevindim.
http://codepen.io/kkrueger/pen/qfoLa

Saf CSS Açılır Menüsü

İlkel ama etkili bir çözüm. Sadece css ve html.
http://codepen.io/andornagy/pen/xhiJH

Çekme Menüsü - Menü Etkileşim Konsepti

Bir cep telefonu için ilginç bir menü konsepti. Bunu daha önce görmedim. Html, css ve javascript kullanıldı.
http://codepen.io/fbrz/pen/bNdMwZ

Basit Açılır Menü Yap

Temiz ve basit kod, js yok. ie8'de kesinlikle çalışacaktır.
http://codepen.io/nyekrip/pen/pJoYgb

Saf CSS açılır menüsü

Fena bir çözüm değil, ancak kullanılan çok fazla sınıf var. Js olmamasına sevindim.
http://codepen.io/jonathlee/pen/mJMzgR

Aşağıya doğru açılan menü

Minimum javascript kodu ile güzel dikey menü. JQuery kullanılmaz!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 Açılır Menüsü

Ek altyazıları olan yatay bir menü sitenizi güzel bir şekilde dekore edebilir. Kod basit ve anlaşılır. Javascript geçerli değil.
http://codepen.io/ibeeback/pen/qdEZjR

Çok sayıda kod içeren güzel bir çözüm (html, css ve js). 3 alt menü formatı icat edildi. Çözüm, çevrimiçi mağazalar için çok uygundur.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menü Açılır Menüleri (Özel Çözüm)!

On üç (13) animasyon seçeneğiyle koyu yatay menü! Mutlaka okumanızı tavsiye ederim, günlük hayatta işinize yarayacaktır.
http://codepen.io/cmcg/pen/ofFiz

not
23 çözümün montajını umarım beğenmişsinizdir. Bunları daha fazla okumak istiyorsanız, aşağıdaki anketi inceleyin.
Herkese iyi çalışmalar.

Yazardan: Herkese hoş geldiniz. Bazı nedenlerden dolayı, web yöneticileri bir açılır menüyü komut dosyalarıyla ilişkilendirir, ancak uzun bir süre bu tür gezinme saf css kullanılarak kesinlikle güvenli bir şekilde yapılabilir. Üstelik böyle bir menü daha da kötü olmayacak. Bugün size css'de nasıl açılır menü oluşturulacağını göstereceğim. Tabiri caizse bir tarif paylaşacağım.

Menümüzün ders planı ve düzeni

Genel olarak öncelikle menünün kendisini nasıl oluşturacağımıza karar verelim. Html5'te standart yol, onu madde işaretli bir liste kullanarak bir gezinme kapsayıcısında oluşturmaktır. Sadece bunu yapalım. İşaretçileri daha sonra css kullanarak kaldıracağız, menüde bunlara hiç ihtiyacımız yok.

Aslında, hemen html'de iç içe listelerle işaretleme yazacağım. Yani listemiz iki seviyeli olacak - diğer listeleri içerecek. Yani, her öğe için bir açılır menü oluşturacak 1 liste.

Burada önemli bir nokta var, o da her bir öğeyi açılır liste yapmanız gerekmeyebilir, sadece birkaç tane yapmanız gerekebilir. Sorun değil, o zaman paragraflarda bırakmadan iç içe listeler oluşturmuyoruz.

Aslında, işte burada, tüm işaretleme:

çok büyük olduğunu anlıyorum. Bu, çok fazla kod gerektiren iç içe listelerdeki sorundur. Ancak 4 ana öğe yaptığımızı ve her biri için bir açılır menü olacağını unutmayın.

Aslında, iç içe olduklarını anlamak için tüm navigasyon için nav tanımlayıcısını ve tüm iç içe listeler için ikinci stil sınıfını belirledim.

Harika, işaretlememiz hazır, sonuca bakabilirsiniz:

Evet, korkunç görünüyor. Ama şimdi css'i açacağız ve birkaç dakika içinde navigasyonumuz değişecek. Hadi çalışalım.

css stilleri yazma

Yapacağım ilk şey, tüm öğeler için tüm dolguyu varsayılana sıfırlamak. Sadece bize müdahale edecekler, girintileri ihtiyaç duyulan yere kendimiz ayarlamak daha iyidir.

* (kenar boşluğu: 0; dolgu: 0;)

#nav (yükseklik: 70px;) #nav ul (liste stili: yok;)

Şimdi aslında menümüzün ne olacağına karar vermemiz gerekiyor. Yatay mı dikey mi? Önce yatay yapmayı ve her şeyi örneğinde görmeyi öneriyorum. Bunu yapmak için aşağıdaki stilleri yazmanız gerekir:

#nav> ul> li (kayan nokta: sol; genişlik: 180 piksel; konum: göreli;)

> işaretiyle, doğrudan bir ul'de yuvalanmış bir listedeki öğelere atıfta bulunduğumuzu ve doğrudan bir nav'de yuvalanmış olduğunu unutmayın. Bu, stili iç içe listelerdeki öğelere uygulamamanıza izin verdiği için çok önemlidir. Gerçek şu ki, benim fikrime göre, ana listedeki öğeler yatay olarak ve iç içe olanlarda - dikey olarak düzenlenecektir.

Ancak, elbette, fikrinize göre farklı şekilde yapabilirsiniz. Tüm öğeleri tek satırda yapabilirsiniz.

Neyse, yukarıdaki kodu anlayabileceğinizi umuyorum. Ana listedeki öğeleri sola hizalamaya zorlar, böylece blok öğeler olsalar bile hepsi aynı satıra sığar. Ayrıca onlara açık bir genişlik ve göreceli konumlandırma verdim.

Konumlandırma ne için? Daha sonra iç içe listeleri kesinlikle konumlandırmak için gereklidir. Css'de konumlandırma çalıştıysanız, muhtemelen bir blok göreli konumlandırma ayarlarsanız, içindeki tüm öğelerin tüm tarayıcı penceresinin değil kesinlikle bu belirli bloğun içine yerleştirilebileceğini bilirsiniz.

Bu arada, zaten sahip olduklarımız:

Bu ekran görüntüsünden, yaklaşık sonucu zaten hayal edebilirsiniz. Tabii yine de paragrafları güzelce süslememiz gerekiyor ki navigasyona bakarken gözler merhamet dilenmesin.

#nav li a (ekran: blok; arka plan: # 90DA93; kenarlık: 1 piksel düz # 060A13; renk: # 060A13; dolgu: 8 piksel; metin hizalama: merkez; metin süsleme: yok;) #nav li a: vurgulu ( arka plan: # 2F718E;)

İlk olarak, bağlantıların kendilerinin bloklu hale getirilmesi gerekir. Bu, dolgunun çalışması ve tüm özelliklerin doğru bir şekilde uygulanması için gereklidir. Daha sonra arka planın renklerini, metin, çerçeve parametrelerini, dolguyu ve metnin merkeze hizalanmasını belirliyorum. Son olarak, bağlantılardan alt çizgiyi kaldırın.

Tüm bu parametrelerin benim yaptığım gibi yazılması gerekmez. Renkleri keyfi olarak seçebilir, bir çerçeveyi farklı yapabilir veya hiç kullanmayabilir, girintileri azaltıp çoğaltabilirsiniz.

Bu durumda> işaretini kullanmadığımızı, dolayısıyla bu kuralların iç içe paragraflardakiler de dahil olmak üzere tüm bağlantılara uygulanacağını unutmayın. Yani, şimdi aşağıdakilere sahibiz:

Harika, ancak alt öğelerin görünmemesi gerektiğini anlıyorsunuz, istediğiniz öğenin üzerine geldiğinizde açılmaları gerekiyor. Onsuz, menümüz bir tablo gibi görünüyor. Pekala, iç içe geçmiş öğeleri saklamanın zamanı geldi.

#nav li .saniye (görüntüleme: yok; konum: mutlak; üst: %100;)

İlk olarak, tamamen iç içe listeleri gizleriz. İkinci olarak, onlara mutlak konumlandırma ve üst koordinatı veriyoruz: %100. Bu, açılır menünün ait olduğu ana öğenin altında net bir şekilde, o öğenin yüksekliğinin %100'ünün altında açıkça görüntüleneceği anlamına gelir.

Artık web sayfasında sadece ana menüyü görüyoruz, bu da ihtiyacımız olan şey.

Bırakmanın uygulanması

En önemli şeyi yapmalıyız - kaybın farkına varmak. Bunda karmaşık bir şey yok, şu koda bakın:

#nav li: .saniye üzerine gelin (görüntüleme: blok;)

Bu kod sorunsuz çalışacaktır. Ana menüdeki bir öğenin üzerine geldiğinizde iç içe liste görünür hale gelir. Ve yalnızca imlecin üzerine geldiği öğeye gömülü olan liste.

Yalnızca küçük bir sorun var - iç içe geçmiş öğelerin genişliği, ana öğelerin genişliğiyle eşleşmiyor. Ancak bu, uygun stiller eklenerek kolayca çözülebilir:

#nav li li (genişlik: 180 piksel;)

Her şey, sorun çözüldü:

Her şey mükemmel çalışıyor. Ana öğenin üzerine geldiğinizde, ilgili açılır menü belirir. İmleci yana doğru hareket ettirirseniz kaybolur. İmleci iç içe geçmiş öğelerin üzerine getirirseniz, üzerlerine tıklayıp sitenin istediğiniz bölümüne gidebilirsiniz. Bu nedenle, sizinle kesinlikle hiçbir komut dosyası içermeyen çok basit ve hafif bir açılır menü hazırladık.

Menüyü dikeye dönüştürme

Pekala, yatay gezinmeyi tamamen çözdük, ancak buna ek olarak, sitelerde dikey gezinme çok yaygındır ve açılır da olabilir. Aslında, menüyü yataydan dikeye değiştirmek çok kolay, sadece birkaç satır kod değiştirmemiz gerekiyor.

İlk olarak, ana liste öğelerinden float: left öğesini kaldırmanız gerekecek. Öğelerimizin bir satırda görüntülenmesine katkıda bulunan bu özelliktir, ancak gezinme dikey olacaksa neden buna ihtiyacımız var?

Şimdi sıra #nav li .second seçicisinin kurallarını değiştirmek, yani iç içe listeler için, yani biraz farklı şekilde konumlandırılmaları gerekiyor. Bunun gibi:

#nav li .saniye (görüntüleme: yok; konum: mutlak; sol: %100; üst: 0;)

Yani bir yerine iki koordinatın kaydedilmesi gerekir. Öncelikle yatay gezinme söz konusu olduğunda, amaçlandığı gibi iç içe menülerin öğelerinin ana öğeler altında görüntülenmesi gerektiğini söyledim. Dikey menü durumunda bu uygun değildir - öğeler yanda görüntülenmelidir.

Böylece üst: %100'ü sola: %100 değiştiriyoruz. Ek olarak, üst koordinata da ihtiyacımız var. Alt menünün karşılık geldiği öğe ile aynı seviyede olması için 0'a ayarlıyoruz.

Her şey, şimdi her şey olması gerektiği gibi çalışıyor. Test edebilirsiniz. Gördüğünüz gibi, sadece birkaç satır kodu yeniden yazmam gerektiğini söylerken yalan söylemiyordum.

Çoklu seviyeli yatay menü

Kabaca aynı yaklaşımı kullanarak, çok gerekirse daha fazla menü düzeyi oluşturabilirsiniz. Örneğin, ana menünün dördüncü öğesi için alt öğelerden birine yuvalanacak bir liste oluşturalım.

Görev

Madde işaretli bir listeyi madde işaretleri olmadan yatay olarak görüntüleyin.

Çözüm

Madde işaretli liste etiketi

varsayılan çıktı öğeleri
• dikey olarak birbirinin üzerinde. Gezinme öğeleri oluşturmak için bazı durumlarda listeyi yatay olarak görüntülemek uygundur. Listenin bu görüntüsünü almanın birkaç yolu vardır.

  HTML'nin blok ve satır içi öğeler içerdiğini zaten bilmelisiniz. Satır içi öğeler kendi bloklarını oluşturmazlar, bu tür öğelere örnek olarak etiketler veya ... Blok öğeleri yeni bir satırda görüntülenir ve bu tür etiketlerin bir örneği olan dikdörtgen bir blok oluşturur

  veya

  Yani, etiket

• aynı zamanda bir blok elemanıdır.

  etiketlemek için

• blok öğesi gibi davranmaz, onu satır içi yapmak için CSS'yi kullanabilirsiniz.

  CSS görüntüleme özelliği, öğenin belgede nasıl görüntüleneceğinden sorumludur. Değerlerinden üçünü ele alalım (daha fazlası olmasına rağmen):

  • blok - eleman blok olarak görüntülenir.
  • satır içi - öğe satır içi olarak görüntülenir.
  • satır içi blok - blok satır içi eleman, aşağıda bu eleman türü hakkında daha fazla bilgi edinin, onu kullanacağız.

  İlk olarak, öğelerini satır içi öğelere dönüştürerek yatay bir liste oluşturalım. CSS stilinde, inline değeri ile display özelliğinin li seçiciye ayarlandığı bir kural yazacağız.

  • Paragraf 1
  • 2. nokta
  • 3. nokta
  
  
  

  Böylece, bu stil çalıştı ve liste öğelerini yatay olarak aldı:

  Şekil 1. Örnek # 1 çalışması.

  Bu yöntemin dezavantajları vardır. Bunun nedeni, satır içi öğelerin blok öğelere kıyasla bazı sınırlamaları olmasıdır. Örneğin, onlara genişlik ve yükseklik verilemez, ancak blok olanlar verilebilir.

  Örneğin, oluşturduğumuz menünün öğesinin 150 piksel genişliğinde ve 40 piksel yüksekliğinde olmasını istiyoruz. Stili aşağıdaki şekilde değiştirmeye çalışalım, yani menü öğesinin boyutunu ayarlayan iki kural ekleyelim:

  Bu düzenlemeler herhangi bir değişikliğe neden olmaz. Menü öğelerinin yatay olarak konumlandırılabilmesi ve genişlik ve yüksekliklerinin ayarlanabilmesi için satır içi blok tipine ayarlanması gerekir. Örneğimizin kodunu değiştirelim:

  • Paragraf 1
  • 2. nokta
  • 3. nokta
  
  
  

  Bu kod çalışır ve değişiklikler görünür:

  
  Şekil 2. Örnek 2 çalışması.

  Ancak farklı seçenekler olabilir, örneğin menüde iç içe listeleri görüntülememiz gerekiyor:

  • Düzenlemek
    • İptal
    • Kesmek
    • kopyala
    • Sokmak
  • yazıt
    • Gözü pek
    • İtalik
    • altı çizili
  • Boyut
    • Küçük
    • Normal
    • Ortalama
    • Büyük
  
  
  

  İşte bu kodun çıktısı:

  
  Şekil 3. Örnek №3 çalışması.

  Blokların istediğimiz yükseklikte hizalanmadığını görüyoruz. Tabii ki, tüm bloklar için aynı yüksekliği belirtebilirsiniz, ancak kesin değerini her zaman önceden bilemeyiz ve değişebilir.

  Ama aslında, bu neden oluyor?

  Bloklarımız satır içi blok olarak ayarlanmış bir görüntüleme özelliğine sahiptir. Bu, hem blok elemanlarının (genişlik ve yüksekliği belirleme yeteneği) hem de satır içi elemanların niteliklerine sahip oldukları anlamına gelir. Gördüğümüz, satır içi öğelerin kalitesidir.

  Farklı boyutlarda "A" karakterleri olan bir dizeye bakalım:

  A A A A A A A

  Tüm harflerin alt satıra dikey olarak hizalandığını görebiliriz. Daha doğrusu, taban çizgisi boyunca, ama şimdi ormana girmeyeceğiz. Yani, aynı şey bloklarımızda da oldu.

  Dikey hizalama özelliği, metni dikey olarak hizalamak için kullanılır. 3 numaralı örneğimizde, elemanın üst kenarlığını satırdaki en uzun elemanın üst kenarına hizalayacak olan top değerini kullanmak istiyoruz.

  Şimdilik, farklı boyutlardaki "A" karakterlerini içeren bir dizgeye uygulayalım:

  A A A A A A A

  Görünüşe göre harfler biraz "atlıyor". CSS kenarlığını en uzun harfe ayarladım, böylece aslında atlama olmadığını, üst kenarlık (hizalamanın gerçekleştiği) ile "A" karakterinin en üst noktası arasında boş bir boşluk olduğunu görebilirsiniz.

  Dikey hizalama özelliği her satır içi öğeye uygulanmalıdır, miras alınmaz. Bu özellik hakkında daha fazla bilgi edinebilirsiniz: dikey hizalama.

  Bu arasözden sonra liste öğelerini yatay olarak düzenlemeye devam edeceğiz.

  ikinci yol

  Float özelliğini kullanarak liste öğelerini yatay olarak yerleştirebilirsiniz. Bu özellik, elemanın hangi tarafta hizalandığını gösterir, iki konumu vardır: sol ve sağ.

  İşte bu kodu kullanan bir örnek:

  • Paragraf 1
  • 2. nokta
  • 3. nokta
  
  
  

  İşte kodun çıktısı:

  Şekil 4. Örnek çalışma.

  Örnek işe yarıyor gibi görünüyor. Ancak bu özelliği kullanırken bir uyarı var. Şimdi bakacağız. Örneğin, öğeleri yatay olarak düzenlemenin farklı yolları olan iki yatay listenin bulunduğu bir kod alalım: display ve float:

  • Paragraf 1
  • 2. nokta
  • 3. nokta
  • Paragraf 1
  • 2. nokta
  • 3. nokta
  
  
  

  İşte kodun çıktısı:

  Şekil 5. Örnek çalışma.

  Bu örneklerde, liste kapsayıcıları

  1 piksel kırmızı kenarlık var. Ancak display özelliğini kullanan en üstteki liste, liste öğelerini içerir. Ancak, float özelliği kullanılarak oluşturulan listenin öğeleri, kaplarından düşer.

  Aynı zamanda, ilk bakışta her şey çalışıyor. Ama listelerimizi değiştirelim. Menü-1 sınıfının olduğu listeyi, menü-2 sınıfının bulunduğu listeden önceki koda koyalım (şimdi aşağıdadır).

  Sonuç olarak elde ettiğimiz şey bu:

  Şekil 6. Örnek işlem.

  Float özelliğinin etkisi iptal edilmediğinden ve sonraki tüm öğeler için geçerli olduğundan, alt menünün öğeleri de menünün üst kısmında akar.

  Bu sorun nasıl çözülür?

  Bunu yapmak için clear özelliğini kullanmanız gerekir, bu, float özelliği ayarlanmışsa, öğenin başka bir öğe etrafındaki akışını iptal eder.

  clear özelliğini kullanan değiştirilmiş bir örnek:

  • Paragraf 1
  • 2. nokta
  • 3. nokta
  • Paragraf 1
  • 2. nokta
  • 3. nokta
  
  
  

  Alt listenin artık üsttekine yapışmadığı, elemanların birbirinin üzerinden geçmediği görülebilir. Ama ilk listede etiketler

  • hala konteynerin dışında
    .
    Şekil 7. Örnek çalışma.

    Ayrıca bizim çalışmamızda float kullanarak hangi elementin hangi elementi takip edeceğini her zaman bilemeyiz. İdeal olan, float özelliğini açık olduğu blokta kapatmaktır.

    Bu bir sözde eleman kullanılarak yapılır. İşte kod:

    • Paragraf 1
    • 2. nokta
    • 3. nokta
    • Paragraf 1
    • 2. nokta
    • 3. nokta
    
    
    

    Artık %100 çalışan kodumuz var.

    Şekil 8. Örnek çalıştırma.

    Float özelliğine sahip bu teknik, genellikle siteler, etiketler tarafından oluşturulan sütunları hizalamak için kodlanırken kullanılır.

    ... Bu şekilde, gerekli yükseklik hizalaması ile kolonların normal yapısını elde ederiz. Bir menü oluşturduğumuzda, çoğu durumda blokların yüksekliği bizim için önemli değildir, neredeyse her zaman aynıdır. Bu nedenle, bu durumlarda (görüntüleme: satır içi blok) kuralını kullanmak oldukça mantıklıdır.
    Ancak konunun açıklanmasının eksiksiz olması için, burada tüm olası seçeneklere aşina olduk. Örneğin CSS tablolarının kullanılması gibi başka yollar olsa da, arama motorları tabloları gezinme öğelerini veya başka herhangi bir şeyi düzenlemek için değil, yalnızca amaçlanan amaçları için kullanmanızı şiddetle tavsiye eder.
    Yazardan: site oluşturma hakkındaki blogumuza hoş geldiniz. Bu, yeni spesifikasyona ayrılmış bir dizi makale ve bugün size html5'te nasıl menü yapılacağını ve bu işlemin dilin önceki sürümlerinde aynı olandan nasıl farklı olduğunu anlatmak istiyorum.
    Farklılıklar nedir
    Her şeyden önce, spesifikasyonun o kadar da yeni olmadığını söylemek isterim - oluşumuna 2009'da başladı. Aslında, o zamandan beri sürekli bir gelişme oldu - html5'te yeni fırsatlar ortaya çıkıyor, modern tarayıcılar bu yetenekleri giderek daha fazla destekliyor, böylece yakında bu teknoloji için tam destek hakkında konuşmak mümkün olacak, ancak bu bir şey değil. tek bir bütünden ziyade, her biri bağımsız olan bir dizi yeni özelliktir.
    Peki, ana navigasyonun (menü) oluşturulması arasındaki fark nedir, bu konuda bir makale okuduğunuza göre, kesinlikle bazı farklılıklar olmalıdır. Peki, menü daha önce nasıl oluşturuldu? Genellikle, tüm gezinme için ek bir kapsayıcıya yerleştirilmiş madde işaretli bir liste kullandılar - normal bir div.
    Böylece, yeni etiketlerin ortaya çıkmasıyla, artık daha doğru bir şekilde yapabilirsiniz - bir div etiketi yerine, menüyü nav'a sarın - özellikle içindeki en önemli bağlantıları toplamak için oluşturulan yeni bir anlamsal öğe, bunları birlikte gruplayın.
    Navigasyona hem bir liste hem de sadece bir dizi bağlantı koyabilirsiniz. Bana öyle geliyor ki, bu daha basit ve daha doğru bir çözüm, ancak birçok şablonda ul, li, a etiketlerini kullanarak menünün uygulanmasını hala görebilirsiniz.
    İlginç bir şekilde, gezinme kapsayıcısı, sayfadaki öncelikli bağlantılar için özel olarak tasarlanmıştır. Aslında, bir sayfada bu tür birden fazla içerik olabilir, ancak bunlara yalnızca ana gezinmeyi gerçekten oluşturan bağlantılar yerleştirilmelidir (örneğin, en üstteki ana menü ve sayfa altbilgisindeki kopyası).
    html5 ile yatay menü nasıl yapılır
    Listede herhangi bir çerçeveye bile ihtiyacınız yok, bağlantılar satır içi öğeler olduğundan, her şey başlangıçta tek bir satırda görüntülenecektir.
    Başka bir şey de, satır içi özelliklerinden dolayı tasarımda çok sınırlı olmalarıdır. Yalnızca şu özelliklerle çalışabilirsiniz: renk, yazı tipi boyutu, kenar boşlukları. Belirli bir arka plan rengi ayarlamak, ayırıcılar yapmak ve dahili girintiler eklemek (veya her menü öğesinin boyutunu belirlemek) istiyorsanız, bunu bir satırla yapamazsınız.
    Burada itemlerimizi blok elementlere çevirmeliyiz. Bunu yapmak için bir özellik yazmaları gerekir:
    Ekran bloğu;
    Şimdi yukarıdan aşağıya gidiyorlar, yani navigasyonumuz dikey hale geldi. Tekrar yatay hale getirmek için belirli özellikler eklemeniz gerekir. Örneğin, bir blok türü yerine, onlar için bir satır içi blok türü tanımlayın veya bunları (kayan: sol) olarak ayarlayın. Bu yöntemler hakkında daha fazla bilgi edinin.
    Dikey gezinme
    Genellikle html5'te dikey menü yapmak için bir liste kullanırlar ama yukarıda size verdiğim işaretleme bizim için yeterli. Gördüğünüz gibi, bağlantıları blok bağlantılarına dönüştürürseniz, yukarıdan aşağıya otomatik olarak birbiri ardına sıralanırlar, çünkü iki blok aynı satırda duramaz.
    Artık onlara gerekli tasarım kurallarını uygulayabilirsiniz. Bloklarda satır içi öğeden çok daha fazla özellik vardır, bu nedenle çok daha fazla seçeneğiniz vardır. Örneğin, aşağıdakileri ekledim:
    a (metin dekorasyonu: yok; renk: #fff; dolgu: 5 piksel; yazı tipi boyutu: 22 piksel; görüntü: blok; arka plan: doğrusal gradyan (sağa, rgba (96,108,136,1) %0, rgba (63,76,107) , 1) %100); genişlik: 200 piksel; metin hizalama: orta)
    metin - dekorasyon: yok; renk: #fff; dolgu: 5 piksel; yazı tipi - boyut: 22 piksel; Ekran bloğu; arka plan: doğrusal - gradyan (sağa, rgba (96, 108, 136, 1) %0, rgba (63, 76, 107, 1) %100); genişlik: 200 piksel; metin - hizala: ortala
    
    
    
    

    İlgili Makaleler

    Oyun başlatmak için programlar

    Android için en iyi dosya yöneticileri

    dbf dosyasındaki verileri doldurma programı

    Otomatik toplama Yandex Wordstat Anahtar kelime sayacı

    Dbf editörü

    Xenu, Excel'e daha fazla aktarma için hem kendi dosya biçiminde hem de metin biçiminde raporlar oluşturur