Güzel yatay tam genişlikte menü. Duyarlı bir css menüsü nasıl yapılır? Yatay menü başlığın genişliğine kadar nasıl uzatılır

Merhaba. Uzun zamandır html / css'in nasıl çalıştığı konusunda yazı yazmadım. Son zamanlarda yeni bir düzen oluşturmaya başladım ve bu süreçte menüyü kauçuk yapmanıza olanak tanıyan ilginç bir numarayla karşılaştım (buna yeni öğeler ekleyebilirsiniz ve boyut artmayacaktır, ancak her zaman 100 olacaktır) Ana bloğun %'si). Bugün css'de kauçuk bir menü uyguluyoruz.

Makaleyi okuyamayacak kadar tembelseniz bu videoyu izleyebilirsiniz. Yazar ayrıca her şeyi çok güzel açıklıyor:

CSS Akışkan Menüsü Adım 1

İlk adım her zaman html işaretlemesidir, onsuz. Ancak bizim durumumuzda her şey basit olacak:

menü sarma bloğu

madde işaretli bir liste (ul etiketi) aracılığıyla oluşturulan menünün kendisi

peki, menü öğelerinin içinde ve bunların içinde sırasıyla zaten bağlantılar var

Her şey açık, işte işaretleme kodum:

Her şey standart görünüyor, şu şekilde:

Artık her şeyi istenilen forma getireceğiz, CSS çalışmaya başladı.

Adım 2 – Temel Stiller

Daha sonra sarma bloğuna stiller ekleyeceğim. Yani maksimum genişliği 600 piksele ayarlayacağım (menünün sığması için ekran görüntüsü almayı kolaylaştırmak için) ve bloğu da ortalayacağım.

dürüm(
arka plan: #fff;
maksimum genişlik: 600 piksel
kenar boşluğu: 0 otomatik;
}

3. Adım - kauçukluğu uygulayın

Şimdi menünün kendisini ele alıyoruz. Buradaki işaretleyicileri (ul etiketinden) kaldıracağım, arka planı doğrusal degrade yapacağım ve en önemlisi display: table-row özelliği ile menü kabının bir tablo satırı gibi davranmasını sağlayacağım. Bu daha sonraki manipülasyonlar için önemlidir.

R menüsü(
arka plan: doğrusal degrade(sağa doğru, #b0d4e3 %0,#88bacf %100);
ekran:tablo satırı;
liste stili: yok;
}

Gördüğünüz gibi yukarıdaki kod yazdığım her şeyi çözdü. Bu arada, Ultimate CSS Degrade oluşturucu aracını kullanarak degradeler oluşturmak uygundur. Bir ara bunun hakkında yazacağım.

R menüsü li(
dikey hizalama: alt;
ekran:tablo hücresi;
genişlik: otomatik;
metin hizalama: ortala;
yükseklik: 50 piksel;
sağ kenarlık: 1 piksel katı #222;
}

dikey hizalama: alt - bu özellik, menü öğesindeki metnin 2 satır alması durumunda tam olarak görüntülenmesi için gereklidir. Menüyü yaptığımızda bu özelliği kaldırabilir, yakınlaştırıp öğeleri küçültebilir ve metni iki satıra sarabilir ve görüntülenme sorunu görürsünüz. Mülkü iade edin ve her şey yoluna girecek.
display: table-cell - görüntüleme menüsünün kendisini bir tablo satırı olarak ayarladığımızdan, öğelerini bir tablodaki hücreler olarak görüntülenecek şekilde ayarlamak mantıklı olacaktır. Gereklidir.
genişlik: otomatik - paragraftaki metnin uzunluğuna bağlı olarak genişlik otomatik olarak hesaplanacaktır.
text-align: center yalnızca içerideki metni merkeze hizalamak içindir
height: 50px - yüksekliği 50 piksele ayarlayın
peki, sağ kenarlık sadece sağdaki bir kenarlıktır, öğeler için böyle bir ayırıcı

Menü çirkin görünse de sorun değil, artık onu akla getirmenin zamanı geldi.

Yapılacak son şey paragrafların içindeki bağlantılara stil vermektir. İşte bu kod var:

R menüsü li a(
metin dekorasyonu: yok;
genişlik: 1000 piksel
yükseklik: 50 piksel;
dikey hizalama: orta;
ekran:tablo hücresi;
renk: #fff;
yazı tipi: normal 14 piksel Verdana;
}

Ve şimdi menü böyle görünüyor:

Yine bazı satırları açıklayacağım:

text-decoration özelliği, bağlantılardaki varsayılan alt çizgiyi kaldırır
width: 1000px belki de en önemli satırdır. Bağlantıları yaklaşık olarak aynı genişliğe, belki daha azına, ancak her zaman en geniş menü öğesinden daha fazlasına ayarlamanız gerekir. Bağlantılar 1000 piksel genişliğinde olmayacak çünkü genişlik, otomatik olarak ayarlanmış genişliğe sahip li menü öğesi tarafından sınırlandırılacak, ancak bunu menüdeki herhangi bir sayıda öğe için her zaman olacak şekilde yapacaktır. Yüzde 100 geniş.
Vertical-align: middle ve display: table-cell - birincisi metni dikey olarak merkeze hizalar, ikincisi ise bağlantıları hücre olarak görüntüler. Her iki özellik de gereklidir.
yazı tipi - bu yalnızca yazı tipi için bir dizi ayardır. Bu makalede yazı tiplerinin css özellikleri hakkında bilgi edinin.

Adım 4 (isteğe bağlı) etkileşim ekleyebilirsiniz

Örneğin, fareyle üzerine gelindiğinde bir menü öğesinin rengini değiştirmek için. Bu, vurgulu sözde sınıf kullanılarak oldukça basit bir şekilde uygulanır:

R menüsü li:hover(
arka plan rengi: #6bba70;
}

Menüyü kauçukluk açısından test etme

Harika, menüler hazır, ancak en önemli şeyi kontrol etmedik - size söz verdiğim gibi ne kadar lastikli olduğunu. Menüye 2 öğe daha ekleyeceğim:

Menü 600 piksel genişliğinde kalır. Geri kalan eşyalar 2 yenisine sığacak şekilde biraz küçüldü.

Uzun bir paragraf daha ekleyeceğim:

Gördüğünüz gibi menü biraz daha küçüldü ve uzun öğe oldukça normal bir şekilde görüntülendi. Ve eğer size bahsettiğim dikey hizalama: alt özelliği olmasaydı, menü daha kötü görünürdü.

Menüyü üç öğeye indireceğim.

Öğeler çok daha özgür hale geldi, ancak menünün genişliği değişmedi. Böylece %100 kauçuk bir menü hazırladık!

Nasıl uyarlanır?

Prensip olarak, sarma bloğunu sabit değil maksimum genişliğe ayarlarsanız, uyarlanmasına bile gerek kalmaz. Benim durumumda max-width: 600px özelliğine sahibim ve genişlik 600 pikselin altına düştüğünde blok yatay bir kaydırma oluşturmadan ekranı takip ederek basitçe azalacaktır.

Peki, mobil cihazlarda veya geniş ekranlarda menüyü bir şekilde değiştirmek veya düzeltmek istiyorsanız, medya sorguları size yardımcı olacaktır! Web sitesi oluşturmada iyi şanslar!

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

Varsayılan olarak, tüm liste öğeleri dikey olarak istiflenir ve 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

Etiketin içindeki yatay menü isteğe bağlı olarak ... ve/veya ... öğesinin içine yerleştirilebilir. Bu html işaretlemesi anlamsal anlamın yanı sıra menü bloğunu biçimlendirmek için ek bir fırsat sağlar.

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

Ul ( list-style: none; /*liste işaretleyicilerini kaldır*/ marj: 0; /*1 em'nin üst ve alt kenar boşluklarını kaldır*/ padding-left: 0; /*40 piksellik sol dolguyu kaldır*/ ) a ( text-decoration: none; /*bağlantı metninin alt çizgisini kaldırın*/)

Liste öğelerini satır içi yapın. Sonuç olarak yatay olarak düzenlenirler, sağ tarafta aralarına 0,4em'ye eşit bir boşluk eklenir (yazı tipi boyutuna göre hesaplanır). Kaldırmak için li li (margin-right: -4px;) öğesine negatif bir sağ kenar boşluğu ekleyin. Daha sonra bağlantıları istediğiniz gibi şekillendirin.

Listenin elemanlarını yüzer hale getiriyoruz. Sonuç olarak yatay olarak düzenlenirler. Ul konteyner bloğunun yüksekliği sıfır olur. Bu sorunu çözmek için ul öğesine (overflow: gizli;) ekliyoruz, genişletiyoruz ve böylece kayan öğeler içermesine izin veriyoruz. Bağlantılar için bir (ekran: blok;) ekleyin ve bunları istediğiniz gibi şekillendirin.

Liste öğelerini satır içi blok yapma. Yatay olarak düzenlenirler, ilk durumda olduğu gibi sağ tarafta bir boşluk oluşur. Bağlantılar için bir (ekran: blok;) ekleyin ve bunları istediğiniz gibi şekillendirin.

.txt dosyasını kullanarak ul listesini esnek bir kapsayıcı haline getirmek Sonuç olarak listenin öğeleri yatay olarak düzenlenir. Bağlantılar için bir (display:block;) ekleyin ve bunları istediğiniz gibi şekillendirin.

Seriye açılır menülerle ilgili bir dersle devam ediyoruz. Sırada css'de kendin yap yatay açılır menüsü var.

Buraya tesadüfen geldiyseniz veya açılır menünün başka bir uygulamasını arıyorsanız, ana bölüme gitmenizi tavsiye ederim.

Bu bölümde CSS ve HTML'deki yatay açılır menü açıklanacaktır.

Sayfada gezinme:

Bu yüzden, görevimiz:

jQuery ve Javascript kullanmadan ve ayrıca tablo kullanmadan yatay css açılır menüsü (ul li listelerinde) yapın

Öncelikle kod yazmaya başlamadan önce menü için bir html şablonu yapmamız gerekiyor.

Evrensel bir menü yaptığımız için bunu WordPress menünün çıktısına mümkün olduğunca benzer hale getirmek istiyorum. Bana göre bu, en basit ve en çok yönlü Html menü kodlarından biridir. Şuna benziyor:

Ev
Hakkımızda
Hizmetlerimiz
- Hizmetimiz #1
- Hizmetimiz #2
- Hizmetimiz #3
- Hizmetimiz #4
- Hizmet 5
Haberler
Kişiler

Koddan da görebileceğiniz gibi açılır menümüz ul ve li listeleri üzerinde uygulanacaktır. Menünün CSS stili olmadan nasıl göründüğü:

Normal bir liste gibi çirkin göründüğünü söyleyelim. Daha sonra bu menüyü CSS stilleriyle dekore etmemiz gerekiyor.

Açılır menüler ve daha fazlası için CSS stilleri bir zorunluluktur. Sonuçta, açılır sekme:hover sözde sınıfı temel alınarak yapılmıştır.

Yatay açılır menü için aşağıdaki stillere ihtiyacımız var:

#menu1( konum:göreli; ekran:blok; genişlik:%100; yükseklik:otomatik; z-index:10; ) #menu1 ul( konum:göreli; ekran:blok; kenar boşluğu:0px; dolgu:0px; genişlik:100 %; yükseklik:oto; liste stili:yok; arka plan:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; içerik:" "; ) # menu1 ul li( konum:göreceli; ekran:blok; kayan nokta:sol; genişlik:otomatik; yükseklik:otomatik; ) #menu1 ul li a( ekran:blok; dolgu:9px 25px 0px 25px; yazı tipi boyutu:14px; yazı tipi- ailesi:Arial, sans-serif; renk:#ffffef; satır yüksekliği:1,3em; metin dekorasyonu:yok; yazı tipi ağırlığı:kalın; metin dönüşümü:büyük harf; yükseklik:36px; kutu boyutlandırma:kenarlık kutusu; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( arka plan:#EBBD5B; color:#2B45E0; )

Bu henüz son değil, ana yatay menünün CSS'sinin sadece bir kısmı. Daha sonra açılır menünün stillerini yazacağız:

#menu1 ul li ul( konum:mutlak; üst:36px; sol:0px; görüntüleme:none; genişlik:200px; arka plan:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*bu satır şunu uygular: bırakma mekanizması*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; kutu boyutlandırma:kenarlık kutusu; kenarlık-top:1px katı #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a:hover( arka plan:#FDDC96; renk:#6572BC; )

Şimdi hepsi bu. Açılır mekanizmanın kendisi tek satırda uygulanır.

Bu menüyle dış görünümü görün:

Pirinç. 2 (yatay açılır menü)

Aşağıda, açılır menünün çalışmasının bir demosunun yanı sıra kaynak kodunu indirmek için bir bağlantı bulunmaktadır. (Demo bu sayfada bir açılır menüde açılacaktır, yeni pencerede aç'a tıklamanıza veya fare tekerleğini kullanmanıza gerek yoktur)

Çoğunuz bu tür menülerin yukarıda gösterdiğim gibi geçmişten gelen selamlar olduğunu söyleyerek bana sitem edebilir, her ne kadar bu tür menülerle yeni düzenlerle tanışmış olsam da kısmen haklısınız.

Umarım yukarıdaki örneği indirmişsinizdir. Html bizde aynı kalacak ama CSS'yi tamamen değiştireceğiz. Buradan CSS kodunu alıp indirdiğiniz örneğe yapıştırabilir veya demo modunda nasıl çalıştığını görebilirsiniz.

#conteiner( genişlik:1000px; yükseklik:otomatik; kenar boşluğu:0px otomatik; dolgu-top:10px; ) #menu1( konum:göreceli; görüntüleme:blok; genişlik:%100; yükseklik:otomatik; z-index:10; ) #menu1 ul( konum:göreceli; görüntüleme:blok; kenar boşluğu:0px; dolgu:0px; genişlik:100%; yükseklik:otomatik; liste stili:yok; arka plan:#F3A601; ) #menu1 > ul( metin hizalama: yasla; yazı tipi boyutu:1px; satır yüksekliği:1px; ) #menu1 > ul::after( display:inline-block; genişlik:100%; yükseklik:0px; içerik:" "; ) #menu1 ul li( konum :göreceli; görüntüleme:satır içi blok; genişlik:otomatik; yükseklik:otomatik; dikey hizalama:üst; metin hizalama:sol; ) #menu1 ul li a( ekran:blok; dolgu:9px 35px 0px 35px; yazı tipi boyutu :14px; yazı tipi ailesi:Arial, sans-serif; renk:#ffffef; satır yüksekliği:1,3em; metin dekorasyonu:yok; yazı tipi ağırlığı:kalın; metin dönüşümü:büyük harf; yükseklik:36px; kutu boyutlandırma :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( arka plan:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( konum:mutlak; üst:36px; left :0 piksel; görüntü yok; genişlik:otomatik; arka plan:#EBBD5B; beyaz boşluk:nowrap; ) #menu1 ul li:last-child ul(/*son öğe sağa sabitlenecektir*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*bu satır mekanizma kesintilerini uygular*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width :100% ; kutu boyutlandırma:kenarlık kutusu; kenarlık-top:1px katı #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a:hover ( arka plan: #FDDC96; renk:#6572BC; )

Ayrıca bu örnek, açılır menünün, yani açılır menünün kendisinin tüm menü öğelerinin genişliğine bağlı olarak genişlemesi açısından ilkinden farklıdır.

Çok uzun menü öğeleri için bu seçenek sınırların dışına çıkacağından pek kullanışlı olmayabilir. Bu özelliği devre dışı bırakmak için "white-space: nowrap;" özelliğini aramanız yeterlidir. seçici #menu1 ul li ul ve kaldırın.

Aşağıda yatay açılır menünün bir demosunu görebilir veya kaynağını indirebilirsiniz:

Ayırıcılar olmadan bu menü öyle görünüyor. Ayırıcılar html'ye manuel olarak eklenebilir, ancak WordPress gibi bir CMS'niz varsa, bunu manuel olarak eklemek pek uygun değildir.

Saf CSS kullanarak menü öğeleri arasına nasıl çubuk (ayırıcı) ekleneceğine dair düzinelerce seçenek vardır. ::before veya::after kullanan veya daha basit bir şekilde border-sol, border-right kullanan seçenekleri kopyalamayacağım.

Düzenin harika bir şekilde oluşturulduğu ve jquery'nin vazgeçilmez olduğu durumlar vardır.

Html kodumuz aynı kalıyor, en başta yalnızca jQuery kütüphanesini ve onu kullanan dosyayı dahil ediyoruz:

Hemen sonra .

Anladığınız gibi, bir dosya oluşturmanız gerekiyor script-menü-3.js ve şu küçük kodu oraya koy:

$(document).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

Böyle bir menü için CSS stilleri olduğu gibi bırakılmalıdır, + bu parçayı en sona atın:

#menu1 ul li.razd( yükseklik:28px; genişlik:1px; arka plan:#ffffff; kenar boşluğu:4px; )

JQuery'de ayırıcılar içeren böyle bir yatay açılır menü şöyle görünecektir:

Demoyu görüntüleyebilir veya aşağıdaki yatay menü şablonunu indirebilirsiniz:

Böyle bir çözümün avantajları şunlardır:

menü dinamik olarak sürüklenecektir;
ayırıcıdan paragrafa kadar olan girintiler her yerde aynıdır;
daha güzel ve esnek tasarım.

Fareyle üzerine gelindiğinde çok seviyeli açılır menülerden bahsettiğimiz için, muhtemelen bunları alt gruplara ayırmaya değer:

tarafı işaret ederken vipadashka ile
üçüncü seviye açılır hamle ile

Örneklerimde 3 seviyeli çok seviyeli bir CSS menüsü göstereceğim, sonrasında ne yapılması gerektiğini tahmin etmenin zor olmayacağını düşünüyorum.

Başlamak için html'mizi biraz düzeltmemiz gerekiyor. Buraya 3. seviye için birkaç satır eklenecek:

Ev
Hakkımızda
Hizmetlerimiz
- Hizmetimiz #1
  - Hizmete ilave 1
  - Hizmete ilave 2
- Hizmetimiz #2
  - Hizmete ilave 3
  - Hizmete ilave 4
- Hizmetimiz #3
- Hizmetimiz #4
- Hizmet 5
Haberler
Kişiler
- Yol haritası
  - Harita eklentisi
  - Harita 2 için ekleme
- Geri bildirim formu

#conteiner( genişlik:1000px; yükseklik:otomatik; kenar boşluğu:0px otomatik; dolgu-top:10px; ) #menu1( konum:göreceli; görüntüleme:blok; genişlik:%100; yükseklik:otomatik; z-index:10; ) #menu1 ul( konum:göreceli; görüntüleme:blok; kenar boşluğu:0px; dolgu:0px; genişlik:100%; yükseklik:otomatik; liste stili:yok; arka plan:#F3A601; ) #menu1 > ul( metin hizalama: yasla; yazı tipi boyutu:1px; satır yüksekliği:1px; ) #menu1 > ul::after( display:inline-block; genişlik:100%; yükseklik:0px; içerik:" "; ) #menu1 ul li( konum :göreceli; görüntüleme:satır içi blok; genişlik:otomatik; yükseklik:otomatik; dikey hizalama:üst; metin hizalama:sol; ) #menu1 ul li.razd( yükseklik:28px; genişlik:1px; arka plan:#ffffff; kenar boşluğu:4px; ) #menu1 ul li a( ekran:blok; dolgu:9px 45px 0px 45px; yazı tipi boyutu:14px; yazı tipi-ailesi:Arial, sans-serif; renk:#ffffef; satır yüksekliği:1,3 em; metin dekorasyonu: yok; yazı tipi ağırlığı: kalın; metin dönüşümü: büyük harf; yükseklik: 36 piksel; kutu boyutlandırma: kenarlık kutusu; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a ( arka plan:#EBBD5B; renk:#2B45E0; ) #menu1 ul li ul( konum:mutlak; üst:36px; sol:0px; görüntüleme:yok; genişlik:otomatik; arka plan:#EBBD5B; beyaz boşluk:nowrap; ) #menu1 > ul > li:son-çocuk > ul(/*son öğe sağa sabitlenecek*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*bu satır bırakma mekanizmasını uygular*/ #menu1 ul li ul li( ekran:blok; genişlik:otomatik; ) #menu1 ul li ul li a( ekran:blok; metin dönüşümü:yok; yükseklik:otomatik; dolgu:7px 45px; genişlik:100%; kutu boyutlandırma:kenarlık -box ; border-top:1px katı #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li: fareyle üzerine gelin > a( arka plan:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; arka plan:#fddc96; ) #menu1 > ul > li:last -child > ul ul(sol:oto; sağ:100%;) #menu1 ul li ul li ul a(renk:#F38A01;)

JQuery dosyaları önceki örnekte olduğu gibi kopyalanır. Menünün en azından biraz daha iyi görünmesi için ayırıcıları bırakmaya karar verdim. Elbette onlarsız da mümkün.

Olay şu şekilde oldu:
Hamlenin sağda ve ortada nasıl göründüğünü göstermek için 2 kaplamayı bir arada yaptım.

Aşağıda bir demo görebilir ve bir örnek indirebilirsiniz:

Başlıkta biraz yağ çıktı ama işe yarayacak, asıl önemli olan kod.

Bu örneğin özü, tam genişlikte bir açılır menü + çok düzeyli yatay bir tam genişlikli açılır menü oluşturmaktır.

HTML kodunu değiştirmeyeceğim, önceki örnekten alınabilir. JQuery'deki ayırıcılar da kaldı.

Yalnızca CSS tamamen değişecek:

#conteiner( genişlik:1000px; yükseklik:otomatik; kenar boşluğu:0px otomatik; dolgu-top:10px; ) #menu1( konum:göreceli; görüntüleme:blok; genişlik:%100; yükseklik:otomatik; z-index:10; ) #menu1 ul( konum:göreceli; görüntüleme:blok; kenar boşluğu:0px; dolgu:0px; genişlik:100%; yükseklik:otomatik; liste stili:yok; arka plan:#F3A601; ) #menu1 > ul( metin hizalama: yasla; yazı tipi boyutu:1px; satır yüksekliği:1px; ) #menu1 > ul::after( display:inline-block; genişlik:100%; yükseklik:0px; içerik:" "; ) #menu1 ul li( konum :göreceli; görüntüleme:satır içi blok; genişlik:otomatik; yükseklik:otomatik; dikey hizalama:üst; metin hizalama:sol; ) #menu1 > ul > li(konum:statik;) #menu1 ul li.razd( yükseklik :28px; genişlik:1px; arka plan:#ffffff; kenar boşluğu:4px; ) #menu1 ul li a( ekran:blok; dolgu:9px 45px 0px 45px; yazı tipi boyutu:14px; yazı tipi ailesi:Arial, sans- serif; renk:#ffffef; satır yüksekliği:1,3em; metin dekorasyonu:yok; yazı tipi ağırlığı:kalın; metin dönüşümü:büyük harf; yükseklik:36px; kutu boyutlandırma:kenarlık kutusu; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( arka plan:#EBBD5B; renk:#2B45E0; ) #menu1 ul li ul( konum:mutlak; üst:36px; sol:0px; görüntüleme:yok; genişlik:%100; arka plan:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*bu satır bırakma mekanizmasını uygular*/ #menu1 ul li ul li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; kutu boyutlandırma: border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( arka plan:#FDDC96 ; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; arka plan:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(ekran) : blok; kayan nokta: yok; genişlik:%100;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px katı #ffffff; )

Menü şu şekilde görünecek: Sağdaki son öğenin silinecek yeri olmadığından tek nokta sitenin yeterli alana sahip olmasıdır. Bu sorun şu şekilde çözülebilir: n'inci çocuk ama bahçeyi çitle çevirme zahmetine girmedim.

Yatay çok düzeyli açılır menünün demosuna bakın:

Fark etmiş olabileceğiniz gibi: alt plaka da tam genişliktedir. Birkaç blok halinde hamleler bu şekilde yapılır.

Benim için bu kadar, umarım örneklerimden en az biri size uygundur. İlginiz için teşekkür ederiz.

Gönderinin tamamını okuduysanız ancak css'de kendi yatay açılır menünüzü nasıl oluşturacağınızı bulamadıysanız, yorumlarda bir soru sorun veya sitedeki aramayı kullanın.

Ayrıca https://website/vypadayushhee-menu/ ana sayfasını ziyaret etmenizi tavsiye ederim, açılır menülerin tüm örnekleri ve çeşitleri burada toplanmıştır.

Tünaydın

Çoğu zaman, kaç öğe içerdiğinden bağımsız olarak ana bloğun tüm genişliğine yayılacak yatay bir menü yapmanız gerekir.

Bugün size böyle bir menünün nasıl oluşturulacağını göstermek istiyorum.

Yani menümüz şu şekilde olacak:

Tam genişliğe kadar gerilir, üzerine geldiğinizde vurgulanır. Menü yanlarda yuvarlatılmıştır.

HTML İŞARETİ

İlginç haberler

Başka bir menü öğesi!

Menüyü tam genişlikte yapmak için %100 genişlikte tablolar kullandım. Her tablonun bir menü öğesi konteyner div'i vardır. İlk, son veya ara menü öğesine bağlı olarak - div uygun sınıfa atanır.

Her div kapsayıcısında, doğru şekilde görüntülenmesi gereken 2 adet kesin olarak konumlandırılmış kenar çubuğu bulunur. Standart kenarlıklar kullanırsanız, menü öğelerini değiştirdiğinizde metin 1-2 piksel atlayacaktır ve bu iyi bir şeydir.

Aktif sınıf, seçilen menü öğesinden sorumludur ve onu vurgular.

Her öğenin bir resmi ve metni vardır. Tüm bunların dikey olarak tam olarak ortada hizalanması için bir masa kullanıyoruz. Dikey hizalama özelliği sayesinde menü öğelerimiz her zaman düzgün bir şekilde görüntülenecek ve uzaklaşmayacaktır.

CSS KURALLARI

İlk olarak menünün genel görünümü için stilleri ayarlayacağız:

Menu_container ( padding-top: 40px; genişlik: 100%; yükseklik: 47px; border-spacing: 0px; ) .menu_container td ( dikey hizalama: orta; /* dikey hizalama */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( genişlik: 100%; yükseklik: 47 piksel; kenarlık: 1 piksel katı #dadbda; z-index: 1000; konum: göreceli; kenarlık-sol: yok; ) .inner_table ( genişlik: %100; yükseklik: %100; ) .inner_table td ( dolgu: 0 piksel; dikey hizalama: orta; kenarlık: yok; metin hizalama: sol; genişlik: 150 piksel; dolgu-sol: 4 piksel; ) .td.inner_table_title ( dolgu-top: 4 piksel; yazı tipi ağırlığı: kalın; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; dikey hizalama: orta; kenarlık: yok; text-align: left; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: büyük harf; line-height: 13px; ) .inner_table_menu td.inner_table_img ( width: 30px!important; height: 30px!important; padding-left: 15px; )

Güzellik için menünün kenarlarındaki köşeleri yuvarlatın:

First_point_menu( -webkit-border-top-sol-yarıçap: 5px; -webkit-border-bottom-left-yarıçap: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px katı #dadbda; ) .last_point_menu ( -webkit-border-top-right-yarıçap: 5px; -webkit-border -alt-sağ-yarıçap: 5 piksel; -moz-border-yarıçap-sağ üst: 5 piksel; -moz-border-yarıçap-altsağ: 5 piksel; kenar-üst-sağ-yarıçap: 5 piksel; kenar-alt-sağ-yarıçap: 5 piksel ;)

Artık menümüz daha güzel bir görünüme kavuştu:

Şu ana kadar ilk paragrafta sol kenarlık yok. Daha sonra düzelteceğiz.

Şimdi menüye fareyle üzerine gelme efektleri ekleyelim.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( arka plan rengi: #CAE285; arka plan görüntüsü: -moz-linear- degrade(üst, #CAE285, #9FCB56); arka plan görüntüsü: -webkit-gradient(doğrusal, 0 0, 0 100%, itibaren(#CAE285), ila(#9FCB56)); arka plan görüntüsü: -webkit-doğrusal -gradient(üst, #CAE285, #9FCB56); arka plan görüntüsü: -o-doğrusal-gradyan(üst, #CAE285, #9FCB56); arka plan görüntüsü: doğrusal degrade(alta doğru, #CAE285, #9FCB56); border: 1px katı #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: yok; z-index: 5000; ) /* sınırları fareyle üzerine gelindiğinde çalıştır*/ .first_point_menu ( border: 1px katı #dadbda; ) .first_point_menu:hover, .first_point_menu.active ( border: 1px katı #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px katı #dadbda; border-left: yok; ) .last_point_menu:hover ( kenarlık: 1px düz #9FCB56; kenarlık-sol: yok; kenarlık rengi: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: yok; )

Artık menümüz çok daha güzel görünüyor ancak şimdilik seçili menü öğeleri için kenarlıklarımız yok. Haydi düzeltelim!

/* yan kenarlıklar için stiller */ .borderLeftSecond, .borderRightSecond ( display: yok; konum: mutlak; genişlik: 1 piksel; yükseklik: 47 piksel; arka plan rengi: #9fbb62; üst: 0 piksel; z-index: 1000; ) /* kenarlıklar için mutlak uzaklıklar */ .borderLeftSecond ( left: 0px; ) .borderRightSecond ( right: -1px; ) /* etkin ve gezinen nesneler için sınırları gösterir */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu:hover > . borderLeftSecond , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: blok; ) /* ilk ve son öğenin durumlarını ele alın */ .first_point_menu.active .borderLeftSecond ( display: yok; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: blok; )

Bu kadar!

Ana bloğun tüm genişliğine yayılmış harika bir menümüz var! Fareyi üzerine getirdiğinizde noktalar birbirinin üzerinden geçmiyor ve düzen atlamıyor.