Si të krijoni një menu të përgjegjshme gome duke përdorur CSS? Bëje vetë menunë horizontale rënëse duke përdorur CSS dhe Html. Zgjero menunë në gjerësinë e plotë.

Shenjat e shtatzënisë pas implantimit të embrionit

Mirembrema

Shpesh është e nevojshme të krijoni një meny horizontale që do të shtrihet në të gjithë gjerësinë e bllokut prind, pavarësisht se sa artikuj përmban.

Sot do të doja t'ju tregoja se si të krijoni një menu të tillë.

Pra, menuja jonë do të jetë si më poshtë:

Shtrihet në të gjithë gjerësinë dhe bie në sy kur rri pezull. Menuja është e rrumbullakosur në anët.

HTML MARKUP

...
shtëpi
Lajm interesant
Një tjetër artikull i menusë!

Për ta bërë menunë me gjerësi të plotë, përdora tabela me gjerësi 100%. Çdo tabelë ka një kontejner div të artikullit të menusë. Në varësi të faktit nëse artikulli i parë, i fundit ose i ndërmjetëm i menysë është një div, caktohet klasa përkatëse.

Çdo kontejner div ka 2 kufij anësor me pozicionim absolut, të cilat janë të nevojshme për shfaqjen e saktë. Nëse përdorni kufij standardë, atëherë kur ndërroni artikujt e menysë, teksti do të kërcejë me 1-2 piksel, gjë që është mirë.

Klasa aktive është përgjegjëse për artikullin e zgjedhur të menusë dhe e thekson atë.

Në çdo artikull kemi një foto dhe tekst. Për të siguruar që e gjithë kjo të jetë e lidhur rreptësisht në mes vertikalisht, ne përdorim një tabelë. Falë veçorisë së shtrirjes vertikale, artikujt tanë të menysë do të shfaqen gjithmonë pa probleme dhe nuk do të largohen.

RREGULLAT CSS

Së pari, le të vendosim stilet për shfaqjen e përgjithshme të menusë:

Menu_container ( mbushje-lart: 40px; gjerësi: 100%; lartësi: 47px; hapësira kufitare: 0px; ) .menu_container td (vertikal-linjë: mes; /* shtrirje vertikale */ ) .last_point_menu, .first_point. gjerësia: 100%; lartësia: 47 px; kufiri: 1 px solid #dadbda; z-indeksi: 1000; pozicioni: relative; kufiri-majtas: asnjë; ) .tabela e brendshme ( gjerësia: 100%; lartësia: 100%; ) .tabela e brendshme td ( mbushje: 0 px; rreshtimi vertikal: mes; kufiri: asnjë; rreshtimi i tekstit: majtas; gjerësia: 150 px; mbushja-majtas: 4 px; ) .td.inner_table_img ( gjerësia: 40px!i rëndësishëm; ) .inner_table_menu (lartësia: 100%; mbushje: 0px; rreshtim vertikal: mes; kufi: asnjë; rreshtim teksti: majtas; ) .titulli_tabela e brendshme (mbushje-majtas;1 mbushje-djathtas: 10 px; transformimi i tekstit: shkronja të mëdha; lartësia e rreshtit: 13 px; ) .inner_table_menu td.inner_table_img ( gjerësia: 30 px! e rëndësishme; lartësia: 30 px! e rëndësishme; mbushja-majtas: 15 px; )

Për bukurinë, le të rrumbullakojmë qoshet në anët e menusë:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-lart: 5px; -moz-border-radius-bottomleft: 5px; rrezja kufi-lartë-majtas: 5 px; rrezja kufi-poshtë-majtas: 5 px; kufiri-djathtas: 1px solid #dadbda; ) .menuja_last_point ( -webkit-border-lart-right-radius: 5px; -webkit-border rrezja e poshtme djathtas: 5 px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; kufiri-lart-djathtas-radius: 5px; kufiri-poshtë-djathtas-radius: 5px ;)

Tani menuja jonë ka një pamje më të bukur:

Deri më tani, pika e parë nuk ka një kufi të majtë. Do ta rregullojmë pak më vonë.

Tani le të shtojmë efektet hover për menunë.

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 (background-color: #CA-5mo-E2 gradient (lart, #CAE285, #9FCB56); imazhi i sfondit: -kit ueb-gradient (linear, 0 0, 0 100%, nga (#CAE285), në (#9FCB56)); imazhi i sfondit: -koti i uebit-linear -gradient(lart, #CAE285, #9FCB56);-imazhi i sfondit: -o-linear-gradient(lart, #CAE285, #9FCB56); imazhi i sfondit: gradient linear (në fund, #CAE285, #9FCB56); kufiri: 1px solid #9FCB56; kufiri-color: #aec671 #9fbb62 #87ac4a; kufiri-majtas: asnjë; z-index: 5000; ) /* do të përpunojë kufijtë në hover */ .first_point_menu ( kufiri: 1px solid #dadbda ; ) .menuja e pikës së parë:hover, .first_point_menu.active (kufi: 1px solid #9FCB56; ngjyra e kufirit: #aec671 #9fbb62 #87ac4a; ) .menuja e pikës së fundit (kufiri: 1px solid #dadbda; nonelast;_left; :hover (kufiri: 1px solid #9FCB56; kufiri majtas: asnjë; kufiri-ngjyra: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (kufi në të majtë: asnjë;)

Tani menyja jonë duket shumë më e bukur, por tani për tani nuk kemi kufij për artikujt e theksuar të menusë. Le ta rregullojmë këtë!

/* stilet për kufijtë anësor */ .borderLeftSecond, .borderRightSecond ( shfaqja: asnjë; pozicioni: absolute; gjerësia: 1px; lartësia: 47px; ngjyra e sfondit: #9fbb62; sipër: 0px; z-indeksi: 1000; ) /* zhvendosje absolute për kufijtë */ .borderLeftSecond ( majtas: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .conborder artikulli i parë dhe i fundit */ .first_point_menu.active .borderLeftSecond (ekrani: asnjë; ) .last_point_menu.active .borderRightSecond (ekrani: asnjë;) .last_point_menu:hover .borderLeftSecond (shfaq: bllok;)

Kjo eshte e gjitha!

Ne ia dolëm menu e madhe shtrirë në të gjithë gjerësinë e bllokut prind! Artikujt nuk mbivendosen me njëri-tjetrin kur rri pezull miun dhe faqosja nuk kërcen.

Një menu horizontale është një listë e seksioneve të faqes në internet, kështu që është më logjike ta vendosni atë brenda elementit

    , dhe më pas aplikoni stilet CSS në elementët e tij. Kjo paraqitje e menysë është më e zakonshme për shkak të avantazheve të dukshme në pozicionimin e saj në një faqe interneti.

    Si të bëni një menu horizontale: shembuj të paraqitjes dhe dizajnit Shënimi HTML dhe stilet bazë për një menu horizontale

    Si parazgjedhje, të gjithë elementët e listës janë rregulluar vertikalisht, duke zënë të gjithë gjerësinë e elementit të kontejnerit, i cili nga ana tjetër zë të gjithë gjerësinë e bllokut të tij të kontejnerit.

    Shënimi HTML për navigim horizontal

    Një meny horizontale e vendosur brenda një etikete mund të vendoset gjithashtu brenda elementit ... dhe/ose .... Falë këtij shënjimi html, jepet kuptimi semantik dhe gjithashtu shfaqet mundësi shtesë për të formatuar bllokun e menysë.

    Ka disa mënyra për t'i vendosur ato horizontalisht. Së pari, duhet të rivendosni stilet e paracaktuar të shfletuesit për elementët e navigimit:

    Ul (stili i listës: asnjë; /*hiq shënuesit e listës*/ margjina: 0; /*hiq kufirin e sipërm dhe të poshtëm të barabartë me 1em*/ mbushje-majtas: 0; /*hiq mbushjen e majtë të barabartë me 40 px*/ ) a (dekorimi i tekstit: asnjë; /*hiq nënvizimin e tekstit të lidhjes*/)

    Metoda 1. li (ekrani: inline;)

    Bërja e elementeve të listës me shkronja të vogla. Si rezultat, ato vendosen horizontalisht, me një hendek prej 0.4em të shtuar në anën e djathtë ndërmjet tyre (llogaritur në lidhje me madhësinë e shkronjave). Për ta hequr, shtoni një diferencë negative djathtas për li li (margin-djathtas: -4px;) . Më pas, i stilojmë lidhjet sipas dëshirës.

    Metoda 2. li (lundrues: majtas;)

    Bërja e elementeve të listës lundruese. Si rezultat, ato vendosen horizontalisht. Lartësia e bllokut të kontejnerit ul bëhet zero. Për të zgjidhur këtë problem, ne shtojmë (overflow: hidden;) në ul, duke e zgjeruar atë dhe duke lejuar që të përmbajë elementë lundrues. Për lidhjet, shtoni një (shfaq: bllok;) dhe stilojini ato sipas dëshirës.

    Metoda 3. li (ekrani: inline-block;)

    Krijimi i elementeve të listës brenda-bllokut. Ato janë të vendosura horizontalisht, në anën e djathtë formohet një hendek, si në rastin e parë. Për lidhjet, shtoni një (shfaq: bllok;) dhe stilojini ato sipas dëshirës.

    Metoda 4. ul (ekrani: flex;)

    Bërja e listës ul një enë fleksibël duke përdorur . Si rezultat, elementët e listës janë rregulluar horizontalisht. Shtojmë një (ekran: bllok;) për lidhjet dhe i stilojmë sipas dëshirës.

    1. Menuja përshtatëse me efekt nënvizues kur rri pezull mbi një lidhje
    • Puna
    • Rreth
    • Blog
    • Kontaktoni
    @import url ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-kryesore ( stili i listës: asnjë; diferenca: 40px 0 5px; mbushja: 25px 0 5px; rreshtimi i tekstit: në qendër; sfondi: i bardhë; ) .menu-kryesore li (ekrani: inline-block;).menu- main li:after (përmbajtja: "|"; ngjyra: #606060; ekrani: inline-block; vertikal-align:lart; ) .menu-main li:last-child:after (përmbajtja: asnjë;) .menu-main a ( dekorimi i tekstit: asnjë; font-familja: "Ubuntu Condensed", sans-serif; hapësira e shkronjave: 2 px; pozicioni: relative; mbushja e poshtme: 20 px; margjina: 0 34px 0 30px; madhësia e shkronjave: 17px; teksti-transformimi: shkronja të mëdha; ekrani: blloku i linjës; tranzicioni: ngjyra .2s; ) .menu-kryesore a, .menu-kryesore a: vizituar (ngjyra: #9d999d;) .menu-kryesore a.rrymë, .menu- kryesore a:hover(ngjyra: #feb386;) .menu-kryesore a:para, .menu-kryesore a:after (përmbajtja: ""; pozicioni: absolute; lartësia: 4 px; lart: automatik; djathtas: 50%; poshtë : -5 px; majtas: 50%; sfond: #feb386; tranzicioni: 0,8s; ) .menu-kryesore a:hover:para, .menu-kryesore .aktuale:para (majtas: 0;) .menu-kryesore a: hover:after, .menu-main .current:after (djathtas: 0;) @media (max-width: 550px) ( .menu-main (padding-top: 0;).menu-main li (ekrani: block; ) .menu-kryesore li:pas (përmbajtja: asnjë;) .menu-kryesore a ( mbushje: 25px 0 20px; margjina: 0 30 px; ) ) 2. Menu përshtatëse për një faqe interneti dasmash
    • Puna
    • Rreth
    • Blog
    • Kontaktoni
    @import url ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( pozicioni: relative; sfondi: #fff; kuti-hije: futur 0 0 10px #ccc; ) .top-menu:para, .top-menu:after (përmbajtja: ""; shfaqja: bllok; lartësia : 1px; kufiri-lart: 3px i ngurtë #575350; kufiri-fund: 1px i ngurtë #575350; kufiri-poshtë: 2px; ) .menuja e sipërme:past (kufiri-poshtë: 3px i ngurtë #575350; kufiri-lart: 1px i ngurtë #575350; hije e kutisë: 0 2px 7px #ccc; margjina në krye: 2px; ) .menu-kryesore ( stili i listës: asnjë; mbushja: 0 30 px; diferenca: 0; madhësia e shkronjave: 18 px; rreshtimi i tekstit: qendër; pozicioni: relative; ) .menu-kryesore:përpara, .menu-kryesore:pas (përmbajtja: "\25C8"; lartësia e linjës: 1; pozicioni: absolute; lart: 50%; transformimi: translateY(-50% ); ) .menu-kryesore:para (majtas: 15px;) .menu-kryesore:pas (djathtas: 15px;) .menu-kryesore li (ekrani: blloku inline; mbushja: 5px 0; ) .menu-kryesore a ( dekorimi i tekstit: asnjë; ekrani: blloku i brendshëm; diferenca: 2 px 5 px; mbushja: 6 px 15 px; font-familja: "PT Sans", sans-serif; madhësia e shkronjave: 16 px; ngjyra: #777777; kufiri-fund : 1px transparente e ngurtë, tranzicioni: 0,3s linear; ) .menu-kryesore .aktual, .menu-kryesore a:hover (rreze-kufi: 3px; sfond: #f3ece1; ngjyra: #313131; tekst-hije: 0 1px 0 #fff; ngjyra e kufirit: #c6c6c6; ) @media (gjerësia maksimale: 500 px) ( .menu-kryesore li (ekrani: bllok;) ) 3. Menu e përpunuar e përgjegjshme
    • Puna
    • Rreth
    • Blog
    • Kontaktoni
    @import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-kryesore ( stili i listës: asnjë; mbushja: 0 30 px; margjina: 0; madhësia e shkronjave: 18 px; rreshtimi i tekstit: qendër; pozicioni: i afërm; sfondi: i bardhë; ) .menu-kryesore:pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 100%; lartësia: 20 px; majtas: 0; poshtë: -20 px; sfondi: gradient radial (e bardhë 0%, e bardhë 70%, rgba (255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10 px; madhësia e sfondit: 20 px 20 px; sfondi-përsëritja: përsëritje-x; ) .menu-kryesore li (ekrani: inline-block;) .menu-kryesore a (dekorimi i tekstit: asnjë; ekrani: inline-block; margjina: 0 15px; mbushja: 10px 30px; font-familja: "PT Sans Caption", sans-serif; ngjyra: #777777; tranzicioni: 0,3s linear; pozicioni: relative; ) .menu -main a:fore, .menu-main a:after (përmbajtja: ""; pozicioni: absolut; sipër: llogaritur (50% - 3px); gjerësia: 6px; lartësia: 6px; kufiri-rreze: 50%; sfondi: #F58262; errësirë: 0; tranzicion: 0,5s lehtësi-në-jashtë; ) .menu-kryesore a:para (majtas: 5px;) .menu-kryesore a:pas (djathtas: 5px;) .menu-kryesore a. aktuale:përpara, .menu-kryesore a.rrymë:pas, .menu-kryesore a:hover:para, .menu-kryesore a:hover:after (opacity: 1;) .menu-kryesore a.rrymë, .menu- kryesore a:hover (ngjyra: #F58262;) @media(max-width:680px) ( .menu-main li (ekrani: bllok;) ) 4. Menyja përshtatëse në shirit
    • Puna
    • Rreth
    • Blog
    • Kontaktoni
    @import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margjina: 0 60 px; pozicioni: relative; sfondi: #5A394E; hije e kutisë: futur 1px 0 0 rgba(255,255,255,.1), futje -1 px 0 0 rgba(255,255,255,150 px), inset 0 150px -150px rgba(255255255.12), futur -150px 0 150px -150px rgba(255255255.12); ; z-indeksi: 2; majtas: 0; gjerësia: 100%; lartësia: 3 px; ) .menuja e sipërme: përpara ( lart: 0; kufiri-poshtë: 1 px rgba e ndërprerë (255,255,255,.2); ) .lart- menu:after (poshtë: 0; kufiri-lart: 1px rgba me ndërprerje(255,255,255,.2); ) .menu-main (lista-stili: asnjë; mbushja: 0; margjina: 0; rreshtimi i tekstit: në qendër; ) . menu-main:fore, .menu-main:after (përmbajtja: ""; pozicioni: absolute; gjerësia: 50px; lartësia: 0; sipër: 8px; kufiri-lart: 18px solid #5A394E; kufiri-fund: 18px solid # 5A394E; transformimi: rrotullo(360 gradë); z-indeksi: -1; ) .menu-kryesore: përpara ( majtas: -30 px; kufiri-majtas: 12 px solid rgba(255, 255, 255, 0); ) .menu- main:after ( djathtas: -30px; kufiri-djathtas: 12px solid rgba(255, 255, 255, 0); ) .menu-kryesore li ( shfaqja: inline-block; margin-right: -4px; ) .menu-main a (dekorimi i tekstit: asnjë; shfaqja: inline-block; mbushja: 15px 30px; font-familja: "PT Sans Caption", sans-serif; ngjyra: e bardhë; tranzicioni: .3s linear; ) .menu-kryesore a.rrymë, .menu-main a:hover (sfondi: rgba(0,0,0,.2);) @media (max-width: 680px) (.top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:fore, .menu-main:after (përmbajtja: asnjë;) .menu-kryesore a (ekran: bllok;) ) 5. Menu reaguese me një logo në mes
    • Puna
    • Rreth
    • Histori
    • Kontaktoni
    • Dyqan
    • Galeri
    @import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( pozicioni: relative; sfondi: rgba(34,34,34,.2); ) .menu-main (lista-stili: asnjë; margjina: 0; mbushja: 0; ) .menu-main:pas ( përmbajtja: ""; shfaqja: tabela; e qartë: të dyja; ) .artikulli majtas (lundrues: majtas;) .artiku i djathtë (float: djathtas;).navbar-logo (pozicioni: absolut; majtas: 50%; lart : 50%; transformim: përkthe (-50%,-50%); ) .menu-kryesore a ( dekorimi i tekstit: asnjë; shfaqja: bllok; lartësia e rreshtit: 80 px; mbushja: 0 20 px; madhësia e shkronjave: 18 px ; hapësira e shkronjave: 2 px; font-familja: "Arimo", sans-serif; pesha e shkronjave: bold; ngjyra: e bardhë; tranzicioni: .3s linear; ) .menu-kryesore a:hover (sfondi: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-lart: 90px; text-align: në qendër; ) .navbar-logo (pozita: absolute; majtas: 50% ; krye: 10 px; transformimi: translateX(-50%); ) .menu-kryesore li ( float: asnjë; ekrani: inline-block; ) .menu-main a (lartësia e linjës: normale; mbushja: 20px 15px; font -madhësia: 16 px; ) ) @media (max-width: 630px) ( .menu-main li (ekrani: bllok;) ) 6. Menu reaguese me logo në të majtë @import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( sfond: rgba(255,255,255,.5); kuti-hije: 3px 0 7px rgba(0,0,0,.3); mbushje: 20px; ) .top-menu:pas (përmbajtja: "" ; ekrani: tabela; pastrohet: të dyja; ) .navbar-logo (ekran: inline-block;) .menu-main (stili i listës: asnjë; diferencë: 0; mbushje: 0; float: djathtas; ) .menu-kryesore li (ekran: inline-block;).menu-kryesore a (dekorimi i tekstit: asnjë; ekrani: blloku; pozicioni: relative; lartësia e rreshtit: 61 px; mbushja majtas: 20 px; madhësia e shkronjave: 18 px; hapësira e shkronjave : 2px; font-familja: "Arimo", sans-serif; pesha e shkronjave: bold; ngjyra: #F73E24; tranzicioni:.3s linear; ) .menu-kryesore a:para (përmbajtja: ""; gjerësia: 9px; lartësia: 9 px; sfondi: #F73E24; pozicioni: absolut; majtas: 50%; transformimi: rrotullohet (45 gradë) translateX (6,5 px); opaciteti: 0; tranzicioni: .3 s linear; ) .menu-kryesore a:hover:para (opacity: 1;) @media (max-width: 660px) ( .menu-main (float: asnjë; padding-top: 20px;) ) .menu-main a (mbushje: 0 10px;) .menu-kryesore a:para (transformoj: rrotullo(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (shfaq: bllok;) )

    Një plan urbanistik mjaft i zakonshëm i një menuje faqeje, kur kontejneri me të zë të gjithë gjerësinë e disponueshme në faqe. Në këtë rast, artikulli i parë është ngjitur me skajin e majtë, dhe i fundit është ngjitur në të djathtë, dhe distanca midis të gjithë elementëve është e barabartë. Sot do t'ju tregojmë se si bëhet kjo.

    Ne ju ofrojmë një shembull të zbatimit të një menuje gome duke përdorur CSS për burimin tuaj. Në këtë meny, artikujt do të vendosen në një rresht. Javascript nuk do të përdoret. Përmbajtja e menysë do të përfshihet në një listë të rregullt. Karakteristika kryesore e një menuje të tillë është shkathtësia e saj, e cila shprehet në faktin se numri dhe gjatësia e artikujve mund të jenë çdo.

    Si të zbatohet kjo?

    Secili programues mund të ofrojë mënyrën e tij për të zgjidhur një problem të caktuar. E gjitha varet nga imagjinata, niveli i profesionalizmit dhe aftësive të tij. Zgjidhja më e zakonshme për këtë problem është përdorimi i një tabele. Gjithashtu, shumë do të sugjeronin përdorimin e Javascript. Unë nxitoj të zhgënjej ata që do të sugjeronin përdorimin e vetive të shfaqjes me tabelën e vlerave ose qelizën e tabelës. Kjo metodë nuk është mjaftueshëm e përputhshme me ndërshfletuesit.

    Zgjidhja jonë

    Oferta jonë do të ndërtohet mbi një bazë solide të njohurive HTML5 dhe CSS3.

    Thelbi i procesit bazohet në vetinë text-align me vlerën justify. Për ata që e kanë harruar, ju kujtoj: kjo veti orienton shtrirjen e tekstit në të gjithë gjerësinë e kontejnerit.

    Kur përdorni zgjidhjen tonë, duhet të respektohen dy rregulla të detyrueshme. E para është që gjerësia e kontejnerit të artikullit të menusë duhet të jetë më e vogël se teksti. Kjo është, jo në një rresht. Rregulli i dytë i rëndësishëm është që fjalët të shtrihen në mënyrë të barabartë, pavarësisht nëse i përkasin të njëjtës pikë apo jo.

    Më poshtë është kodi që shërben si shembull i krijimit të një menuje gome:

    HTML

    < ul> < li>< a href= "#" >shtëpi< li>< a href= "#" >Blog< li>< a href= "#" >Lajme< li>< a href= "#" >Popullore< li>< a href= "#" >Artikuj të rinj

    ul ( text- align: justify; overflow: hidden; /* eliminon efektet anësore të metodës */ lartësia: 20 px; /* eliminon gjithashtu të panevojshmen */ kursorin: default ; /* vendos formën fillestare të kursorit */ margjina : 50px 100px 0 100px; sfond: #eee; mbushje: 5px; ) li ( shfaqja: inline; /* bën tekstin e artikujve të menysë */ ) li a ( shfaqja: inline-blloku; /* eliminon ndërprerjet e fjalëve në meny */ ngjyra: #444; ) a : rri pezull ( ngjyra: #ff0000; ) ul: pas ( /* duke formuar rreshtin e dytë për të përpunuar metodën */ përmbajtja: "1" ; margjina- majtas: 100 %; lartësia: 1 px; tejmbushja: e fshehur; shfaqja: blloku i linjës; )

    Për të punuar në Internet Explorer-in e vjetër, duhet të shtoni gjithashtu kodin e mëposhtëm në CSS

    ul ( z- indeksi: shprehje(runtimeStyle. zIndex = 1 , insertAdjacentHTML("para Fund&apos, "< li class = "last" >"));) ul .fundit (diferencë-majtas: 100%;) * html ul (/* duhet vetëm ie6 */ lartësia: 30 px;)

    Pasi të kemi specifikuar vlerat dhe kodin e nevojshëm të pronës, marrim këtë menu gome:

    Disavantazhet e metodës
  • Kodi i volumit
  • Pamundësia për të përcaktuar gjendjen aktive të një elementi përmes një përzgjedhësi të klasës. Kjo ndodh për shkak të thyerjes së fjalëve në paragrafë (nëse ka një të tillë). Zgjidhja e këtij problemi është të shtoni një enë tjetër brenda elementeve të listës.
  • Për menynë rënëse, duhet të personalizoni kodin për shkak të ndikimit negativ të tejmbushjes.
    • Në cilët shfletues funksionon?
    6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

    Ne vazhdojmë serinë me një mësim mbi menutë rënëse. Më tej është një menu me rënie horizontale, bëjeni vetë duke përdorur css.

    Nëse keni ardhur këtu rastësisht ose po kërkoni një zbatim tjetër të menysë rënëse, ju këshilloj të shkoni te seksioni prind.

    Ky seksion do të përshkruajë një menu horizontale rënëse në CSS dhe HTML.

    Navigimi i faqes:

    Kështu që, detyra jonë:

    bëni një menu horizontale me një listë rënëse css (në listat ul li) pa përdorur jQuery dhe Javascript, dhe gjithashtu pa përdorur tabela

    në kod.

    Dropdown menu horizontale html

    Para së gjithash, para se të fillojmë të shkruajmë kodin, duhet të bëjmë shabllon html për menunë.

    Për shkak të faktit se po bëjmë një menu universale, dua ta bëj sa më të ngjashme me daljen e menusë së WordPress. Sipas mendimit tim, ky është një nga kodet më të thjeshtë dhe më të gjithanshëm të menusë Html. Duket kështu:

    • shtëpi
    • Rreth Nesh
    • Shërbimet tona
      • Shërbimi ynë nr. 1
      • Shërbimi ynë nr. 2
      • Shërbimi ynë nr. 3
      • Shërbimi ynë nr. 4
      • Shërbimi 5
    • Lajme
    • Kontaktet

    Siç mund ta shihni nga kodi, menyja jonë rënëse do të zbatohet në listat ul dhe li. Kjo është se si duket menyja pa stile CSS:

    Le ta pranojmë, duket e shëmtuar, si një listë e rregullt. Më pas duhet ta dekorojmë këtë menu duke përdorur stilet CSS.

    Menyja horizontale rënëse në CSS

    Stilet CSS për menutë rënëse dhe të tjera janë po aq të nevojshme sa ajri. Në fund të fundit, skeda rënëse është bërë bazuar në pseudo-class:hover.

    Për një menu horizontale me zbritje na duhen stilet e mëposhtme:

    #menu1( pozicioni:relativ; ekrani:blloku; gjerësia:100%; lartësia:auto; indeksi z:10; ) #menu1 ul(pozicioni:relativ; shfaqja:blloku; margjina:0px; mbushja:0px; gjerësia:100 %. menu1 ul li( pozicioni:relativ; shfaqja:blloku; noton:majtas; gjerësia:auto; lartësia:auto; ) #menu1 ul li a(ekrani:blloku; mbushja:9px 25px 0px 25px; madhësia e shkronjave:14px; font- familje: Arial, sans-serif; ngjyra:#ffffef; lartësia e vijës: 1.3em; dekorimi i tekstit: asnjë; pesha e shkronjave: bold; transformimi i tekstit: shkronja të mëdha; lartësia: 36 px; madhësia e kutisë: kutia kufitare; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( sfond:#EBBD5B; ngjyra:#2B45E0; )

    Ky nuk është ende fundi, vetëm një pjesë e CSS për menunë kryesore horizontale. Më pas do të shkruajmë stile për listën rënëse të menusë:

    #menu1 ul li ul( pozicioni:absolute; lart:36px; majtas:0px; shfaqja:asnjë; gjerësia:200px; sfondi:#EBBD5B; ) #menu1 ul li:hover ul(ekrani:blloku;)/*kjo linjë zbatohet mekanizmi i braktisjes*/ #menu1 ul li ul li( float:asnjë; gjerësia:100%; ) #menu1 ul li ul li a(ekrani:blloku; transformimi i tekstit:asnjë; lartësia:auto; mbushja:7px 25px; gjerësia: 100%; madhësia e kutisë: kutia kufitare; kufiri-lart: 1 px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: rri pezull (sfondi:#FDDC96; ngjyra:#6572BC; )

    Kjo është ajo tani. Vetë mekanizmi i braktisjes zbatohet në një rresht.

    Shikoni lëkurën me këtë menu:

    Oriz. 2 (menyja me zbritje horizontale)

    Më poshtë është një demonstrim se si funksionon menyja rënëse, si dhe një lidhje për të shkarkuar burimet. (Demo do të hapet me një drop-down në krye të kësaj faqeje, nuk ka nevojë të klikoni hap në një dritare të re 🙂 ose rrotën e miut)

    Menyja rënëse horizontale me gjerësi të plotë

    Shumica prej jush mund të më qortojnë, duke thënë se meny të tilla siç tregova më lart janë një përshëndetje nga e kaluara dhe pjesërisht keni të drejtë, megjithëse kam parë paraqitje të fundit me menu të tilla.

    Shpresoj se keni shkarkuar shembullin e mësipërm. Html-ja jonë mbetet e njëjtë, por ne do ta ndryshojmë plotësisht CSS-në. Ju thjesht mund të merrni kodin CSS nga këtu dhe ta ngjisni në shembullin e shkarkuar, ose të shikoni në modalitetin demo se si funksionon.

    #container( gjerësia:1000px; lartësia:auto; margjina:0px automatike; mbushje-lart:10px; ) #menu1(pozicioni:relativ; shfaqja:blloku; gjerësia:100%; lartësia:auto; indeksi z:10; ) #menu1 ul( pozicioni:relativ; shfaqja:blloku; diferenca:0px; mbushja:0px; gjerësia:100%; lartësia:auto; stili i listës:asnjë; sfondi:#F3A601; ) #menu1 > ul( rreshtimi i tekstit: justifiko; madhësia e shkronjave: 1 px; lartësia e rreshtit: 1 px; ) #menu1 > ul::after( shfaqja:inline-block; gjerësia:100%; lartësia: 0 px; përmbajtja:" "; ) #menu1 ul li( pozicioni :relative; shfaqja:inline-block; gjerësia:auto; lartësia:auto; vertikale-linjë:lart; tekst-lidhja:majtas; ) #menu1 ul li a(ekran:blloku; mbushje:9px 35px 0px 35px; madhësia e shkronjave :14 px; font-familje: Arial, sans-serif; ngjyra:#ffffef; lartësia e rreshtit: 1.3em; dekorimi i tekstit: asnjë; pesha e shkronjave: bold; transformimi i tekstit: shkronja të mëdha; lartësia: 36 px; madhësia e kutisë :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( sfond:#EBBD5B; ngjyra:#2B45E0; ) #menu1 ul li ul( pozicioni:absolute; lart:36px; majtas : 0px; shfaqja: asnjë; gjerësia:auto; sfond:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*artikulli i fundit do të ngjitet në skajin e djathtë*/ majtas:auto; djathtas:0px; ) #menu1 ul li:hover ul(ekran:blloku;)/*kjo line zbaton mekanizmin braktisje*/ #menu1 ul li ul li( shfaqja:blloku; gjerësia:auto; ) #menu1 ul li ul li a( shfaqja:blloku; transformimi i tekstit:asnjë; lartësia:auto; mbushja:7px 35px; gjerësia:100% ; madhësia e kutisë: kutia e kufirit; kufiri-lart: 1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: rri pezull (sfondi: #FDDC96; ngjyra:#6572BC; )

    Ky shembull ndryshon gjithashtu nga i pari në atë që menyja rënëse, vetë ajo e lëshimit, shtrihet në varësi të gjerësisë së të gjithë artikujve të menusë.

    Për artikujt shumë të gjatë të menusë, ky opsion mund të mos jetë shumë i përshtatshëm, pasi ato do të shkojnë përtej kufijve. Për të çaktivizuar këtë veçori, thjesht gjeni veçorinë "white-space:nowrap;" në përzgjedhësin #menu1 ul li ul dhe fshijeni atë.

    Më poshtë mund të shikoni një demo ose të shkarkoni burimet e menysë horizontale të lëshimit:

    Pa ndarës, kjo meny duket e tillë. Ndarësit mund të shtohen në HTML me dorë, por nëse keni një CMS, siç është WordPress, atëherë shtimi i tyre manualisht nuk është shumë i përshtatshëm.

    Menyja horizontale rënëse me ndarës

    Ekzistojnë disa dhjetëra opsione për të shtuar një shirit (ndarës) midis artikujve të menusë duke përdorur CSS të pastër. Nuk do t'i kopjoj opsionet që përdorin::para ose::pas , ose shumë më të thjeshta kufiri-majtas, kufiri-djathtas.

    Ka situata kur faqosja është ndërtuar aq mrekullisht sa nuk mund të bësh pa jquery.

    Kodi ynë HTML mbetet i njëjtë, ne thjesht përfshijmë bibliotekën jQuery dhe skedarin që e përdor atë që në fillim:

    Menjëherë pas .

    Siç e kuptoni, duhet të krijoni një skedar script-menu-3.js dhe shtoni këtë kod të vogël atje:

    $(dokument).ready(funksion())( $("#menu1 > ul > li:not(:fëmija e fundit)").after(" "); ));

    Stilet CSS për një menu të tillë duhet të lihen ashtu siç janë, + shtoni këtë pjesë në fund:

    #menu1 ul li.razd(lartësia:28px; gjerësia:1px; sfondi:#ffffff; margin-lart:4px; )

    Një menu horizontale rënëse me kufizues në jQuery do të duket kështu:

    Mund ta shikoni në modalitetin demo ose të shkarkoni shabllonin e menysë horizontale më poshtë:

    Përparësitë e kësaj zgjidhjeje janë:

    • menyja do të vizatohet në mënyrë dinamike;
    • pikat nga ndarësi në paragrafin janë të njëjta kudo;
    • dizajn më i bukur dhe fleksibël.
    Menyja horizontale me shumë nivele në rënie CSS+HTML

    Meqenëse po flasim për menutë rënëse me shumë nivele në hover, ndoshta ia vlen t'i ndani ato në nëngrupe:

  • me një bllok vip kur tregoni anash
  • me një drop-up drop-down të ​​nivelit të tretë

    • Në shembujt e mi do të tregoj një menu CSS me shumë nivele me 3 nivele, atëherë mendoj se nuk do të jetë e vështirë të merret me mend se çfarë duhet bërë.

    Menyja rënëse me shumë nivele me një shirit anësor në lëvizje

    Së pari, ne duhet të korrigjojmë pak HTML-në tonë. Aty do të shtohen disa rreshta për nivelin 3:

    • shtëpi
    • Rreth Nesh
    • Shërbimet tona
      • Shërbimi ynë nr. 1
        • Shtesë në shërbim 1
        • Shtesë në shërbim 2
      • Shërbimi ynë nr. 2
        • Shtesë në shërbim 3
        • Shtesë në shërbim 4
      • Shërbimi ynë nr. 3
      • Shërbimi ynë nr. 4
      • Shërbimi 5
    • Lajme
    • Kontaktet
      • Harta rrugore
        • Shtesa e hartës
        • Shtesa për hartën 2
      • Formulari i komenteve

    #container( gjerësia:1000px; lartësia:auto; margjina:0px automatike; mbushje-lart:10px; ) #menu1(pozicioni:relativ; shfaqja:blloku; gjerësia:100%; lartësia:auto; indeksi z:10; ) #menu1 ul( pozicioni:relativ; shfaqja:blloku; diferenca:0px; mbushja:0px; gjerësia:100%; lartësia:auto; stili i listës:asnjë; sfondi:#F3A601; ) #menu1 > ul( rreshtimi i tekstit: justifiko; madhësia e shkronjave: 1 px; lartësia e rreshtit: 1 px; ) #menu1 > ul::after( shfaqja:inline-block; gjerësia:100%; lartësia: 0 px; përmbajtja:" "; ) #menu1 ul li( pozicioni :relativ;ekran:inline-block;gjerësia:auto;lartësia:auto;vertikal-linjë:lart;tekst-align:left; ) #menu1 ul li.razd(lartësia:28px; gjerësia:1px; sfondi:#ffffff; margin-top:4px; ) #menu1 ul li a(ekrani:blloku; mbushja:9px 45px 0px 45px; madhësia e shkronjave:14px; font-family:Arial, sans-serif; ngjyra:#ffffef; lartësia e linjës:1.3 em; dekorimi i tekstit: asnjë; pesha e shkronjave: bold; transformimi i tekstit: shkronja të mëdha; lartësia: 36 px; madhësia e kutisë: kutia kufitare; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a ( sfond: #EBBD5B; ngjyra:#2B45E0; ) #menu1 ul li ul( pozicioni:absolute; lart:36px; majtas:0px; shfaqja:asnjë; gjerësia:auto; sfondi:#EBBD5B; hapësira e bardhë:nowrap; ) #menu1 > ul > li:last-child > ul(/*artikulli i fundit do të ngjitet në skajin e djathtë*/ majtas:auto; djathtas:0px; ) #menu1 ul li:hover > ul(display:block;)/*kjo rresht zbaton mekanizmin e braktisjes* / #menu1 ul li ul li (ekrani:blloku; gjerësia:auto; ) #menu1 ul li ul li a (ekrani:blloku; transformimi i tekstit:asnjë; lartësia:auto; mbushja:7px 45px; gjerësia:100%; kutia -sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( sfond:#FDDC96; ngjyra:#6572BC; ) #menu1 ul li ul li ul(lart:0px; majtas:100%; shfaqja:asnjë; sfond:#fddc96; ) #menu1 > ul > li:fëmija e fundit > ul ul(majtas:auto; djathtas:100%;) #menu1 ul li ul li ul a(ngjyra:#F38A01;)

    Ne kopjojmë skedarët për jQuery siç ishin nga shembulli i mëparshëm. Vendosa t'i lija ndarësit në mënyrë që menyja të dukej të paktën pak më mirë. Sigurisht që mund ta bëni pa to.

    Kështu ndodhi:
    Bëra 2 lëkura në një për të treguar se si duket pika në të djathtë dhe në mes.

    Më poshtë mund të shikoni një demo dhe të shkarkoni një shembull:

    Menyja rënëse me shumë nivele me bllokun kërcyes në lëvizje

    Ka pak vaj në titull, por do të funksionojë, gjëja kryesore është kodi.

    Thelbi i këtij shembulli është krijimi i një menyje rënëse horizontale me gjerësi të plotë me një drop-down me gjerësi të plotë + shumë nivele.

    Unë nuk do ta ndryshoj kodin HTML; ai mund të merret nga shembulli i mëparshëm. Ne gjithashtu lëmë ndarës në jQuery.

    Vetëm CSS do të ndryshojë plotësisht:

    #container( gjerësia:1000px; lartësia:auto; margjina:0px automatike; mbushje-lart:10px; ) #menu1(pozicioni:relativ; shfaqja:blloku; gjerësia:100%; lartësia:auto; indeksi z:10; ) #menu1 ul( pozicioni:relativ; shfaqja:blloku; diferenca:0px; mbushja:0px; gjerësia:100%; lartësia:auto; stili i listës:asnjë; sfondi:#F3A601; ) #menu1 > ul( rreshtimi i tekstit: justifiko; madhësia e shkronjave: 1 px; lartësia e rreshtit: 1 px; ) #menu1 > ul::after( shfaqja:inline-block; gjerësia:100%; lartësia: 0 px; përmbajtja:" "; ) #menu1 ul li( pozicioni :relative; shfaqja:inline-block; gjerësia:auto; lartësia:auto; vertikale-linjë:lart; tekst-lidhja:left; ) #menu1 > ul > li(pozicioni:statik;) #menu1 ul li.razd(lartësia :28px; gjerësia:1px; sfondi:#ffffff; margin-lart:4px; ) #menu1 ul li a(ekrani:blloku; mbushja:9px 45px 0px 45px; madhësia e shkronjave:14px; font-familja: Arial, sans- serif; ngjyra:#ffffef; lartësia e vijës: 1.3em; dekorimi i tekstit: asnjë; pesha e shkronjave: bold; transformimi i tekstit: shkronja të mëdha; lartësia: 36 px; madhësia e kutisë: kutia kufitare; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( sfond:#EBBD5B; ngjyra:#2B45E0; ) #menu1 ul li ul( pozicioni:absolute; lart:36px; majtas:0px; shfaqja:asnjë; gjerësia:100%; sfondi:#EBBD5B; ) #menu1 > ul > li > ul::after( qartë: të dyja; float:asnjë; gjerësi:100%; lartësi:0px; përmbajtje:" "; ) #menu1 ul li:hover > ul(display:block;)/*kjo rresht zbaton mekanizmin e braktisjes*/ #menu1 ul li ul li( ekran :blloku; gjerësia: 30%; float: majtas; ) #menu1 ul li ul li a( ekran:blloku; transformimi i tekstit:asnjë; lartësia:auto; mbushja:7px 45px; gjerësia:100%; kuti- madhësia:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( sfond: #FDDC96; ngjyra:#6572BC; ) #menu1 ul li ul li ul(lart:0px; majtas:100%; shfaqja:asnjë; sfond:#fddc96; z-indeksi:15; ) #menu1 ul li ul li ul li (ekrani: bllok; lundrues: asnjë; gjerësi: 100%;) #menu1 ul li ul li ul a (ngjyra:#F38A01; kufiri-lart:1px solid #ffffff; )

    Kështu do të duket menyja: E vetmja gjë është që faqja duhet të ketë hapësirë ​​të mjaftueshme, pasi artikulli i fundit në të djathtë nuk ka vend për një zbritje. Ky problem mund të zgjidhet duke përdorur: nth-child, por unë nuk u mërzita.

    Shikoni demonstrimin e menysë rënëse horizontale me shumë nivele:

    Siç mund ta keni vënë re: pjesa e poshtme ka gjithashtu gjerësi të plotë. Kështu bëhen pikat në disa blloqe.

    Kjo është e gjitha për mua, shpresoj që të paktën një nga shembujt e mi t'ju përshtatet. Faleminderit per vemendjen.

    do të përfitojë edhe ata edhe mua :)

    Nëse e keni lexuar të gjithë postimin, por nuk keni gjetur se si të krijoni menunë tuaj horizontale rënëse në css, bëni një pyetje në komente ose përdorni kërkimin e faqes.

    Gjithashtu, ju këshilloj të vizitoni faqen mëmë https://site/vypadayushhee-menu/, të gjithë shembujt dhe llojet e menuve rënëse janë mbledhur atje.

    Publikime mbi temën