Yatay menüyü tam genişliğe getirin. CSS ve Html Tam genişlik menüsünde kendin yap yatay menü

Golovna / Korisne PZ

Tünaydın!

Genellikle, yenideki nokta sayısına bağlı olarak, Batkiv bloğunun tüm genişliği boyunca bağımsız olarak uzanıyormuş gibi yatay bir menü oluşturmak gerekir.

Bugün size böyle bir menüyü kendim nasıl oluşturacağınızı göstermek istiyorum.

Otzhe, menümüz gelecek:

Tam genişliğe gerilir, üzerine gelindiğinde görünür. Menünün kenarlarından yuvarlanır.

HTML

...
Golovna
Tsіkavі haberleri
Başka bir menü öğesi!

Menüyü tam genişliğe genişletmek için %100 genişlikte tablolar oluşturdum. cilt masasında div menü öğesi kapsayıcısı. Nadas, ilk, son veya ara menü öğesi. div-Bir üst sınıfa atanacaksınız.

ciltte div kaplar є 2 bіchnі, doğru fermantasyon için gerektiği gibi mutlak konumlandırma ile sınırlar. Standart kenarlıkları değiştirmek istiyorsanız, menü öğelerini değiştirdiğinizde metin 1-2 piksel atlayacaktır, bu iyi değildir.

sınıf aktif Vіdpovіdaє yogo vydіlyає olan vibraniya menü öğesi için.

Cilt noktasında, bir resmimiz ve bir yazımız var. Böylece her şey dikey masa boyunca ortada döndü. Menü öğelerimizin dikey görünümünün otoritesinin liderleri her zaman eşit derecede doğru olacak ve gitmeyecektir.

CSS KURALLARI

Ana menü için stilleri sıraladık:

Menu_container ( üst dolgu: 40 piksel; genişlik: %100; yükseklik: 47 piksel; kenarlık aralığı: 0 piksel; ) .menu_container td ( dikey hizalama: orta; /* dikey hizalama */ ) .last_point_menu, u genişlik: %100; yükseklik: 47 piksel; kenarlık: 1px katı #dadbda; z-endeksi: 1000 pozisyon: göreceli; sol kenarlık: yok; ). ( dolgu: 0 piksel; dikey hizalama: orta; kenarlık: yok; metin hizalama: sol; genişlik: 150 piksel; sol doldurma: 4 piksel; ) .td.inner_table_title ( dolgu üstü: 4 piksel; yazı tipi ağırlığı: kalın; ) .td.inner_table_img ( genişlik: 40px!important; ) .inner_table_menu ( yükseklik: %100; dolgu: 0px; dikey hizalama: orta; kenarlık: yok; metin hizalama: sol; ) .inner_table_title ( pad1 dolgu-sağ: 10px ; metin dönüşümü: büyük harf; satır yüksekliği: 13 piksel; ) .inner_table_menu td.inner_table_img (genişlik: 30 piksel!important; yükseklik: 30 piksel!important; dolgu solu: 15 piksel; )

Renklendirme için menünün kenarlarından yuvarlatılmış köşeler:

First_point_menu( -webkit-border-top-sol-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; sınır-üst-sol-yarıçap: 5 piksel; kenar-alt-sol-yarıçap: 5 piksel; sağ kenar: 1 piksel katı #dadbda; -alt-sağ-yarıçap: 5 piksel;-moz-border-yarıçapı-topright: 5 piksel;- moz-border-radius-bottomright: 5px; ;)

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

İlk öğenin sol kenarlığı olmadığı sürece. Yogo mi vipravimo trohi zgodom.

Ve şimdi vurgulu efekt menüsü için dodamo yapalım.

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-kol: degrade(üst, #9FCE285); -image: -webkit-gradient(lineer, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); background-image: -webkit-linear -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-gradyan(alt, #CAE285, #9FCB56); kenarlık: 1 piksel katı #9FCB56; kenarlık rengi: # aec671 #9fbb62 #87ac4a; border-left: yok; z-index: 5000; .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; ( border: 1px solid #9FCB56; border-l eft: yok; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )

Şimdi menümüz daha zengin görünüyor, ancak şimdilik menü öğelerinin yanında herhangi bir kenarlığımız yok. Hadi doğru anlayalım!

/* beyaz kenarlıklar için stiller */ .borderLeftSecond, .borderRightSecond ( görüntü: yok; konum: mutlak; genişlik: 1 piksel; yükseklik: 47 piksel; arka plan rengi: #9fbb62; üst: 0 piksel; z-index: 1000; ) mutlak ses kenarlıklar için */ .borderLeftSecond ( sol: 0px; ) .borderRightSecond ( sağ: -1px; ) /* etkin ve üzerine gelinmiş kenarlıklar */ .active .borderLeftSecond, .active .borderRightSecond , .middle_point_menu:hover > .borderRightSecond fareyle üzerine gelin > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* ilk ve son noktanın üzerine gelin * ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .border (displayLeft .border) ; )

Ben hepinizden!

Harika bir menümüz var, onu Batkiv bloğunun tüm genişliğine kadar uzatın! Farenin üzerine gelindiğinde bire bir noktalar vurmuyor ve düzen zıplamıyor.

Sitenin menü düzeni şemasını genişletmek için, ondan gelen kap tüm genişliği kaplıyorsa, yan tarafta bulunur. Bununla, ilk nokta sol kenarda ve kalan nokta - sağda ve kenarın elemanları arasında durur. Bugün size nasıl savaşılacağını anlatacağız.

Size sakız menüsünün uygulanmasına bir örnek sunuyoruz. Yardım CSS'si kaynağınız için. Bu menü için öğeler bir satıra yerleştirilir. Javascript mevcut değil. Menüde harika bir liste için odalar olacak. Böyle bir menünün baş figürü, çok yönlülüktür, çünkü bir sayı olduğu gerçeğinde kendini gösterir, bu nedenle dozhina delinmesi olabilir.

Nasıl uygulanır?

Dış görünüm programcısı, belirlenen görevi yerine getirmenin kendi yolunu önerebilir. Her şeyi hayal gücünüzün ışığında, profesyonellik ve zdibnosti ile eşitlemek. Problemin en geniş versiyonu varyant tablosudur. JavaScript'i hızlandırmak isteyenler için de zengindir. Değerleri görüntülemek için gücü hızlandırmaya çağıran sessiz masa veya masa hücresi- Utandırmak için acele edeceğim. Bu yöntem, tarayıcılar arası yeterince uyumlu olamaz.

Bizim çözümümüz

Teklifimiz, derin bir HTML5 ve CSS3 bilgisine dayanacaktır.

Sürecin özü, değerleri doğrulamak için metin hizalamanın gücüdür. Unutanlar için tahminde bulunacağım: otorite metni kabın tam genişliğine göre yönlendiriyor.

Kararımızın seçimi ile iki obov'yazykovyh kuralı ekleyebiliriz. İlk şey, menü öğesi için kapsayıcının genişliğinin daha küçük, daha düşük metin olabilmesidir. Tobto bir satırda değil. Bir diğer önemli kural, kelimelerin birbirinden bağımsız olarak, bir noktaya kadar yalan söylemek için eşit olarak çekilmesidir.

Aşağıda, "uğultu" menüsünün oluşturulmasının özü olan kod gösterimi verilmiştir:

HTML

< ul> < li>< a href= "#" >Golovna < li>< a href= "#" >Blog < li>< a href= "#" >Novini < li>< a href= "#" >daha popüler < li>< a href= "#" >Yeni

ul (metin hizalama: yasla; taşma: gizli; /* yan enjeksiyonu metoda ayarla */ yükseklik: 20 piksel; /* tezh usuvaє zayve */ imleç: varsayılan; /* koçanı formunu imleç olarak ayarla */ kenar boşluğu: 50px 100px 0 100px; arka plan: #eee; dolgu: 5 piksel ) li (ekran: satır içi; /* menü öğelerini metinle çal */) li a (ekran: satır içi blok; /* menü satırı genişletmesini ayarla */ renk: #444; ) a: üzerine gelin ( renk: #ff0000; ) ul: sonra ( /* işleme yöntemi için başka bir satır şekillendirme */ içerik: "1"; sol kenar boşluğu: %100 yükseklik: 1 piksel; taşma: gizli; ekran: satır içi blok )

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

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 gerekir */ yükseklik: 30 piksel; )

Yetki ve kodun gerekli değerlerini kaydettikten sonra, aynı ekseni alıyoruz. sakız menüsü:

Yöntemin eksiklikleri

  1. Cilt kodu
  2. Elemanın aktif durumunu sınıf seçici aracılığıyla atamanın imkansızlığı. Paragraflarda rozryv aracılığıyla Tse vіdbuvaєtsya (yakscho bu bir). Sorunun çözümü, listenin öğelerine bir kapsayıcı daha eklemek olacaktır.
  3. Gördüğünüz menü için kodu negatif giriş taşması üzerinden geçirmeniz gerekiyor.

Hangi tarayıcılar çalışır?

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

Vitannia. Uzun zamandır html/css hakkında bir yazı yazmadım. Son zamanlarda, yeni bir düzen başlattıktan ve bu süreçte onu cicavia'da kullandıktan sonra, bir sakız menüsü oluşturmanıza izin verir (yenisinde, yeni öğeler ekleyebilirsiniz ve genişleme artmaz, ancak Batkiv bloğunun %100'ü). Ayrıca bugün css sakız menüsünde de uygulandı.

Makaleyi okumak kimin umurunda, videoya hayran kalabilirsiniz. Yazar ayrıca her şeyi çok güzel açıklıyor:

CSS'de sakız menüsü - krok 1

İlk adım, HTML işaretlemesini başlatmaktır, onsuz nerede olurdu. Ale, bizim vipadkamızda her şey basit olacak:

  1. menü için blok trim
  2. bir işaretleme listesi (ul etiketi) aracılığıyla görüntülenen menünün kendisi
  3. menü öğeleri ortada ve açıkçası, zaten bir mesaj var

Her şey açıktı, eksen benim için şu kod:



Her şeyin standart olduğunu görünce eksen şöyle:

Şimdi her şeyi gerekli görünüme getiriyoruz, robot için CSS alındı.

Krok 2 - temel stiller

Daha sonra obgortsa bloğuna stiller ekleyeceğim. Ve kendim için, maksimum genişliği 600 piksele ayarlayacağım (menünün sığması için manuel olarak bir ekran görüntüsü almak için) ve ayrıca bloğu ortalayacağım.

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

Krok 3 - gerçekçi hümanizm

Şimdi menünün kendisine. Yenisinden (ul etiketinden), işaretçileri kaldıracağım, arka plan doğrusal gradyanını artıracağım ve en önemlisi, menünün bir tablo satırı gibi davranması için kapsayıcıya display: table-row power ayarlayacağım . Uzak manipülasyonlar için yükseltmek önemlidir.

R-menüsü(
arka plan: doğrusal gradyan(sağa, #b0d4e3 %0, #88bacf %100);
görüntüleme:tablo satırı;
liste stili: yok;
}

Yak bachite, rehberlik kodu, hakkında yazdığım bir bıyıkla geçti. Bundan bahsetmişken, Ultimate CSS Gradient Generator aracını kullanarak degradeleri manuel olarak oluşturun. Yenisi hakkında daha fazla yazacağım.

R-menüsü li(
dikey hizalama: alt;
görüntüleme:tablo hücresi;
genişlik: otomatik;
metin hizalama: merkez;
yükseklik: 50 piksel;
sağ kenarlık: 1 piksel düz #222;
}

  • dikey hizalama: alt - öne çıkması için bu güce ihtiyaç vardır, böylece menü öğesinin metni 2 satır alacaktır ve eşit olarak görünecektir. Menüyü genişletirsek gücü görebilir, skalayı artırabilirsiniz, böylece noktalar sıkışır ve metin iki satıra aktarılır ve görüntüleme sorununu çözebilirsiniz. Gücü geri çevirin ve her şey yoluna girecek.
  • display: table-cell – menünün kendisini bir tablo satırı olarak görüntülenecek şekilde ayarladık, öğelerden birini tablo satırı olarak görüntülenecek şekilde ayarlamak mantıklı olacaktır. Obov'yazkovo.
  • genişlik: otomatik - genişlik, paragraftaki metnin uzunluğuna bağlı olarak otomatik olarak hesaplanır
  • text-align: center, metni ortada ortalamak içindir
  • yükseklik: 50 piksel - yüksekliği 50 piksele ayarlayın
  • peki, sınır-sağ sadece sağ elini kullanan bir sınırdır, noktalar için böyle bir bölücü

Menü göze çarpmayan ama hiçbir şey yok gibi görünse de, Yogo'yu macuna getirme zamanı geldi.

Kalan, sizin için gerekli olan - orta paragraflar için stilleri ayarlayın. İşte bu koda sahibim:

R-menüsü li bir (
metin-dekorasyon: yok;
genişlik: 1000 piksel
yükseklik: 50 piksel;
dikey hizalama: orta;
görüntüleme:tablo hücresi;
renk: #fff;
yazı tipi: normal 14 piksel Verdana;
}

І ekseni şimdi menü şöyle görünür:

Pekala, size söyleyeceğim, satırları açıklayacağım:

  • güç metin-dekorasyon skasovuє podkrelennya posilan, yak umovchannyam'ın arkasına koydu
  • genişlik: 1000 piksel - belki de en önemli satır. Yaklaşık olarak aynı genişlikte, belki daha az, ancak maksimum geniş menü öğesinden daha fazla bir genişlik ayarlamak gerekir. Genişliği 1000 piksele ayarlamak istemiyorsanız, genişliğin otomatik olarak ayarlandığı li menü öğesinin genişliğini ayarlayın, ardından menüdeki herhangi bir sayıda öğe için ayarlanabilmesi için izin verin. 100 piksel genişliğe kadar.
  • dikey hizalama: orta ve görüntü: tablo hücresi - önce metni ortada dikey olarak işler, diğerinde de metni ortada görüntüler. İktidara yönelik suçlar gereklidir.
  • yazı tipi - bu sadece yazı tipi için bir dizi ayardır. Hakkında okumak güç css Bu makalelerdeki yazı tipleri için.

Krok 4 (kulelerin arkasında) etkileşim eklenebilir

Örneğin, fareyle üzerine gelindiğinde bir menü öğesinin rengini değiştirmek için. Realizuєtsya tse daha basit, sözde sınıfın yardımı için.

R-menüsü li: üzerine gelin (
arka plan rengi: #6bba70;
}

Menüyü sakız için test etme

Aslına bakarsanız menü hazır, ama en aptalca şeyi fazla doğrulamadık - size söylediğim gibi mırıldanacağız. Peki, menüye 2 öğe daha ekleyeceğim:

Menü 600 piksel kenarlığını kaybetti. Kalan noktalar bir araya geldi, böylece 2 yenisi yerleştirildi.

1 nokta daha ekleyeceğim:

Aynen böyle, menü biraz değişti ve diğer öğe tamamen normal görünüyor. Ve yakby dikey hizalama gücüne sahip değildi: altta, yak hakkında, sana söylemiştim, menü daha iyi görünürdü.

Menüyü üç nokta olarak değiştireceğim.

Öğeler zenginleşti, ancak menünün genişliği değişmedi. Eksen mi ve zrobili %100 sakız menüsü!

Yogaya nasıl adapte olunur?

Prensipte, sarmalayıcı bloğu sabit değil, maksimum genişliğe ayarladığınızdan, uyarlamaya gerek yoktur. Tercihim, gücü maksimum genişlik: 600 piksel olarak ayarlamak ve genişlik 600 pikselden azsa, blok ekranı takip edecek şekilde yeniden boyutlandırılarak yatay kaydırmayı önleyecektir.

Bir şeyi değiştirmek veya menüyü değiştirmek istiyorsanız mobil müştemilatlar ama geniş ekranlarda medya size yardımcı olacaktır! Web sitesinde iyi şanslar!

Yatay Menüє site için bölümlerin listesi, öğenin ortasına yerleştirmek daha mantıklı

    , ve ardından yogo öğelerine CSS stilleri zasosuvat. Bu tür bir menü genişletmesi, web sitesindeki konumunda bariz ilerlemeler yoluyla en çok genişletilen şeydir.

    Yatay menü nasıl oluşturulur: düzen ve tasarım

    Yatay menü için HTML düzeni ve temel stiller

    Kilitleme için listenin tüm öğeleri yerleştirilir dikey olarak, kapsayıcı bloğunun tüm genişliğini kapsayan kapsayıcı öğesinin tüm genişliğini kapsar.

    Yatay gezinme için HTML işaretlemesi

    Etiketin ortasında görünen yatay bir menü, öğenin ortasına ek olarak yerleştirilebilir.

    herhangi biri
    ...
    . Bu html tanımanın nedeninin anlamsal bir duyum olması gerekiyordu ve aynı zamanda ek olasılık menü bloğunu biçimlendirmek için

    їsnuє kіlka їх yaymanın yolları yatay olarak. Koç için, gezinme öğeleri için promosyonlar için tarayıcı stillerini bırakmak gerekir:

    Ul ( liste stili: yok; /*liste işaretçilerini kaldır*/ kenar boşluğu: 0; /*üst ve alt kenar boşluğunu kaldır, eşit 1em*/ padding-left: 0; /*sol kenar boşluğunu kaldır, eşit 40 piksel*/ ) a ( metin dekorasyonu: yok; /*metin dekorasyonunu kaldır */)

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

    Robimo öğeleri listesi malimi. Sonuç olarak, koku yatay olarak genişler, aralarında sağ elini kullanana 0,4em olan bir boşluk verilir (yazı tipinin boyutuna göre hesaplanır). Yogayı kullanmak için, li için negatif sağ alanı li (sağ kenar boşluğu: -4px;) ekleyin. Vlasnym kuleleri için stilistik bir istekte bulunduk.

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

    Robimo öğeleri listesi yüzer. Sonuç olarak, koku yatay olarak yayılır. Blok kapsayıcı ul'nin yüksekliği sıfıra ayarlanır. Bu sorunu çözmek için, ul (overflow: hidden;) için ekleyin, onu genişletin ve kayan öğeler almasına izin verin. Mesaj için bir (display: block;) ekleyin ve bajan'ınız için stil verin.

    Seçenek 3. li (ekran: satır içi blok;)

    Robimo öğeleri satır bloğunu listeler. Koku yatay olarak dolaşıyor, sağ taraftan ilk damla gibi bir boşluk var. Mesaj için bir (display: block;) ekleyin ve bajan'ınız için stil verin.

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

    Ek bir model için esnek bir kap ile Robimo list ul. Sonuç olarak, liste öğeleri yatay olarak istiflenir. Dodaёmo bir (ekran: blok;) göndermek ve bajan'ınız için biçimlendirmek için.

    1. Mesajın üzerine gelindiğinde hızlanma efektine sahip duyarlı menü

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

    2. Eğlenceli bir site için duyarlı menü

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

    3. Deniz taraklı duyarlı menü

    • iş
    • Hakkında
    • Blog
    • İletişim
    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( liste stili: yok; dolgu: 0 30 piksel; kenar boşluğu: 0; yazı tipi boyutu: 18 piksel; metin hizalama: merkez; konum: göreceli; arka plan: beyaz; ) .menu-ana: sonra ( içerik: ""; konum: mutlak; genişlik: %100; yükseklik: 20 piksel; sol: 0; alt: -20 piksel; 255,255,255,0) %100) 0 -10 piksel; arka plan boyutu: 20 piksel 20 piksel; arka plan-tekrar: tekrar-x; ) . Yok; ekran: satır içi blok kenar boşluğu: 0 15 piksel; dolgu: 10 piksel 30 piksel; yazı tipi ailesi: "PT Sans Caption", sans-serif; -main a:before, .menu-main a:after ( içerik: ""; konum: mutlak; üst: hesap (%50 - 3 piksel); genişlik: 6 piksel; yükseklik: 6 piksel; #F58262; opaklık: 0; geçiş: .5s giriş-çıkış kolaylığı; ) . akım:önce, .menu-ana a.akım kira: sonra, . ) @media(max-width:680px) ( .menu-main li (ekran: blok;))

    4. Sayfadaki duyarlı menü

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

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

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

    6. Zliva logolu duyarlı menü

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( arka plan: rgba(255,255,255,.5); kutu gölgesi: 3px 0 7px rgba(0,0,0,.3); dolgu: 20px; ) .top-menu:sonra ( içerik: "" .display: tablo; temizle: her ikisi; ) .navbar-logo (ekran: satır içi blok;) . li (ekran: satır içi blok;) .menu-main a ( metin dekorasyonu: yok; ekran: blok; : 2 piksel; yazı tipi ailesi: "Arimo", sans-serif; yazı tipi ağırlığı: kalın; renk: #F73E24 ;geçiş:.3doğrusal; ) . yükseklik: 9 piksel;arka plan:#F73E24;konum: mutlak;sol:50%;dönüştürme: döndürme(45deg) translateX(6.5 piksel);opaklık:0;geçiş:.3s doğrusal; (opaklık: 1;) @media (maksimum genişlik: 660 piksel) ( .menu-main ( kayan nokta: yok; dolgu üstü: 20 piksel; ) .top-menü ( metin hizalama: merkez; dolgu: 20 piksel 0 0 0; ) .menu-main a (dolgu: 0 10px;) .menu-main a:be fore (dönüştürme: döndürme(45deg) translateX(-6px);) ) @media (maks-genişlik: 600px) ( .menu-main li (gösterge: blok;))

    Diziye, gördüklerinize menüler atama konusunda bir dersle devam ediyoruz. Yatay menüde, kendi ellerinizle css'de gördükleriniz.

    Yakshcho, burada bir vipadkovo'da içtiniz veya menünün uygulanması hakkında şaka yaptınız, gördüğünüz şey, raja Batkivsky şubesine gidin.

    Her bölüm, CSS ve HTML'de görünen yatay menünün bir açıklamasına sahip olacaktır.

    Yan gezinme:

    ben çok Görevimiz:

    olmadan css listesiyle (ul li listelerinde) yatay menü oluşturun jQuery wiki'si bu Javascript ve zastosuvannya tablosu olmadan

    kodunda.

    Gördüğünüz yatay menü

    Öndeyiz, kod yazmaya başlamadan önce çalışmamız gerekiyor html şablonu menü için.

    Tim, scho mi robimo evrensel menü ile bağlantıda, visnovok'a mümkün olduğunca benzer bir yogo oluşturmak istiyorum WordPress menüsü. Bence bu en basit ve evrensel Html menü kodlarından biridir. Şuna benziyor:

    Koddan da görebileceğiniz gibi, görebileceğiniz menümüz ul ve li listelerinde uygulanacaktır. Eksen, CSS stilleri olmayan bu menüye benziyor:

    Diyelim ki, ileriye bakarak harika bir liste gibi. Menüyü ek CSS stilleriyle dekore etmemizi sağladılar.

    CSS'ye düşen yatay menü

    Menü için CSS stilleri, görünenler değil, aslında daha fazlasına ihtiyaç var. Gördüğünüz yaş sekmesi, sözde sınıf temelinde savaşır: vurgulu.

    Gördüğünüz yatay menü için şöyle bir eksene ihtiyacımız var:

    #menu1( konum:göreli; görüntü:blok; genişlik:100%; yükseklik:oto; z-index:10; ) #menu1 ul( konum:göreli; görüntü:blok; kenar boşluğu:0px; dolgu:0px; genişlik:100 %;height:auto;list-style:none;background:#F3A601; menu1 ul li( konum:göreli; görüntü:blok; kayan nokta:sol; genişlik:oto; yükseklik:oto; ) #menu1 ul li a( görüntü: blok; dolgu:9px 25px 0px 25px; font-size:14px; font- family:Arial, sans-serif;color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text -transform:uppercase;height:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

    Bu son değil, ana yatay menü için CSS'nin yalnızca bir parçası. Menü listesi için stiller yazalım:

    #menu1 ul li ul(konum:mutlak; üst:36px; sol:0px; ekran:yok; genişlik:200px; arka plan:#EBBD5B; ) #menu1 ul li:hover ul(ekran:blok;) vurgulu mekanizma*/ # menu1 ul li ul li(float:yok; genişlik:100%; ) #menu1 ul li ul li(ekran:blok; metin dönüşümü:yok; yükseklik:oto; %100 kutu boyutlandırma:sınır-kutusu;kenarlık üstü :1px düz #ffffff; ) #menu1 arkaplan:#FDDC96; renk:#6572BC;

    Eksen şimdi u. Gerçekleşmelerin azalmasının mekanizması tek sıra halindedir.

    Menüden cilde bakın:

    Pirinç. 2 (yatay menü, gördükleriniz)

    Aşağıda, robotik açılır menünün bir demo incelemesi ve bir tatil kiralama talebi bulunmaktadır. (Demo orta tarafın üstünde oynanacak, yeni pencerede aç tuşuna basmanıza gerek yok 🙂 yoksa bir sürü ayı var)

    Tam genişliğe düşen yatay menü

    Çoğunuz bana daha az şey söyleyebilir, bu tür menüler dedikten sonra, sanki daha fazlasını göstermişim gibi, bu tür menülerle taze mizanpajlar yazmak istersem geçmişten ve bir nevi maєte rasyonunuzun bir parçası olacağım.

    Sanırım, popodan faydalandın. Html değişmeden kalır ve CSS eksenini tekrar hatırlarız. Buradan CSS kodunu alıp popoya yapıştırabilir veya demo modunda çalıştığını görebilirsiniz.

    #conteiner( genişlik:1000 piksel; yükseklik:oto; kenar boşluğu:0 piksel otomatik; dolgu-üst:10 piksel; ) #menu1( konum:göreli; ekran:blok; genişlik:100%; yükseklik:oto; z-endeksi:10; ) #menu1 ul( konum:göreceli; görüntü:blok; kenar boşluğu:0px; dolgu:0px; genişlik:%100; yükseklik:oto; liste stili:yok; arkaplan:#F3A601; ) #menu1 > ul( metin hizalama: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height: 1.3em;text-decoration:none;font-weight:bold;text-transform:büyük harf; :border-box; ) #menu1 ul li > a:hover; :0 piksel; görüntü yok; genişlik:otomatik; arka plan:#EBBD5B; boşluk:nowrap; ) #menu1 ul li:last-child ul(/*son öğe sağa yapıştırılacaktır*/ left:auto; right:0px; ) açılır liste*/ #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li(ekran:blok; metin-dönüşümü:yok; yükseklik:oto; kutu-boyutlandırma:kenarlık-kutusu;kenarlık-üst:1px katı #ffffff;) #menu1 #FDDC96; renk:#6572BC;

    Ayrıca, bu popo ilk kez, düştüğünüz menünün, düşüşün kendisinin, tüm menü öğelerinin genişliğinden nadasta uzandığı gibi görünüyor.

    Diğer menü öğeleri için bu seçenek daha uygun olmayabilir, çünkü koku sınır dışı olacaktır. Gücü çıkarmak için "beyaz boşluk:nowrap" gücünü bilmek yeterlidir; seçici #menu1 ul li ul yoga var.

    Aşağıda demoya bakabilir veya yatay menünün görünümlerini alabilirsiniz:

    Perakendeciler olmadan menü böyle görünür. Html'de uzantıları elle ekleyebilirsiniz, ancak bir CMS'niz varsa, örneğin WordPress, oraya manuel olarak ekleyemezsiniz.

    Perakendeciler ile yatay menü

    gibi onlarca seçenek var saf CSS menü öğeleri arasına bir koca (rozdіlyuvach) ekleyin. Twisting::before veya::after gibi seçenekler, aksi takdirde sol kenarlık, sağ kenarlık çoğaltmayacağım.

    Düzen o kadar harikaysa, jquery olmadan yapamayacağınız durumlar vardır.

    Bir sürü html kodumuz var, onu sadece koçun üzerindeki jQuery kitaplığına bağladık, o dosya, ki bu muzaffer bir dosya:

    Hemen sonra.

    Anladığınız gibi, bir dosya oluşturmak gerekiyor script-menu-3.js ve bu küçük kodu girin:

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

    Böyle bir menü için CSS stillerinin dışarıda bırakılması gerekir, bu parçanın eksenini + sonuna kadar atın:

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

    Böyle bir yatay menüye jQuery'de seçeneklerle bakmak için eksen şöyle olacaktır:

    Demoya göz atabilir veya aşağıdaki yatay menü şablonunu alabilirsiniz:

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

    • menü dinamik olarak uzar;
    • perakendeciden farklılık noktasına kadar adım atın;
    • o küçük tavşan daha güzel dekore edilmiş.

    Yatay Baghatorivneve CSS+HTML Menüsü

    Bugatorivne ile ilgili olduğu için, fareyle üzerine gelindiğinde menü kaybolur, tek tek varto onları alt gruplara ayırır:

    1. öldürmeyi hedeflerken bir vipadashkoy ile
    2. üçüncü eşit bir ekleme vapadka ile

    kıçımda gösterdiğim bagatorivneve menüsü CSS for 3 eşittir, ne yapılması gerektiğini anlamanın zor olmayacağını düşünüyorum.

    Fareyle üzerine geldiğinizde kitapta bir kısayol bulunan Bagatorivneve menüsü

    Koçanı için, html'mizi biraz değiştirmemiz gerekiyor. Orada 3. sıra için birkaç satır alacaksınız:

    #conteiner( genişlik:1000 piksel; yükseklik:oto; kenar boşluğu:0 piksel otomatik; dolgu-üst:10 piksel; ) #menu1( konum:göreli; ekran:blok; genişlik:100%; yükseklik:oto; z-endeksi:10; ) #menu1 ul( konum:göreceli; görüntü:blok; kenar boşluğu:0px; dolgu:0px; genişlik:%100; yükseklik:oto; liste stili:yok; arkaplan:#F3A601; ) #menu1 > ul( metin hizalama: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a ( display:block; padding:9px 45px 0px 45px; em;text-decoration:none;font-weight:bold;text-transform:büyük harf;height:36px;box-sizing:border-box;) #menu1 ul li ( arka plan: #EBBD5B; color:#2B45E0; ) #menu1 ul li ul( konum:mutlak; üst:36px; sol:0px; ekran:yok; genişlik:oto; arkaplan:#EBBD5B; beyaz boşluk:nowrap; ) # menu1 > ul > li:last-child > ul(/*son öğe sağ kenardaki ekler*/ left:auto; sağ:0 piksel; ) #menu1 ul li:hover > ul(display:block;)/*bu satır vurgulu mekanizmayı uygular*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display : blok; metin dönüşümü: yok; yükseklik: otomatik; dolgu: 7 piksel 45 piksel; genişlik: %100; kutu boyutlandırma: kenarlık kutu Kenarlık üstü: 1 piksel katı #ffffff; ) a( arka plan:#FDDC96; renk:# 6572BC ; ) #menu1 ul li ul li ul( üst:0px; > ul ul(sol:oto; sağ:100%;) #menu1

    jQuery dosyaları ön uçtan alınmış gibi kopyalanır. Vyrishiv, menünün biraz daha iyi görünmesi için perakendecileri dışarıda bıraktı. Tabii ki, onlarsız da yapabilirsiniz.

    Eksen şöyle görünüyordu:
    Sağlak ve ortada nasıl göründüğümü göstermek için bir arada 2 dış görünüm oluşturdum.

    Aşağıda demoyu görebilir ve hisse senedini indirebilirsiniz:

    Fareyle üzerine gelindiğinde açılan bir açılır menüyle görünen zengin bir menü

    Troch yağı başlığa dahil edilmedi, ancak smut kodunu değiştirdi.

    Bu poponun özü, tam genişliğe düşen ve tam genişlik + zenginliğe düşen yatay bir menünün oluşturulmasıdır.

    Ben html kodunu değiştirmeyeceğim, ön popodan alabilirsiniz. JQuery'deki Razdіlyuvachi de bunalmış durumda.

    Yalnızca CSS'yi tekrar tekrar değiştirin:

    #conteiner( genişlik:1000 piksel; yükseklik:oto; kenar boşluğu:0 piksel otomatik; dolgu-üst:10 piksel; ) #menu1( konum:göreli; ekran:blok; genişlik:100%; yükseklik:oto; z-endeksi:10; ) #menu1 ul( konum:göreceli; görüntü:blok; kenar boşluğu:0px; dolgu:0px; genişlik:%100; yükseklik:oto; liste stili:yok; arkaplan:#F3A601; ) #menu1 > ul( metin hizalama: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 > ul > li(position:static;) :28px;width:1px;background:#ffffff;margin-top:4px;) # menu1 ul li a(display:block;padding:9px 45px serif; color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text-transform:büyük harf;height:36px; a :hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul(konum:mutlak; üst:36px; sol:0px; ekran:yok; genişlik:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:no ne;genişlik:%100; yükseklik:0 piksel; içerik:" "; ) #menu1 :blok; genişlik: %30; yüzer: sol; ) #menu1 ul li ul li a( display:block; -box ; color:#6572BC; ;block;float:none;genişlik:100%;) #menu1

    Menünün ekseni şöyle görünecektir: Tek an - site yeterli alan olabilir, bu nedenle sağdaki uç nokta için boşluk yoktur. Bu sorun şu şekilde çözülebilir: nth-child, ama şehri çitle çevirmeyeceğim.

    Yatay menü çubuğunun demosuna bakın:

    Hatırlayabileceğiniz gibi: alt plaka da tam genişliktedir. Eksen, blokların çaçasında düşmeye çok utangaç.

    Hepsine varım, eminim, kıçımdan birini senin için istiyorum. Saygı için teşekkürler.

    Melankoli ve їm getir, ve beni 🙂.

    Yazıyı baştan sona okuduysanız ancak yatay menünüzü nasıl oluşturacağınızı bilmiyorsanız, css'de neler görebiliyorsanız, yorumlarda yiyecekleri ayarlayın veya sitede hızlıca arama yapın.

    Yani, raca baba tarafını görüyor https://website/vypadayushhee-menu/, tüm uygulamalı ve farklı menüler seçilmiştir.

    editör seçimi

    © 2022 androidas.ru - Android hakkında her şey