Menü tam genişlikte CSS'ye nasıl genişletilir? Tam genişlikte güzel yatay menü. Fistolu uyarlanabilir menü

Merhaba. Uzun zamandır html/css çalışmaları konusunda yazı yazmıyordum. Son zamanlarda yeni bir düzen oluşturmaya başladım ve bu süreçte menüyü esnek hale getirmenize olanak tanıyan ilginç bir numarayla karşılaştım (buna yeni öğeler ekleyebilirsiniz ve boyut artmayacaktır, ancak her zaman menünün %100'ü olacaktır). ebeveyn bloğu). Bugün CSS kullanarak kauçuk bir menü uygulayacağız.

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

CSS ile kauçuk menü - adım 1

İlk adım her zaman html işaretlemesidir, o olmasaydı nerede olurduk? Ancak bizim durumumuzda her şey basit olacak:

menü için blok sarmalayıcı

madde işaretli bir liste (ul etiketi) aracılığıyla görüntülenen menünün kendisi

Menü öğeleri içeride ve buna göre zaten bağlantıları var

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

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

Şimdi her şeyi istediğimiz forma koyacağız, CSS çalışmaya başlayacak.

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;
}

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

Şimdi menünün kendisini ele alalım. Buradaki işaretleyicileri (ul etiketi) kaldıracağım, arka planda doğrusal bir degrade yapacağım ve en önemlisi, menü kabının bir tablo satırı gibi davranmasını sağlamak için display: table-row özelliğini kullanacağım. Daha fazla manipülasyon için bunu yapmak ö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 gün onun hakkında tekrar yazacağım.

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

dikey hizalama: alt - bu özellik, bir menü öğesindeki metnin 2 satır alması durumunda eşit şekilde görüntülenmesi için gereklidir. Menüyü yaptığımızda bu özelliği kaldırabilir, yakınlaştırıp öğelerin sıkıştırılmasını ve metnin iki satıra taşınmasını sağlayabilirsiniz ve görüntülenme sorunu göreceksiniz. 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 - bu sadece içerideki metni ortalamak içindir
yükseklik: 50px — yüksekliği 50 piksele ayarlayın
sağ kenarlık yalnızca sağdaki bir kenarlıktır, öğeler için bir ayırıcıdır

Şu ana kadar menü çirkin görünüyor, ama sorun değil, şimdi onu akla getirmenin zamanı geldi.

Yapılacak son şey, öğelerin 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:

Tekrar bazı satırları açıklayayım:

text-decoration özelliği, bağlantıların varsayılan alt çizgisini geçersiz kılar
width: 1000px belki de en önemli satırdır. Bağlantıları yaklaşık olarak bu genişliğe, belki daha azına, ancak kesinlikle mümkün olan en geniş menü öğesinden daha büyük olacak şekilde ayarlamanız gerekir. Bağlantılar 1000 piksel genişliğinde olmayacaktır çünkü genişlik, genişliği otomatik olarak ayarlanan li menü öğesi tarafından sınırlandırılacaktır, ancak bu, menüdeki herhangi bir sayıda öğe için her zaman 100 olmasını sağlamayı mümkün kılacaktır. genişliğin yüzdesi.
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 özelliğe de ihtiyaç vardır.
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, bir menü öğesinin rengi fareyle üzerine gelindiğinde değişecek şekilde. Bu, vurgulu sözde sınıf kullanılarak oldukça basit bir şekilde uygulanabilir:

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. Kalan öğeler, 2 yeni öğeyi alacak şekilde biraz küçültüldü.

Uzun bir nokta daha ekleyeyim:

Gördüğünüz gibi menü biraz daha küçüldü ve uzun öğe oldukça normal bir şekilde görüntüleniyor. 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 bir blok yerine maksimum genişliğe ayarlarsanız, uyarlanmasına bile gerek kalmaz. Benim durumumda, max-width özelliğine sahibim: 600px ve genişlik 600 pikselin altına düştüğünde, blok yatay bir kaydırma oluşturmadan ekranla birlikte küçülecek.

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!

Tünaydın

Kaç öğe içerdiğinden bağımsız olarak ana bloğun tüm genişliği boyunca uzanacak yatay bir menü yapmak genellikle gereklidir.

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 ve üzerine gelindiğinde öne çıkar. 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 div kapsayıcısı vardır. İlk, son veya ara menü öğesinin div olmasına bağlı olarak ilgili sınıf atanır.

Her div kabının, doğru görüntüleme için gerekli olan mutlak konumlandırmaya sahip 2 yan sınırı vardır. 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 öğede bir resim ve metin var. Tüm bunların tam olarak ortada dikey olarak hizalanmasını sağlamak için bir masa kullanıyoruz. Dikey hizalama özelliği sayesinde menü öğelerimiz her zaman sorunsuz bir şekilde görüntülenecek ve uzaklaşmayacaktır.

CSS KURALLARI

Öncelikle menünün genel görünümüne ilişkin stilleri ayarlayalım:

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 yuvarlayalım:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 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 noktanın sol sınırı yok. Biraz 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: none; z-index: 5000; ) /* fareyle üzerine gelindiğinde kenarlıkları çözecek */ .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 vurgulanan menü öğeleri için kenarlıklarımız yok. Hadi bunu 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; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: blok; ) /* durumlarını ele alın ilk ve son öğe */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: blok; )

Bu kadar!

Ana bloğun tüm genişliği boyunca uzanan mükemmel bir menümüz var! Fareyi üzerine getirdiğinizde öğeler birbiriyle örtüşmüyor ve düzen atlamıyor.

Seriye açılır menülerle ilgili bir dersle devam ediyoruz. Sırada css kullanarak 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'de yatay bir açılır menü açıklanacaktır.

Sayfada gezinme:

Bu yüzden, görevimiz:

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

kodda.

Açılır yatay menü html

Ö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ü çı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
- 1 numaralı hizmetimiz
- 2 numaralı hizmetimiz
- 3 numaralı hizmetimiz
- 4 numaralı hizmetimiz
- 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 stilleri olmadan nasıl göründüğü:

Kabul edelim, sıradan bir liste gibi çirkin görünüyor. Daha sonra bu menüyü CSS stillerini kullanarak dekore etmemiz gerekiyor.

CSS'de yatay açılır menü

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

Yatay bir 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 menü açılır listesi için stiller 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; genişlik: 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: vurgulu( arka plan:#FDDC96; renk:#6572BC; )

Artık bu kadar. Bırakma mekanizmasını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 nasıl çalıştığını gösteren bir demo ve ayrıca kaynakları indirmek için bir bağlantı bulunmaktadır. (Demo bu sayfanın üst kısmında bir açılır menü ile açılacaktır, yeni bir pencerede açmaya 🙂 veya fare tekerleğine tıklamanıza gerek yoktur)

Tam genişlikte yatay açılır menü

Çoğunuz yukarıda gösterdiğim menülerin geçmişten gelen bir merhaba olduğunu söyleyerek bana sitem edebilir, her ne kadar son zamanlarda bu tür menülerin olduğu düzenleri görsem de kısmen haklısınız.

Umarım yukarıdaki örneği indirmişsinizdir. Html'imiz aynı kalacak ancak 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ı izleyebilirsiniz.

#container( 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:son çocuk ul(/*son öğe sağ kenara eklenecek*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this 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; genişlik: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: vurgulu( arka plan: #FDDC96; renk:#6572BC; )

Bu örnek aynı zamanda açılır menünün, yani açılır menünün tüm menü öğelerinin genişliğine bağlı olarak genişlemesi açısından da ilkinden farklıdır.

Çok uzun menü öğeleri için bu seçenek sınırları aşacağından pek kullanışlı olmayabilir. Bu özelliği devre dışı bırakmak için "white-space:nowrap;" özelliğini bulmanız yeterlidir. #menu1 ul li ul seçicide ve onu silin.

Aşağıda bir demo izleyebilir veya yatay açılır menünün kaynakları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 bunları manuel olarak eklemek pek uygun değildir.

Bölücüler içeren yatay açılır menü

Saf CSS kullanarak menü öğeleri arasına şerit (ayırıcı) eklemek için birkaç düzine seçenek vardır. ::before veya::after kullanan seçenekleri veya daha basiti border-sol, border-right'ı kullanan seçenekleri kopyalamayacağım.

Düzenin o kadar harika oluşturulduğu durumlar vardır ki jquery olmadan yapamazsınız.

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

Hemen sonra .

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

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

Böyle bir menünün CSS stilleri olduğu gibi bırakılmalıdır, + bu parçayı sonuna ekleyin:

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

JQuery'de sınırlayıcıların bulunduğu yatay bir açılır menü şöyle görünecektir:

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

Bu çözümün avantajları şunlardır:

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

Yatay Çok Düzeyli Açılır Menü CSS+HTML

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 vip pad ile

üçüncü seviyedeki açılır açılır menüyle

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

Fareyle üzerine gelindiğinde kenar çubuğu bulunan çok düzeyli açılır menü

Öncelikle HTML'mizi biraz düzeltmemiz gerekiyor. 3. seviye için buraya birkaç satır eklenecek:

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

#container( 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ğ kenara eklenecektir*/ 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:oto; dolgu:7px 45px; genişlik:100%; kutu -boyutlandırma:border-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:hover > a( arka plan:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; arka plan:#fddc96; ) #menu1 > ul > li:son-çocuk > ul ul(sol:oto; sağ:100%;) #menu1 ul li ul li ul a(renk:#F38A01;)

JQuery için dosyaları önceki örnekteki gibi kopyalıyoruz. Menünün en azından biraz daha iyi görünmesi için bölücüleri bırakmaya karar verdim. Tabii ki onlar olmadan da yapabilirsiniz.

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

Aşağıda bir demoyu izleyebilir ve bir örnek indirebilirsiniz:

Fareyle üzerine gelindiğinde açılır pencerenin bulunduğu çok düzeyli açılır menü

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

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

HTML kodunu değiştirmeyeceğim; önceki örnekten alınabilir. Ayırıcıları da jQuery'de bırakıyoruz.

Yalnızca CSS tamamen değişecek:

#container( 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%; box- 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 öğede açılır menü için yer olmadığından tek nokta sitenin yeterli alana sahip olmasıdır. Bu sorun:nth-child kullanılarak çözülebilir, ancak ben uğraşmadım.

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

Fark etmiş olabileceğiniz gibi: alt kalıp da tam genişliktedir. Birkaç blok halinde düşüşler 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.

hem onlara hem de bana faydası olacak :)

Yazının 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 site aramasını kullanın.

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

Yatay menü, web sitesi bölümlerinin bir listesidir, bu nedenle onu öğenin içine yerleştirmek daha mantıklıdır

Varsayılan olarak, tüm liste öğeleri dikey olarak düzenlenir ve kap elemanının tüm genişliğini kaplar, bu da kap 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çinde yer alan yatay bir menü ayrıca ... ve/veya ... öğesinin içine yerleştirilebilir. Bu sayede html işaretlemesine anlamsal bir anlam verilir ve ayrıca menü bloğunun biçimlendirilmesi için ek bir fırsat sağlanır.

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'ye eşit olan üst ve alt kenar boşluğunu kaldır*/ padding-left: 0; /*40 piksele eşit olan sol dolguyu kaldır*/ ) a ( text-decoration: none; /*bağlantı metninin alt çizgisini kaldırın*/)

Liste öğelerini küçük harf haline getirme. Sonuç olarak, yatay olarak konumlandırılırlar ve aralarında sağ tarafa 0,4em'lik bir boşluk eklenir (yazı tipi boyutuna göre hesaplanır). Kaldırmak için li li (margin-right: -4px;) için negatif bir sağ kenar boşluğu ekleyin. Daha sonra linkleri istediğimiz gibi şekillendiriyoruz.

Liste öğelerinin kayan hale getirilmesi. Sonuç olarak yatay olarak konumlandırılırlar. Konteyner bloğu ul'nin yüksekliği sıfır olur. Bu sorunu çözmek için ul'a (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 yerleştirilmişler, ilk durumda olduğu gibi sağ tarafta bir boşluk oluşuyor. 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 liste öğeleri yatay olarak düzenlenir. Bağlantılar için bir (display:block;) ekliyoruz ve bunları istediğimiz gibi şekillendiriyoruz.

Bir site menüsü için oldukça yaygın bir düzen, içindeki kap sayfada bulunan tüm genişliği kapladığında. Bu durumda, ilk öğe sol kenara, sonuncusu sağa bitişiktir ve tüm öğeler arasındaki mesafe eşittir. Bugün size bunun nasıl yapıldığını anlatacağız.

Kaynağınız için CSS kullanarak kauçuk menü uygulama örneğini sunuyoruz. Bu menüde öğeler tek satırda yer alacaktır. Javascript kullanılmayacaktır. Menünün içeriği düzenli bir listeye eklenecektir. Böyle bir menünün temel özelliği, öğelerin hem sayısının hem de uzunluğunun herhangi biri olabileceği gerçeğiyle ifade edilen çok yönlülüğüdür.

Her programcı belirli bir sorunu çözmek için kendi yöntemini önerebilir. Her şey onun hayal gücüne, profesyonellik düzeyine ve yeteneklerine bağlıdır. Bu sorunun en yaygın çözümü tablo kullanmaktır. Ayrıca çoğu kişi javascript kullanmanızı önerir. Display özelliğini değer tablosu veya tablo hücresi ile birlikte kullanmayı önerenleri hayal kırıklığına uğratmak için acele ediyorum. Bu yöntem tarayıcılar arası yeterince uyumlu değildir.

Teklifimiz HTML5 ve CSS3 bilgisinden oluşan sağlam bir temel üzerine inşa edilecektir.

Sürecin özü, justify değeriyle birlikte text-align özelliğine dayanmaktadır. Unutanlar için şunu hatırlatayım: Bu özellik metin hizalamasını kabın tüm genişliği boyunca yönlendirir.

Çözümümüzü kullanırken iki zorunlu kurala uyulmalıdır. Birincisi, menü öğesi kabının genişliğinin metinden daha küçük olması gerektiğidir. Yani tek satırda değil. İkinci önemli kural ise kelimelerin aynı noktaya ait olup olmadığına bakılmaksızın eşit şekilde uzatılmasıdır.

Aşağıda kauçuk menü oluşturmaya örnek teşkil eden kod verilmiştir:

HTML

< ul> < li>< a href= "#" >Ev< li>< a href= "#" >Blog< li>< a href= "#" >Haberler< li>< a href= "#" >Popüler< li>< a href= "#" >Yeni öğeler

ul ( text- align: justify; overflow: gizli; /* yöntemin yan etkilerini ortadan kaldırır */ height: 20px; /* ayrıca gereksizleri de ortadan kaldırır */ imleç: varsayılan ; /* imlecin başlangıç şeklini ayarlar */ kenar boşluğu : 50px 100px 0 100px; arka plan: #eee; dolgu: 5px; ) li ( display: satır içi; /* menü öğelerini metin yapar */ ) li a ( display: satır içi blok; /* menüdeki sözcük sonlarını ortadan kaldırır */ color: #444; ) a : vurgulu ( color: #ff0000; ) ul: after ( /* yöntemi hesaplamak için ikinci satırı oluşturuyoruz */ content: "1" ; marj- left: 100 %; height: 1px; taşma: gizli; görüntüleme: satır içi blok; )

Eski güzel Internet Explorer'da çalışmak için aşağıdaki kodu CSS'ye ek olarak eklemelisiniz.

ul ( z- index: ifade(runtimeStyle.zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, ")< li class = "last" >")); ) ul .last ( sol kenar boşluğu: 100%; ) * html ul ( /* yalnızca ie6'ya ihtiyaç var */ height: 30px; )

Gerekli özellik değerlerini ve kodunu belirledikten sonra bu kauçuk menüyü alıyoruz:

Cilt kodu
Bir öğenin aktif durumunun bir sınıf seçici aracılığıyla belirlenememesi. Bu, paragraflardaki kelimelerin (varsa) kırılması nedeniyle oluşur. Bu sorunun çözümü liste elemanlarının içine başka bir kap eklemektir.
Açılır menü için taşmanın olumsuz etkisi nedeniyle kodu özelleştirmeniz gerekir.


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Fok

Ayrıca ilginç:

Ivan Franko Lviv Ulusal Üniversitesi (LNU): kabul, fakülteler ve incelemeler

Seçmeli ders “Olimpiyat Bilişim

Android v için Battleship'i indirin

Okumanızı öneririz:

2023-11-29 00:09:13

C fonksiyondan ana argümanları alır

2023-11-29 00:09:13

Bir gezegen uydusunun yörünge periyodu için bir ifadenin türetilmesi

2023-11-29 00:09:13

Otomatik sistemlerin bilgi güvenliği Bilgi güvenliği uzmanı kimdir

Konunun devamı:

internet

Coğrafi bilgi yöntemi sunumu

Konovalova N.V., Kapralov E.G. CBS'ye giriş. –M.: LLC “Biblion”, s. De Mers M., Coğrafi bilgi sistemleri. M.: “Veri+”, Korolev Yu.K. Genel jeoinformatik. -M.:...