Stretch menü a css teljes szélességére. Hogyan készítsünk rugalmas, adaptív menüt a css-ben? HTML jelölés és alapstílusok a vízszintes menükhöz

A webhelymenü meglehetősen gyakori elrendezése, amikor a vele ellátott tároló az oldalon elérhető teljes szélességet elfoglalja. Ebben az esetben az első elem szomszédos a bal széllel, az utolsó pedig jobbra, és az összes elem közötti távolság egyenlő. Ma elmondjuk, hogyan történik ez.

Kínálunk egy példát arra, hogyan lehet a folyékony menüt megvalósítani az erőforrás CSS használatával. Ebben a menüben az elemek egy sorban helyezkednek el. A Javascript nem használható. A menü tartalma rendszeres listába kerül. Az ilyen menü fő jellemzője a sokoldalúság, amely abban nyilvánul meg, hogy az elemek száma és hossza egyaránt tetszőleges lehet.

Hogyan lehet ezt megvalósítani?

Minden programozó felajánlhatja a maga módját a probléma megoldására. Minden a képzeletén, a profizmus szintjén és képességein múlik. A probléma leggyakoribb megoldása a táblázat használata. Továbbá sokan javasolják a javascript használatát. Akik javasolják a display tulajdonság használatát az értékkel asztal vagy táblázat-cella- sietek idegesíteni. Ez a módszer nem eléggé kompatibilis a böngészők között.

Megoldásunk

Javaslatunk a HTML5 és CSS3 ismeretek szilárd alapjaira épül.

A folyamat lényege a text-align tulajdonságon alapszik, igazolási értékkel. Azok számára, akik elfelejtették - emlékeztetlek: ez a tulajdonság a szöveg igazítását a tároló teljes szélességében irányítja.

Két alapvető szabályt kell betartani megoldásunk használata során. Az első az, hogy a menüpont-tároló szélességének kisebbnek kell lennie, mint a szöveg. Vagyis nem egy sorban. A második fontos szabály, hogy a szavak egyformán nyúlnak, függetlenül attól, hogy ugyanahhoz a ponthoz tartoznak-e vagy sem.

Az alábbiakban látható a kód, amely példaként szolgál a "gumi" menü létrehozására:

Html

< ul> < li>< a href= "#" >a fő < li>< a href= "#" >Blog < li>< a href= "#" >hírek < li>< a href= "#" >Népszerű < li>< a href= "#" >Uj tetelek

ul (text-align: igazol; túlcsordulás: rejtett; / * eltávolítja a módszer mellékhatásait * / magasság: 20px; / * eltávolítja a feleslegeseket is * / kurzor: alapértelmezett; / * beállítja az eredeti kurzor alakját * ​​/ margó: 50px 100px0100px; háttér: #eee; párnázás: 5px; ) li (kijelző: sorban; / * a menüpontokat szövegessé teszi * /) li a (kijelző: inline- blokk; / * javítsa a szó törését a menüben * / szín: # 444; ) a: lebeg (szín: # ff0000;) ul: after ( / * a második sor kialakítása a módszer kidolgozásához * / tartalom: "1"; margó bal: 100%; magasság: 1px; túlcsordulás: rejtett; kijelző: inline- blokk; )

A régi jó Internet Explowerernél való munkavégzéshez hozzá kell adnia a következő kódot a CSS-hez

ul (z- index: kifejezés (runtimeStyle. zIndex = 1, insertAdjacentHTML ("beforeEnd & apos,"< li class = "last" > "));) ul. utolsó (margó balra: 100%;) * html ul (/ * csak ie6 szükséges * / magasság: 30px;)

A szükséges tulajdonságértékek és kód regisztrálása után a következő gumimenüt kapjuk:

A módszer hátrányai

1. Tömeges kód
2. Képtelen meghatározni egy elem aktív állapotát osztályválasztóval. Ennek oka a bekezdésekben szereplő szavak törése (ha az egy). A probléma megoldása egy másik tároló hozzáadása a listaelemekhez.
3. A legördülő menüben testre kell szabnia a kódot a túlcsordulás negatív hatása miatt.

Milyen böngészőkben működik?

Vízszintes menü a helyszekciók listája, ezért logikusabb az elemen belül megjelölni

majd alkalmazza a CSS stílusokat az elemeire. A menü ezen elrendezése a leggyakoribb, mivel a weblapon való elhelyezésének nyilvánvaló előnyei vannak.

Hogyan készítsünk vízszintes menüt: jelölések és tervezési példák

HTML jelölés és alapstílusok a vízszintes menükhöz

Alapértelmezés szerint az összes listaelem pozícionálva van függőlegesen, elfoglalva a konténerelem teljes szélességét szélességben, ami viszont elfoglalja a konténerblokk teljes szélességét.

HTML jelölés a vízszintes navigációhoz

• Menü tétel
• Menü tétel
• Menü tétel
...

A címkén belül vízszintes menü opcionálisan elhelyezhető egy elem belsejében

és / vagy
...
... Ennek köszönhetően szemantikai jelentést kap a html-markup, és további lehetőség nyílik a menüblokk formázására is.

Számos módon lehet elhelyezni őket. vízszintesen... Először vissza kell állítania a navigációs elemek alapértelmezett böngészőstílusait:

Ul (liststílus: nincs; / * listamarkerek eltávolítása * / margó: 0; / * 1em-rel egyenlő felső és alsó margó eltávolítása * / bal oldali párnázás: 0; / * 40 képpontos bal oldali margó eltávolítása * /) a ( szöveg-dekoráció: nincs; / * távolítsa el a link szövegének aláhúzását * /)

1.li módszer (megjelenítés: sorban;)

A listaelemek kisbetűvé tétele. Ennek eredményeként vízszintesen helyezkednek el, a jobb oldalon közöttük 0,4em-es rés (hozzáadva a betűmérethez). Eltávolításához adjon negatív jobb margót li (margó-jobb: -4px;) a li számára. Ezután stílusozzuk a linkeket, ahogy szeretnénk.

2.li módszer (úszó: bal;)

A listaelemek lebegtetése. Ennek eredményeként vízszintesen vannak elhelyezve. Az ul tartályblokk magassága nulla lesz. A probléma megoldása érdekében hozzáadjuk (overflow: hidden;) az ul-hoz, kibővítve azt, és lehetővé téve, hogy lebegő elemeket tartalmazza. A linkekhez adjon hozzá egy (display: block;) elemet, és stílusozza őket tetszés szerint.

A 3.li módszer (kijelző: inline-block;)

A lista elemeit inline-block formává tesszük. Vízszintesen helyezkednek el, a jobb oldalon rés képződik, mint az első esetben. A linkekhez adjon hozzá egy (display: block;) elemet, és stílusozza őket tetszés szerint.

4.ul módszer (kijelző: flex;)

Az ul rugalmas tárolóvá tétele modell segítségével. Ennek eredményeként a listaelemek vízszintesen vannak elrendezve. Adjon hozzá egy (display: block;) linket a linkekhez, és formázza őket tetszés szerint.

1. Válaszoló menü aláhúzással, ha egy link fölé viszi az egeret

• Munka
• Ról ről
• Blog
• Kapcsolatba lépni
@import url ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (liststílus: nincs; margó: 40px 0 5px; kitöltés: 25px 0 5px; kitöltés: közép; háttér: fehér;) .menu-main li (kijelzés: inline-block;) .menu- main li: after (content: "|"; color: # 606060; display: inline-block; vertical-align: top;). menu-main li: last-child: after (tartalom: nincs;). menu-main a (szövegdekoráció: nincs; font-család: "Ubuntu Condensed", sans-serif; betűköz: 2px; pozíció: relatív; padding-bottom: 20px; margó: 0 34px 0 30px; betűméret: 17px; text-transform: nagybetű; display: inline-block; átmenet: color .2s;) .menu-main a, .menu-main a: meglátogatott (color: # 9d999d;) .menu-main a.current, .menu- main a: lebeg (szín: # feb386;). menu-main a: before, .menu-main a: after (tartalom: ""; pozíció: abszolút; magasság: 4px; fent: automatikus; jobb: 50%; lent : -5px; bal: 50%; háttér: # feb386; átmenet: .8s;) .menu-main a: lebeg: előtte, .menu-main .current: előtt (balra: 0;) .menu-main a: lebeg: után, .menu-main .current: után (jobbra: 0; ) @media (max-width: 550px) (.menu-main (padding-top: 0;) .menu-main li (kijelző: blokk;) .menu-main li: after (tartalom: nincs;) .menu- fő a (kitöltés: 25px 0 20px; margó: 0 30px; ))

2. Reszponzív menü az esküvő helyszínére

@import url ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (pozíció: relatív; háttér: #fff; box-shadow: beszúrás 0 0 10px #ccc;) .top-menu: before, .top-menu: after (content: ""; display: block; height : 1px; border-top: 3px solid # 575350; border-bottom: 1px solid # 575350; margin-bottom: 2px;). Top-menu: after (határ-alsó: 3 képpontos szilárd # 575350; határ-felső: 1 képpont szilárd # 575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px;) .menu-main (list-style: none; kitöltés: 0 30px; margin: 0; font-size: 18px; text-align: center; pozíció: relatív;) .menü-main: before, .menu-main: after (tartalom: "\ 25C8"; vonal-magasság: 1; pozíció: abszolút; felső: 50%; transzformáció: fordításY (-50% );) .menü-main: előtte (balra: 15px;) .menü-main: utána (jobbra: 15px;) .menü-main li (kijelző: inline-block; kitöltés: 5px 0;) .menü-main a (szövegdekoráció: nincs; kijelző: inline-block; margó: 2px 5px; kitöltés: 6px 15px; betét-család: "PT Sans", sans-serif; betűméret: 16px; szín: # 777777; border-bottom : 1px szilárd átlátszó; transitio n: 3 s lineáris; ) .menu-main .current, .menu-main a: lebeg (határ-sugár: 3px; háttér: # f3ece1; szín: # 313131; text-shadow: 0 1px 0 #fff; border-color: # c6c6c6;) @media (max-width: 500px) (.menu-main li (display: block;))

3. Adaptív menü fésűkagylóval

• Munka
• Ról ről
• Blog
• Kapcsolatba lépni
@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (liststílus: nincs; kitöltés: 0 30 képpont; margó: 0; betűméret: 18 kép; szöveg-igazítás: közép; pozíció: viszonylagos; háttér: fehér;). menü-fő: után (tartalom: ""; pozíció: abszolút; szélesség: 100%; magasság: 20px; bal: 0; alsó: -20px; háttér: sugárirányú gradiens (fehér 0%, fehér 70%, rgba (255,255,255,0) 70%, rgba ( 255,255,255,0) 100%) 0 -10px; háttérméret: 20px 20px; háttérismétlés: ismétlés-x;) .menu-main li (kijelző: inline-block;) .menu-main a (szövegdekoráció: nincs; kijelző: inline-block; margó: 0 15px; kitöltés: 10px 30px; font-család: "PT Sans Caption", sans-serif; color: # 777777; átmenet: .3s lineáris; pozíció: relatív;) .menü -main a: before, .menu-main a: after (tartalom: ""; pozíció: abszolút; felső: calc (50% - 3px); szélesség: 6px; magasság: 6px; határsugár: 50%; háttér: # F58262; átlátszatlanság: 0; átmenet: .5s könnyebb ki-be;) .menu-main a: előtt (balra: 5px;) .menü-main a: után (jobbra: 5px;) .menü-main a. aktuális: korábban, .menu-main a.cur rent: after, .menu-main a: hover: before, .menu-main a: hover: after (átlátszatlanság: 1;) .menu-main a. áram, .menu-main a: lebeg (szín: # F58262; ) @media (max. szélesség: 680 képpont) (.menu-main li (kijelző: blokk;))

4. Reagáló menü a szalagon

@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu (margó: 0 60px; pozíció: relatív; háttér: # 5A394E; box-shadow: beszúrás 1px 0 0 rgba (255,255,255, .1), beillesztés -1px 0 0 rgba (255,255,255, .1), beszúrás 150px 0 150px -150px rgba (255,255,255, .12), beillesztés -150px 0 150px -150px rgba (255,255,255, .12);). Top-menu: before, .top-menu: after (content: ""; position: Absolute ; z-index: 2; bal: 0; szélesség: 100%; magasság: 3 kép;). felső menü: előtte (felső: 0; szegély-alsó: 1 kép szaggatott szaggatott rgba (255 255 255, .2);). top- menü: után (alul: 0; border-top: 1px szaggatott rgba (255,255,255, .2);) .menü-main (list-stílus: nincs; kitöltés: 0; margó: 0; szöveg-igazítás: közép;). menu-main: before, .menu-main: after (tartalom: ""; pozíció: abszolút; szélesség: 50 képpont; magasság: 0; felső: 8 képpont; szegély-felső: 18 képpont szilárd # 5A394E; szegély-alsó: 18 képpont tömör # 5A394E; transzformáció: forgatás (360deg); z-index: -1;). Main-main: előtte (balra: -30px; balra-balra: 12px szilárd rgba (255, 255, 255, 0);) .menü main: after (jobb: -30px; border-right: 12px solid rgba (2 55, 255, 255, 0); ) .menu-main li (display: inline-block; jobb-margin: -4px;) .menu-main a (text-decoration: none; display: inline-block; kitöltés: 15px 30px; font-family: "PT Sans Caption ", sans-serif; szín: fehér; átmenet: .3s lineáris;) .menü-fő a.áram, .menu-fő a: lebeg (háttér: rgba (0,0,0, .2);) @media (max-width: 680px) (.top-menu (margó: 0;) .menu-main li (kijelző: blokk; margó-jobb: 0;) .menu-main: előtte, .menu-main: után (tartalom: nincs;). menu-main a (display: blokk;))

5. Reszponzív menü, középen logóval

@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozíció: relatív; háttér: rgba (34,34,34, .2);) .menu-main (liststílus: nincs; margó: 0; kitöltés: 0;). menu-main: után (tartalom: ""; kijelző: táblázat; törlés: mindkettő;). bal oldali elem (lebeg: bal;). jobb elem (lebeg: jobb;). navigációs logó (pozíció: abszolút; bal: 50%; felső : 50%; transzformáció: fordítás (-50%, - 50%);). A menu-main a (szövegdekoráció: nincs; kijelző: blokk; vonalmagasság: 80 képpont; kitöltés: 0 20 képpont; betűméret: 18 képpont) ; betűköz: 2px; font-family: "Arimo", sans-serif; font-weight: bold; szín: fehér; átmenet: .3s lineáris;) .menü-main a: lebeg (háttér: rgba (0, 0,0, .3);) @media (max-szélesség: 830px) (.menu-main (padding-top: 90px; text-align: center;). Navbar-logo (pozíció: abszolút; bal: 50% ; top: 10px; transform: translateX (-50%);) .menu-main li (float: none; display: inline-block;) .menu-main a (line-height: normal; kitöltés: 20px 15px; font -méret: 16px;)) @media (max. szélesség: 630px) (.menu-main li (display: block;))

6. Bal oldali logóval ellátott adaptív menü

@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (háttér: rgba (255,255,255, .5); box-shadow: 3px 0 7px rgba (0,0,0, .3); kitöltés: 20px;) .top-menu: after (tartalom: "" ; display: table; clear: both;) .navbar-logo (display: inline-block;) .menu-main (list-style: none; margin: 0; padding: 0; float: right;) .menu-main li (display: inline-block;) .menu-main a (szövegdekoráció: none; display: block; pozíció: relatív; line-height: 61px; padding-left: 20px; font-size: 18px; betűköz : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: # F73E24; átmenet: .3s lineáris;) .menu-main a: before (tartalom: ""; szélesség: 9px; magasság: 9px; háttér: # F73E24; pozíció: abszolút; bal: 50%; transzformáció: forgatás (45deg) translateX (6,5px); átlátszatlanság: 0; átmenet: .3s lineáris;). menü-main a: lebeg: előtte (átlátszatlanság: 1;) @media (max. szélesség: 660 képpont) (.menu-main (float: nincs; padding-top: 20px;). top-menu (szöveg-igazítás: közép; kitöltés: 20px 0 0 0; ) .menu-main a (kitöltés: 0 10px;) .menu-main a: be elé (transzformáció: rotate (45deg) translateX (-6px);)) @media (max-width: 600px) (.menu-main li (display: block;))

Folytatjuk a sorozatot a legördülő menük bemutatójával. A következő lépés egy vízszintes legördülő menü css-ben saját kezűleg.

Ha véletlenül került ide, vagy a legördülő menü másik megvalósítását kereste, akkor azt tanácsolom, hogy keresse fel a szülő szakaszt.

Ez a szakasz leírja a vízszintes legördülő menüt CSS-ben és HTML-ben.

Oldal navigáció:

Így, feladatunk:

készítsen vízszintes menüt css legördülő menüvel (ul li listákon) a jQuery és a Javascript használata nélkül, valamint táblázatok nélkül

a kódban.

Legördülő vízszintes html menü

Először is, mielőtt elkezdenénk írni a kódot, létre kell hoznunk egy html sablont a menü számára.

Annak a ténynek köszönhetően, hogy univerzális menüt készítünk, szeretném, hogy a lehető legjobban hasonlítson a WordPress menü kimenetére. Véleményem szerint ez az egyik legegyszerűbb és legsokoldalúbb Html menü kód. Ez így néz ki:

Amint a kódból látható, legördülő menünk az ul és li listákon kerül végrehajtásra. Így néz ki ez a menü CSS-stílusok nélkül:

Mondjuk úgy, hogy csúnyán néz ki, mint egy szokásos lista. Ezután ezt a menüt kell színeznünk CSS stílusokkal.

CSS vízszintes legördülő menü

A legördülő menük CSS stílusai ugyanolyan alapvetőek, mint a levegő. Végül is a legördülő fül a: lebeg pszeudo osztályon alapszik.

A vízszintes legördülő menüben a következő stílusokra van szükségünk:

# menu1 (pozíció: relatív; kijelző: blokk; szélesség: 100%; magasság: automatikus; z-index: 10;) # menü1 ul (pozíció: relatív; kijelző: blokk; margó: 0 képpont; kitöltés: 0 kép; szélesség: 100 %; height: auto; list-style: none; background: # F3A601;) # menu1> ul :: after (display: block; width: 100%; height: 0px; clear: both; content: "";) # menu1 ul li (pozíció: relatív; display: blokk; float: bal; szélesség: auto; height: auto;) # menu1 ul li a (display: block; kitöltés: 9px 25px 0px 25px; font-size: 14px; font- család: Arial, sans-serif; szín: #ffffef; vonal-magasság: 1.3em; szövegdekoráció: nincs; betű-súly: félkövér; szöveg-átalakítás: nagybetű; magasság: 36px; dobozméret: határdoboz; ) # menu1 ul li> a: lebeg, # menu1 ul li: lebeg> a (háttér: # EBBD5B; szín: # 2B45E0;)

Ez nem a vége, hanem a vízszintes főmenü CSS-jének csak egy része. Ezután megírjuk a legördülő menü stílusait:

# menu1 ul li ul (pozíció: abszolút; felső: 36px; bal: 0px; kijelző: nincs; szélesség: 200px; háttér: # EBBD5B;) # menu1 ul li: lebegjen ul (kijelző: blokk;) / * ezt a sort hajtja végre drop mechanizmus * / # menu1 ul li ul li (float: nincs; szélesség: 100%;) # menu1 ul li ul li a a (display: blokk; text-transzformáció: none; magasság: auto; kitöltés: 7px 25px; szélesség: 100%; dobozméret: border-box; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child a (border-top: 0px;) # menu1 ul li ul li a: lebeg ( háttér: # FDDC96; szín: # 6572BC;)

Most ennyi. Maga a legördülő mechanizmus egy sorban valósul meg.

Lásd a bőrt ezzel a menüvel:

Ábra. 2 (vízszintes legördülő menü)

Az alábbiakban bemutatjuk a legördülő menü bemutató nézetét, valamint egy linket a források letöltésére. (A bemutató legördülő listaként nyílik meg az oldal tetején, nem kell új ablakban open vagy az egér görgőjére kattintania)

Teljes szélességű vízszintes legördülő menü

Legtöbben szemrehányást tehetnek nekem, azt mondják, az ilyen menük, amint azt fentebb bemutattam, a múlt üdvözletei és részben igazad van, bár találkoztam friss menükkel ilyen menükkel.

Remélem, hogy letöltötted a fenti példát. A HTML nem változik, de a CSS-t teljesen megváltoztatjuk. Csak vegye innen a CSS-kódot, és illessze be a letöltött példába, vagy nézze meg demó módban.

#conteiner (szélesség: 1000px; magasság: automatikus; margó: 0px automatikus; padding-top: 10px;) # menü1 (pozíció: relatív; kijelző: blokk; szélesség: 100%; magasság: automatikus; z-index: 10;) # menu1 ul (pozíció: relatív; kijelző: blokk; margó: 0 kép; kitöltés: 0 kép; szélesség: 100%; magasság: automatikus; lista-stílus: nincs; háttér: # F3A601;) # menü1> ul (szöveg-igazítás: igazolja; font-size: 1px; line-height: 1px;) # menu1> ul :: after (kijelző: inline-block; szélesség: 100%; magasság: 0px; tartalom: "";) # menu1 ul li (pozíció : relatív; kijelző: inline-blokk; szélesség: auto; magasság: auto; függőleges igazítás: felső; szöveg-igazítás: bal;) # menu1 ul li a (kijelző: blokk; kitöltés: 9px 35px 0px 35px; betűméret : 14px; font-family: Arial, sans-serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: nagybetű; magasság: 36px; doboz méretezése : border-box;) # menu1 ul li> a: lebeg, # menu1 ul li: lebeg> a (háttér: # EBBD5B; szín: # 2B45E0;) # menu1 ul li ul (pozíció: abszolút; felső: 36px; bal : 0px; kijelző: nincs; szélesség: auto; háttér: # EBBD5B; white-space: nowrap; ) # menu1 ul li: last-child ul (/ * az utolsó elem jobbra lesz csatolva * / left: auto; right: 0px;) # menu1 ul li: lebeg az ul (kijelző: block;) / * ez a sor végrehajtja a mechanizmus kieséseit * / # menu1 ul li ul li (kijelző: blokk; szélesség: automatikus;) # menu1 ul li ul li a (kijelző: blokk; szöveg-transzformáció: nincs; magasság: automatikus; kitöltés: 7 kép 35 kép; szélesség : 100%; dobozméret: border-box; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child a (border-top: 0px;) # menu1 ul li ul li a: lebeg (háttér: # FDDC96; szín: # 6572BC;)

Ez a példa abban is különbözik az elsőtől, hogy a legördülő menü, maga a legördülő menü az összes menüpont szélességétől függően húzódik.

Nagyon hosszú menüpontok esetén ez az opció nem biztos, hogy nagyon kényelmes, mert kimásznak a határokból. A tulajdonság letiltásához keresse meg a "white-space: nowrap;" tulajdonságot. a # menu1 ul li ul választónál, és távolítsa el.

Az alábbiakban megtekinthet egy bemutatót, vagy letöltheti a vízszintes legördülő menü forrásait:

Elválasztók nélkül ez a menü így néz ki. Az elválasztókat kézzel is hozzá lehet adni a html-hez, de ha van CMS-e, például WordPress, akkor kézzel hozzáadni nem túl kényelmes.

Elhatárolt vízszintes legördülő menü

Több tucat lehetőség kínálkozik arra, hogyan adhat hozzá sávot (elválasztót) a tiszta CSS menüpontjai közé. Változatok, amelyek a :: előtt vagy :: után, vagy sokkal egyszerűbb határ-bal oldalt használnak, nem fogom megismételni a határ-jobb oldalt.

Vannak olyan helyzetek, amikor az elrendezés olyan csodálatosan épül fel, hogy nem nélkülözheti a jqueryt.

A html kód ugyanaz marad, csak a legelején tartalmazzuk a jQuery könyvtárat és az azt használó fájlt:

Éppen utána.

Mint megértette, létre kell hoznia egy fájlt script-menu-3.jsés tedd oda ezt a kis kódot:

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

Egy ilyen menü CSS-stílusait úgy kell hagyni, ahogy vannak, + dobja a végére ezt a darabot:

# menu1 ul li.razd (magasság: 28px; szélesség: 1px; háttér: #ffffff; margin-top: 4px;)

Egy ilyen vízszintes legördülő menü elválasztókkal a jQuery-ben így fog kinézni:


Megtekintheti demó módban, vagy letöltheti az alábbi vízszintes menüsablont:

A megoldás előnyei:

• a menü dinamikusan fog húzódni;
• az elválasztótól a bekezdésig terjedő behúzások mindenhol ugyanazok;
• szebb és rugalmasabb kialakítás.

CSS + HTML vízszintes réteges legördülő menü

Mivel lebegő többszintű legördülő menükről beszélünk, valószínűleg érdemes alcsoportokra bontani őket:

1. vipadashkával, amikor oldalra lebeg
2. egy harmadik szintű legördülő menüvel

Példáimban bemutatok egy 3 szintes többszintű CSS menüt, majd úgy gondolom, hogy nem lesz nehéz kitalálni, hogy mit kell tenni.

Többszintű legördülő menü egy vipadash-szal az oldal tetején

Először kissé korrigálnunk kell a html-t. Pár sor hozzáadásra kerül a 3. szinthez:

#conteiner (szélesség: 1000px; magasság: automatikus; margó: 0px automatikus; padding-top: 10px;) # menü1 (pozíció: relatív; kijelző: blokk; szélesség: 100%; magasság: automatikus; z-index: 10;) # menu1 ul (pozíció: relatív; kijelző: blokk; margó: 0 kép; kitöltés: 0 kép; szélesség: 100%; magasság: automatikus; lista-stílus: nincs; háttér: # F3A601;) # menü1> ul (szöveg-igazítás: igazolja; font-size: 1px; line-height: 1px;) # menu1> ul :: after (kijelző: inline-block; szélesség: 100%; magasság: 0px; tartalom: "";) # menu1 ul li (pozíció : relatív; kijelző: inline-block; szélesség: auto; magasság: auto; vertical-align: top; text-align: bal;) # menu1 ul li.razd (magasság: 28px; szélesség: 1px; háttér: #ffffff; margin-top: 4px;) # menu1 ul li a (kijelző: blokk; kitöltés: 9 képpont 45 képpont, 0 képpont 45 képpont; betűméret: 14 képpont; betűtípus-család: Arial, sans-serif; szín: #ffffef; vonal-magasság: 1,3 em; text-decoration: none; font-weight: bold; text-transform: nagybetű; magasság: 36px; box-méretezés: border-box;) # menu1 ul li> a: lebeg, # menu1 ul li: hover> a (háttér: # EBBD5B; szín: # 2B45E0; ) # menu1 ul li ul (pozíció: abszolút; felső: 36 kép; bal: 0 kép; kijelző: nincs; szélesség: automatikus; háttér: # EBBD5B; white-space: nowrap;) # menu1> ul> li: last-child> ul (/ * az utolsó elem jobbra lesz csatolva * / balra: auto; jobbra: 0px;) # menü1 ul li: lebegés> ul (kijelző: blokk;) / * ez a sor hajtja végre a lemorzsolódás mechanizmusát * / # menu1 ul li ul li (kijelző: blokk; szélesség: automatikus;) # menu1 ul li ul li a (kijelző: blokk; szöveg-átalakítás: nincs; magasság: automatikus; kitöltés: 7 képpont 45 képpont; szélesség: 100%; doboz méretezése: border-box; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: lebeg, # menu1 ul li ul li : lebegés> a (háttér: # FDDC96; szín: # 6572BC;) # menu1 ul li ul li ul (felső: 0px; bal: 100%; kijelző: nincs; háttér: # fddc96;) # menu1> ul> li: last-child> ul ul (bal: auto; jobb: 100%;) # menu1 ul li ul li ul a (szín: # F38A01;)

A jQuery fájljainak másolása az előző példához hasonlóan. Úgy döntöttem, hogy otthagyom az elválasztókat, hogy a menü legalább egy kicsit jobban nézzen ki. Természetesen nélkülük is lehet.

Így történt:
Készítettem 2 bőrt egyben, hogy megmutassam, hogyan néz ki a legördülő menü jobb és középen.

Az alábbiakban megtekinthet egy bemutatót, és letölthet egy példát:

Többszintű legördülő menü egy felugró vipadash-szal az egérrel

A címben kiderült egy kis olaj, de működni fog, a lényeg a kód.

Ennek a példának a lényege, hogy vízszintes teljes szélességű legördülő menüt készítsen teljes szélességű legördülő menüvel + rétegezéssel.

A html kódot nem változtatom meg, az az előző példából vehetõ. Megtartjuk a jQuery elválasztókat is.

Csak a teljes CSS változik:

#conteiner (szélesség: 1000px; magasság: automatikus; margó: 0px automatikus; padding-top: 10px;) # menü1 (pozíció: relatív; kijelző: blokk; szélesség: 100%; magasság: automatikus; z-index: 10;) # menu1 ul (pozíció: relatív; kijelző: blokk; margó: 0 kép; kitöltés: 0 kép; szélesség: 100%; magasság: automatikus; lista-stílus: nincs; háttér: # F3A601;) # menü1> ul (szöveg-igazítás: igazolja; font-size: 1px; line-height: 1px;) # menu1> ul :: after (kijelző: inline-block; szélesség: 100%; magasság: 0px; tartalom: "";) # menu1 ul li (pozíció : relatív; kijelző: inline-block; szélesség: auto; magasság: auto; vertical-align: top; text-align: left;) # menu1> ul> li (pozíció: statikus;) # menu1 ul li.razd (magasság : 28px; szélesség: 1px; háttér: #ffffff; margin-top: 4px;) # menu1 ul li a (display: blokk; kitöltés: 9px 45px 0px 45px; betűméret: 14px; font-család: Arial, sans- serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: nagybetűs; magasság: 36px; box-méretezés: border-box;) # menu1 ul li> a: lebeg, # menu1 ul li: hover> a (háttér: # EBBD5B; szín: # 2B45E0; ) # menu1 ul li ul (pozíció: abszolút; felső: 36 kép; bal: 0 kép; kijelző: nincs; szélesség: 100%; háttér: # EBBD5B;) # menü1> ul> li> ul :: után (törlés: mindkettő; lebeg: nincs; szélesség: 100%; magasság: 0px; tartalom: "";) # menu1 ul li: hover> ul (display: block;) / * ez a sor hajtja végre a lemorzsolódás mechanizmusát * / # menu1 ul li ul li ( display: block; szélesség: 30%; float: left;) # menu1 ul li ul li a (display: block; text-transform: none; magasság: auto; kitöltés: 7px 45px; szélesség: 100%; doboz méretezése: border -box;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: lebeg, # menu1 ul li ul li: lebeg> a (háttér: # FDDC96 ; color: # 6572BC;) # menu1 ul li ul li ul (top: 0px; left: 100%; display: none; background: # fddc96; z-index: 15;) # menu1 ul li ul ul ul li (display : blokk; lebeg: nincs; szélesség: 100%;) # menu1 ul li ul ul ul ul (szín: # F38A01; border-top: 1px szilárd #ffffff;)

Így fog kinézni a menü: Az egyetlen dolog, hogy a webhelynek elegendő helynek kell lennie, mivel a jobb szélső szélső elemnek nincs helye a legördülő menüben. Ez a probléma megoldható: n-dik gyermek, de nem zavartam magam a kert kerítésével.

Tekintse meg a vízszintes réteges legördülő menü bemutatóját:

Mint észrevehette: az alsó lemez is teljes szélességű. Így készülnek több blokkban a lemorzsolódások.

Nekem ennyi, remélem, hogy legalább az egyik példám megfelel Önnek. Kösz a figyelmet.

mindkettőjüknek és nekem is hasznára válik 🙂.

Ha elolvasta a teljes bejegyzést, de nem találta, hogyan készítse el vízszintes legördülő menüjét css-ben, tegyen fel egy kérdést a megjegyzésekben, vagy használja a webhelykeresést.

Továbbá azt tanácsolom, hogy keresse fel a szülő oldalt https: // site / vypadayushhee-menu /, ott összesítjük a legördülő menük összes példáját és változatát.

Helló. Nagyon régóta nem írtam bejegyzéseket a html / css munkájáról. A közelmúltban most kezdtem el új elrendezést készíteni, és közben egy érdekes trükkel találkoztam, amely lehetővé teszi a menü gumiszerűvé tételét (új elemeket adhat hozzá, és a méret nem fog növekedni, de mindig lesz 100 a szülőblokk% -a). Tehát ma a gumimenüt css-ben valósítjuk meg.

Ha lusta vagy elolvasni a cikket, megnézheted ezt a videót. A szerző mindent nagyon hűvösen elmagyaráz:


CSS Gum Menu - 1. lépés

Az első lépés mindig a html jelölés, hova mehetünk nélküle? De esetünkben minden egyszerű lesz:

1. blokk burkoló a menühöz
2. maga a menü felsorolással ellátott listán (ul tag) jelenik meg
3. nos, a menüpontok bent vannak, és ennek megfelelően már vannak linkek

Minden világos, ez az én jelölőkódom:







• 1. bekezdés


• 2. pont


• 3. pont


• 4. tétel


• 5. tétel






Minden normálisan néz ki, így:

Most mindent a kívánt formába hozunk, a CSS átveszi a munkát.

2. lépés - alapvető stílusok

Ezután hozzáadom a stílusot a burkolóblokkhoz. Ugyanis a maximális szélességet 600 képpontra állítom be (csak azért, hogy kényelmes legyen egy képernyőkép készítése, hogy a menü beilleszkedjen), és középre is állítom a blokkot.

Wrap (
háttér: #fff;
max szélesség: 600px;
margó: 0 auto;
}

3. lépés - megvalósítjuk a gumiképességet

Most térjünk le magára a menüre. Eltávolítom belőle a jelölőket (az ul címkénél), a hátteret lineáris színátmenetre állítom, és ami a legfontosabb, a display: table-row tulajdonságot használom arra, hogy a menü tárolója táblázat sorként viselkedjen. Fontos ezt megtenni a további manipulációkhoz.

R-menü (
háttér: lineáris gradiens (jobbra, # b0d4e3 0%, # 88bacf 100%);
kijelző: táblázat-sor;
list-style: nincs;
}

Mint látható, a megadott kód csak megoldott mindent, amiről írtam. Egyébként kényelmes az átmenetek generálása az Ultimate CSS Gradient generator eszközzel. Írok róla valamikor.

R-menü li (
függőleges-igazítás: alul;
display: tábla-cella;
szélesség: auto;
text-align: center;
magasság: 50px;
jobb-jobb: 1px szilárd # 222;
}

• vertical-align: bottom - erre a tulajdonságra azért van szükség, hogy ha a menüpont szövege 2 sort vesz fel, akkor pontosan megjelenik. Amikor elkészítjük a menüt, eltávolíthatja ezt a tulajdonságot, nagyíthatja, hogy az elemek összezsugorodjanak, és a szöveg két sorra vonuljon, és megjelenítési problémát fognak látni. Helyezze vissza az ingatlant, és minden rendben legyen.
• display: table-cell - mivel magát a display menüt is táblázat sornak állítottuk be, logikus lenne beállítani, hogy az elemei cellában jelenjenek meg a táblázatban. Szükséges.
• width: auto - a szélességet automatikusan kiszámoljuk, a bekezdés szövegének hosszától függően
• text-align: center csak a szöveg középre helyezése
• magasság: 50 képpont - a magasság beállítása 50 képpontra
• Nos, a border-right csak egy határ a jobb oldalon, ilyen elválasztó az elemek számára

Bár a menü csúnyán néz ki, de semmi, itt az ideje, hogy észbe kapjon.

Utolsó dolog a bekezdéseken belüli linkek stílusa. Itt van ez a kód:

R-menü li a (
szövegdíszítés: nincs;
szélesség: 1000px;
magasság: 50px;
függőleges-igazítás: közép;
display: tábla-cella;
szín: #fff;
betűtípus: normál 14 képpontos Verdana;
}

És most így néz ki a menü:

Ismét elmagyarázok néhány sort:

• a text-decoration tulajdonság eltávolítja a hivatkozások alapértelmezett aláhúzását
• szélesség: 1000px valószínűleg a legfontosabb vonal. Körülbelül azonos szélességűre kell állítania a linkeket, lehet kisebb, de szükségszerűen több, mint a legszélesebb menüpont. A linkek nem lesznek 1000 pixel szélesek, mivel az li menüpont, amelynek szélessége automatikusra van állítva, korlátozni fogja a szélességet, de ez lehetővé teszi, hogy a menü tetszőleges számú eleméhez mindig 100 százalékos szélességű legyen.
• vertical-align: middle és display: table-cell - az első a szöveget függőlegesen a középponthoz igazítja, a második pedig a linkeket cellákként is megjeleníti. Mindkét tulajdonságra szükség van.
• a font csak egy csomó betűtípus-beállítás. Ebben a cikkben olvashat a betűtípusok css tulajdonságairól.

4. lépés (opcionális) interaktivitás hozzáadása

Például az egérrel a menüelem színének megváltoztatásához. Ez egészen egyszerűen a lebegő ál-osztály használatával történik:

R-menü li: lebeg (
háttérszín: # 6bba70;
}

A menü gumiszerűségének tesztelése

Remek, a menük készen állnak, de a legfontosabbat még nem ellenőriztük - mennyire gumiszerű, ahogy ígértem neked. Nos, még 2 elemet felveszek a menübe:

A menü 600 pixel széles marad. A többi elem csak egy kicsit zsugorodott, hogy 2 új is beleférjen.

Hozzáteszek még 1 hosszú pontot:

Amint láthatja, a menü egy kicsit jobban zsugorodott, és a hosszú elem meglehetősen rendesen megjelent. És ha nem lett volna a vertical-align: bottom tulajdonság, amiről meséltem, a menü rosszabbul nézne ki.

Három elemre csökkentem a menüt.

Az elemek sokkal szabadabbá váltak, de maga a menü szélessége nem változott. Tehát 100% -ban gumimenüt készítettünk!

Hogyan kell adaptálni?

Alapvetően, ha a burkolóblokknak maximális szélességet adtál, nem pedig fixet, akkor nem is kell alkalmazkodni. Esetemben max-width: 600px tulajdonsággal rendelkezem, és amikor a szélesség 600 pixelnél kevesebb lesz, a blokk egyszerűen összezsugorodik a képernyőn, vízszintes görgetés nélkül.

Nos, ha valahogy módosítani vagy javítani szeretné a menüt mobileszközökön vagy széles képernyőkön, akkor a média lekérdezések segítenek Önnek! Sok sikert a helyszínépítéshez!

A letöltés most kezdődik ...
Ne felejtsd el megosztani az anyagot
a közösségi hálózatokon a
kollégák

Jelszó visszaállítás

Írja be e-mail címét a jelszó helyreállításához!