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.
- Menü seçeneği
- Menü seçeneği
- Menü seçeneği ...
- menü için blok trim
- bir işaretleme listesi (ul etiketi) aracılığıyla görüntülenen menünün kendisi
- menü öğeleri ortada ve açıkçası, zaten bir mesaj var
- 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ü
- 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şliği, belki daha azını, ancak aynı zamanda maksimum geniş menü öğesinden daha fazlasını ayarlamak gerekir. Genişliği 1000 pikselden fazla olmak istemiyorsanız, genişliği otomatik olarak ayarlanan li menü öğesinin genişliğini ayarlayın ve ardından, öğe sayısı ne olursa olsun menü 100 piksel genişliğe ayarlanmalıdır.
- dikey hizalama: orta ve ekran: tablo hücresi - önce metni dikey olarak ortada ve diğerinde de metni ortada görüntülemeye çalışın. İktidara yönelik suçlar gereklidir.
- yazı tipi - bu sadece yazı tipi için bir dizi ayardır. Bu makaledeki yazı tipleri için css gücü hakkında bilgi edinin.
- menü dinamik olarak uzar;
- perakendeciden farklılık noktasına kadar adım atın;
- daha güzel süslenmiş o küçük tavşan.
- öldürmeyi hedeflerken bir vipadashkoy ile
- üçüncü eşit bir ekleme vapadka ile
- hacim kodu
- Sınıf seçici aracılığıyla öğenin aktif durumunu 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.
- Gördüğünüz menü için kodu negatif giriş taşması üzerinden geçirmeniz gerekiyor.
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
їsnuє kіlka їх yaymanın yolları yatay olarak. Koçanı için, gezinme öğelerine yönelik 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 yayılır, Sağ Taraf aralarına 0,4em olan fazladan bir boşluk eklenir (yazı tipi 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, listenin öğeleri yatay olarak istiflenir. Dodaёmo (ekran: blok;) göndermek ve bajan'ınız için stil vermek için.
1. Mesajın üzerine gelindiğinde hızlanma efektine sahip duyarlı menü
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Yoğunlaştırılmış"); .menu-main ( liste stili: yok; kenar boşluğu: 40 piksel 0 5 piksel; dolgu: 25 piksel 0 5 piksel; metin hizalama: merkez; arka plan: beyaz; ) .menu-main li (ekran: satır içi blok;) .menu- ana 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 (dolgu-top: 0;) .menu-main li (ekran: blok; ) .menu-main li:after (içerik: yok;) .menu-main 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 : 1 piksel; kenar-üst: 3 piksel katı #575350; kenar-alt: 1 piksel kesintisiz #575350; kenar-alt: 2 piksel; ) #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; görüntü: 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ü
@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ürme(360deg); z-endeksi: -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 lineer; ) .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 ( konum: mutlak; sol: %50; üst : %50; transform: translate(-50%,-50%); ) .menu-main a ( metin-dekorasyonu: yok; displayj: blok; ; harf aralığı: 2px; 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; clear: 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 (maks. 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;))Vitannia. Uzun zamandır html/css hakkında bir yazı yazmadım. Son zamanlarda yeni bir düzen oluşturmaya başlayan ve kullanılan süreçte cicavia priyom, gumovim menüsünü genişletmenize izin verir (yeniden önce yeni öğeler ekleyebilirsiniz ve genişleme artmaz, ancak Batkiv bloğunun% 100'ü olacaktır). 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 Croc - Tse Zavzhdi html düzeni onsuz nerede. Ale, bizim vipadkamızda her şey basit olacak:
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 display: table-row power'ı kapsayıcıya 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;
}
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:
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: alt, 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, onu uyarlamak gerekli değildir. Tercihim, gücü maksimum genişlik: 600 piksel olarak ayarlamaktır ve genişlik 600 pikselden azsa, blok ekranı takip edecek şekilde yeniden boyutlandırılarak yatay kaydırmayı önler.
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!
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:
robotik yatay menü css listesi (ul li listelerinde) olmadan jQuery wiki'si bu Javascript ve ayrıca 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.
Bununla bağlantılı olarak evrensel bir menü oluşturmak istiyoruz, bunu WordPress menüsünün görünümüne mümkün olduğunca benzer hale getirmek istiyorum. 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 olmadan 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-endeksi: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:none; width:100%; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; 100% box-sizing:border-box;border-top :1px düz #ffffff; ) #menu1 arkaplan:#FDDC96; renk:#6572BC;
Eksen şimdi u. Gerçekleşmelerdeki düşüşün mekanizması tek sıra halindedir.
Menüden dış görünüme 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ız gerekmiyor 🙂 veya çok fazla 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 maєte rasyonunuzun bir nevi parçasından aşılayacağı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; görüntü: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:otomatik; 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ü almak için "beyaz boşluk:nowrap" gücünü bilmek yeterlidir; seçici #menu1 ul li ul i yoga var.
Aşağıda demoya bakabilir veya yatay menünün görüntülerini alabilirsiniz:
Satıcılar olmadan menü böyle görünür. Html'de uzantıları elle ekleyebilirsiniz, ancak örneğin WordPress gibi bir CMS'niz varsa, 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çanın üzerindeki jQuery kitaplığının kendisine bağladık, o dosya, ki bu muzaffer bir dosya:
Bir Zamanlar.
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, yani + 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:
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:
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; görüntü: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:otomatik; 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 düz #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; görüntü: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: n 1; 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üşmekten çok utangaç.
Her şeye sahip olduğumdan eminim, senin için kıçımdan birini 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çilidir.
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 duruyor. Bugün size nasıl savaşılacağını anlatacağız.
Size uygulamanın kıçını öneriyoruz sakız menüsü de 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 yüzden bir düzine delinmesi bile 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 ışığına, profesyonellik ve zdibnosti'ye eşit olarak yerleştirmek. 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 tablo 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 sanırım: otorite metni kabın tüm 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, yalan söylemek için bir noktaya kadar eşit olarak çekilmesidir.
Aşağıda, "uğultu" menüsünün oluşturulmasının özü olan kod gösterimi bulunmaktadır:
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ünün 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; )
Yetkililerin gerekli değerlerini ve kodunu kaydettikten sonra, böyle bir menünün eksenini alıyoruz:
Yöntemin eksiklikleri
Hangi tarayıcılar çalışır?
tabletler
6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -
