Golovna
Tabletės
Kaip išplėsti „css goom“ adaptacinį meniu? „Pasidaryk pats“ horizontalus meniu css ir HTML Išplėskite meniu iki viso pločio css

Kaip išplėsti „css goom“ adaptacinį meniu? „Pasidaryk pats“ horizontalus meniu css ir HTML Išplėskite meniu iki viso pločio css

Horizontalus meniuє svetainės skyrių sąrašas, logiškiau jį įdėti elemento viduryje

    , o tada zasosuvat CSS stilius į jogo elementus. Toks meniu išplėtimas labiausiai išplečiamas dėl akivaizdžių jo pozicijos svetainėje pažangos.

    Kaip sukurti horizontalų meniu: išdėstymas ir dizainas

    HTML išdėstymas ir pagrindiniai horizontalaus meniu stiliai

    Norėdami užrakinti, dedami visi sąrašo elementai vertikaliai, apimantis visą konteinerio elemento plotį, kuris apima visą konteinerio bloko plotį.

    HTML žymėjimas horizontaliai naršyti

    Žymos viduryje rodomas horizontalus meniu gali būti papildomai dedamas elemento viduryje

    arba
    ...
    . Dėl šios priežasties html atpažinimas turėtų turėti semantinę prasmę, taip pat papildomą meniu bloko formatavimo galimybę.

    Іsnuє kіlka būdai skleisti їх horizontaliai. Dėl burbuolės būtina atsisakyti naršymo elementų reklamų naršyklės stilių:

    Ul ( sąrašo stilius: nėra; /*pašalinti sąrašo žymeklius*/ paraštę: 0; /*pašalinti viršutinę ir apatinę paraštę, lygi 1em*/ užpildymas-kairė: 0; /*pašalinti kairę paraštę, lygi 40 pikselių*/ ) a ( teksto dekoravimas: nėra; /*pašalinti teksto dekoravimą */)

    Metodas 1. li (rodymas: eilutinis;)

    Robimo elementi list malimi. Dėl to smarvė sklinda horizontaliai, dešinioji pusė tarp jų pridedamas papildomas tarpas, kuris yra 0,4em (jis skaičiuojamas pagal šrifto dydį). Norėdami naudoti jogą, pridėkite prie li neigiamą dešinįjį lauką li (paraštė-dešinė: -4 pikseliai;) . Pateikėme stilistinį prašymą vlasnym bokštams.

    2 metodas. li (plūduriuoti: kairėje;)

    Robimo elementų sąrašas plaukiojantis. Dėl to smarvė sklinda horizontaliai. Bloko-konteinerio aukštis ul nustatytas į nulį. Norėdami išspręsti šią problemą, pridėkite ul (perpildymas: paslėptas;) , išplėsdami jį ir leisdami paimti slankiuosius elementus. Prie pranešimo pridėkite (rodymas: blokas;) ir stilizuokite jį savo bajanui.

    3 parinktis. li (rodymas: eilutinis blokas;)

    Robimo elementų sąrašas eilutės blokas. Smarvė klaidžioja horizontaliai, iš dešinės pusės tarpelis, kaip pirmas lašas. Prie pranešimo pridėkite (rodymas: blokas;) ir stilizuokite jį savo bajanui.

    4 metodas. ul (rodymas: lankstus;)

    Robimo sąrašas ul su lanksčia talpa papildomam modeliui. Dėl to sąrašo elementai yra išdėstyti horizontaliai. Dodaёmo atsiųsti (rodykite: blokuoti;) ir pritaikykite jį savo bajanui.

    1. Atsakingas meniu su padidinimo efektu užvedus pelės žymeklį virš pranešimo

    @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( sąrašo stilius: nėra; paraštė: 40 tšk. 0 5 tšk.; užpildymas: 25 piks. 0 5 tšk.; teksto lygiavimas: centre; fonas: baltas; ) .menu-main li (rodymas: inline-block;) .menu- pagrindinis li:after (turinys: "|"; spalva: #606060; ekranas: inline-block; vertikaliai lygiuoti: viršuje; ) .menu-main li:paskutinis vaikas:po (turinys: nėra;) .menu-main a (teksto dekoravimas: nėra; šriftų šeima: „Ubuntu Condensed“, be serifo; tarpai tarp raidžių: 2 piks.; padėtis: santykinė; užpildymas apačioje: 20 pikselių; paraštė: 0 34 piks. 0 30 piks.; šrifto dydis: 17 pikselių; teksto transformavimas: didžiosios raidės; ekranas: eilutinis blokas; perėjimas: spalva .2s; ) .menu-main a, .menu-main a:visited (spalva: #9d999d;) pagrindinis a:hover(spalva: #feb386;) .menu-main a:before, .menu-main a:after ( turinys: ""; padėtis: absoliutus; aukštis: 4 pikseliai; viršuje: automatinis; : -5 pikseliai; kairėje: 50 %; fonas: #feb386; perėjimas: . 8s; ) .menu-main a:hover:fore; hover:after, .menu-main .current:after (dešinėje: 0; ) @media (maks. plotis: 550 pikselių) ( .menu-main (padding-top: 0;) .menu-main li (ekranas: blokas; ) .menu-main li:after (turinys: nėra;) .menu- main a (padding: 25px 0 20px; paraštė: 0 30px; )

    2. Atsakingas meniu smagiai svetainei

    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( padėtis: santykinė; fonas: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:prieš, .top-menu:after ( turinys: ""; ekranas: blokas; aukštis : 1 piks.; kraštinė viršuje: 3 piks. vientisas #575350; kraštinė apačioje: 1 piks. vientisas #575350; paraštė apačioje: 2 piks.; ) #575350;dėžės šešėlis: 0 2px 7px #ccc; paraštė viršuje: 2 pikseliai; ) .menu-main ( sąrašo stilius: nėra; užpildymas: 0 30 piks.; centras; padėtis: santykinis; ) .menu-main:prieš; ) ; . . (teksto dekoravimas: nėra; ekranas: eilutinis blokas; paraštė: 2 piks. 5 piks.; užpildymas: 6 piks. 15 piks.; šriftų šeima: „PT Sans“, sans-serif; šrifto dydis: 16 pikselių; spalva: #777777; kraštinė apačia : . #fff;@media (maks. plotis: 500 piks.) ( .menu-main li (rodymas: blokuoti;) )

    3. Atsakingas meniu su šukutėmis

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( sąrašo stilius: nėra; užpildymas: 0 30 taškų; paraštė: 0; šrifto dydis: 18 pikselių; teksto lygiavimas: centre; padėtis: santykinis; fonas: baltas; ) .menu-main:after ( turinys: ""; padėtis: absoliuti; plotis: 100 %; aukštis: 20 tšk.; kairėje: 0; apačioje: -20 pikselių; 255 255 255,0) 100 %) 0 -10 pikselių; fono dydis: 20px 20px; fono kartojimas: pakartoti-x; ). nė vienas; ekranas: eilutinis blokas paraštė: 0 15 taškų; pamušalas: 10px 30px; šriftų šeima: „PT Sans Caption“, sans-serif; -pagrindinis a:prieš, .meniu-pagrindinis a:po ( turinys: ""; padėtis: absoliuti; viršuje: calc (50% - 3px); plotis: 6 pikseliai; aukštis: 6 pikseliai; #F58262; neskaidrumas: 0; perėjimas: .5s lengvumas; ) . srovė:prieš, .meniu-pagrindinis a.current nuoma: po, . ) @media(max-width:680px) ( .menu-main li (rodas: blokuoti;) )

    4. Responsive meniu puslapyje

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( paraštė: 0 60 tšk.; padėtis: santykinė; fonas: #5A394E; langelio šešėlis: įterptas 1px 0 0 rgba(255,255,255,.1), įterpimas -1px 0 0 rgba(255,255,2) -0 150px rgba(255,255,255,.12), įdėta -150 pikselių 0 150 pikselių -150 pikselių rgba(255,255,255,.12); .viršutinis meniu:prieš, .e z-indeksas: 2; kairėje: 0; plotis: 100 % aukštis: 3px; ) .top-menu:before ( viršuje: 0; meniu:after ( apačioje: 0; border-top: 1px brūkšninis rgba(255,255,255,.2); ) .menu-main ( sąrašo stilius: nėra; užpildymas: 0; paraštė: 0; teksto lygiavimas: centre; ) .menu-main:prieš, .menu-main:po ( turinys: ""; padėtis: absoliutus; plotis: 50 pikselių; aukštis: 0; viršuje: 8 pikseliai; 5A394E; transformuoti: pasukti (360 laipsnių); z indeksas: -1; ) .menu-main:prieš (kairėje: -30px; pagrindinis:po (dešinėje: -30px; border-dešinėje: 12px solid rgba(2 55, 255, 255, 0) ); ) .menu-main li ( ekranas: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; Sans Caption", sans-serif; color : balta; perėjimas: .3s linijinis; ) .menu-main a.current, .menu-main a:hover @media (maks-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( ekranas: blokas; paraštė dešinėje: 0; ) .menu-main:prieš, .menu-main:po (turinys: nėra;) .menu-main a (rodymas: blokas;) )

    5. Responsive meniu su logotipu viduryje

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( pozicija: santykinis; fonas: rgba(34,34,34,.2); ) .menu-main ( sąrašo stilius: nėra; paraštė: 0; užpildymas: 0; ) .menu-main:after ( turinys: ""; ekranas: lentelė; aiškus: abu; ) .left-element (slankioji: kairėn;) .dešinė-elementas (plaukia: dešinėn;) .navbar-logo ( padėtis: absoliuti; kairėje: 50%; viršuje : 50%; transformuoti: išversti(-50%,-50%); ) .menu-main a (teksto apdaila: nėra; displayj: block; ; tarpai tarp raidžių: 2px; šriftų šeima: "Arimo", be -serif; šrifto svoris: baltas; 0,0,.3);) @media (maksimalus plotis: 830 pikselių) (.menu-main (padding-top: 90px; text-align: centre;)). ; viršuje: 10 pikselių; transformuoti: translateX(-50%); ) .menu-main li (float: none; display: inline-block; ) -dydis: 16px; ) ) @media (maks. plotis: 630 piks.) ( .menu-main li (rodymas: blokuoti;)) )

    6. Responsive meniu su Zliva logotipu

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (fonas: rgba(255,255,255,.5); laukelio šešėlis: 3px 0 7px rgba(0,0,0,.3); užpildymas: 20 pikselių; ) .top-menu:after ( turinys: "" .display: lentelė; aišku: abu; ) .navbar-logo (rodymas: inline-block;) . li (vaizdas: inline-block;) .menu-main a ( teksto dekoravimas: nėra; ekranas: blokas; : 2 piks.; šriftų šeima: "Arimo", sans-serif; šrifto svoris: paryškintas; spalva: #F73E24 ;perėjimas:.3tiesinis; ) . aukštis: 9 pikseliai;fonas:#F73E24;padėtis: absoliuti;kairė:50%;transformacija: pasukti (45 laipsnių) transliuotiX(6,5px);nepermatomumas:0;perėjimas:.3s tiesinis; (nepermatomumas: 1;) @medija (maks. plotis: 660 piks.) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( teksto lygiavimas: centre; užpildymas: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:be fore (transform: rotate(45deg) translateX(-6px);) ) @media (maks. plotis: 600px) ( .menu-main li (rodyti: blokuoti;) )

    Vitanija. Jau seniai nerašiau įrašo apie html/css. Neseniai pradėjęs kurti naują maketą ir šiuo metu naudojamas cicavia priyom, kuri leidžia praplėsti gumovim meniu (prieš naują, galite papildyti naujus elementus ir plėtra nebus padidinta, o bus 100% Batkiv bloko). Šiandien taip pat įdiegta css gumų meniu.

    Kam įdomu perskaityti straipsnį, galite stebėtis vaizdo įrašu. Autorius taip pat labai gražiai viską paaiškina:

    Gumos meniu CSS – krok 1

    Pirmasis krokas – Tse Zavzhdi html išdėstymas kur be jos. Ale, mūsų vipadkoje viskas bus paprasta:

    1. bloko apdaila meniu
    2. pats meniu, peržiūrimas žymėjimo sąraše (ul žyma)
    3. na, meniu punktai yra per vidurį, o juose, aišku, jau yra žinutė

    Viskas buvo aišku, ašis man yra toks kodas:



    Matant, kad viskas yra standartinė, ašis yra tokia:

    Dabar viską perkeliame į reikiamą vaizdą, robotui paimamas CSS.

    Krok 2 – pagrindiniai stiliai

    Toliau į obgortsa bloką pridėsiu stilių. O sau nustatysiu maksimalų plotį iki 600 pikselių (tik kad rankiniu būdu paimčiau ekrano kopiją, kad tiktų meniu), taip pat pacentruosiu bloką.

    wrap (
    fonas: #fff;
    maksimalus plotis: 600 piks
    paraštė: 0 automatinis;
    }

    Krok 3 – realistinis humanizmas

    Dabar pereikime prie paties meniu. Iš naujojo (iš ul žymos) pašalinsiu žymeklius, padidinsiu fono linijinį gradientą ir, svarbiausia, nustatysiu rodinį: table-row power į konteinerį, kad meniu veiktų kaip lentelės eilutė. Svarbu pakelti tolimoms manipuliacijoms.

    R meniu(
    fonas: linijinis gradientas (į dešinę, #b0d4e3 0%, #88bacf 100%);
    ekranas: lentelė-eilė;
    sąrašo stilius: nėra;
    }

    Jak bachite, orientacinis kodas perbrauktas su ūsais, apie ką ir rašiau. Kalbant apie tai, rankiniu būdu generuokite gradientus naudodami įrankį Ultimate CSS gradient Generator. Parašysiu plačiau apie naująjį.

    R meniu li(
    vertikalus lygiavimas: apačioje;
    ekranas: lentelės langelis;
    plotis: automatinis;
    teksto lygiavimas: centre;
    aukštis: 50px;
    kraštinė-dešinė: 1px solid #222;
    }

    • vertikaliai sulygiuoti: apačioje – šios galios reikia, kad jis iššoktų, kad meniu elemento tekstas užimtų 2 eilutes ir atrodytų tolygiai. Jei praplėstume meniu, pamatytume galią, padidintume mastelį, kad taškai būtų suspausti, o tekstas perkeltas į dvi eilutes ir išspręstų rodymo problemą. Atjunkite maitinimą ir viskas bus gerai.
    • ekranas: lentelė-ląstelė - mes nustatėme, kad pats meniu būtų rodomas kaip lentelės eilutė, logiška būtų nustatyti vieną iš elementų, kad būtų rodoma lentelės eilutė. Tse obov'yazkovo.
    • plotis: automatinis – plotis apskaičiuojamas automatiškai, priklausomai nuo pastraipos teksto ilgio
    • teksto lygiavimas: centras yra skirtas tik tekstui centruoti viduryje
    • aukštis: 50 pikselių – nustatykite 50 pikselių aukštį
    • na, pasienis-dešinė yra tik dešiniarankė siena, tokia taškų skirstytuvas

    Nors meniu atrodo nepastebimai, bet nieko, atėjo valanda atnešti Yogo glaistyti.

    Likite, ko jums reikia, - nustatykite vidurinių pastraipų stilius. Štai aš turiu šį kodą:

    R meniu li a (
    tekstas-dekoravimas: nėra;
    plotis: 1000px
    aukštis: 50px;
    vertikalus lygiavimas: vidurys;
    ekranas: lentelės langelis;
    spalva: #fff;
    šriftas: normalus 14px Verdana;
    }

    І ašis dabar meniu atrodo taip:

    Na, aš jums pasakysiu, paaiškinsiu eilutes:

    • galia tekstas-dekoravimas skasovuє podkrelennya posilan, jakas įdėti už umovchannyam
    • plotis: 1000 pikselių – galbūt svarbiausia eilutė. Reikia nustatyti maždaug tokį patį plotį, gal mažiau, bet ir daugiau nei maksimalus platus meniu punktas. Jei nenorite tapti 1000 pikselių pločio, nustatykite li meniu elemento plotį, kurio plotis nustatytas į automatinį, tada leiskite jam veikti taip, kad bet kokiam meniu elementų skaičiui jis būtų nustatytas iki 100 pikselių pločio.
    • vertikalus lygiavimas: viduryje ir ekranas: lentelės langelis – pirmiausia atvaizduokite tekstą vertikaliai centre, o kitame taip pat pabandykite tekstą rodyti viduryje. Reikia nusižengimų valdžiai.
    • šriftas – tai tik šrifto nustatymų rinkinys. Šiame straipsnyje skaitykite apie css galią šriftams.

    Krok 4 (už bokštų) galima pridėti interaktyvumo

    Pavyzdžiui, norėdami pakeisti meniu elemento spalvą užvedus pelės žymeklį. Realizuєtsya tse paprasčiau, už pseudoklasės pagalbą.

    R meniu: užveskite pelės žymeklį (
    fono spalva: #6bba70;
    }

    Meniu tikrinamas guminumas

    Tiesą sakant, meniu yra paruoštas, bet mes per daug netikrinome paties kvailiausio dalyko - niūniuosime, kaip sakiau. Na, į meniu įtrauksiu dar 2 elementus:

    Meniu prarado 600 pikselių kraštinę. Likę taškai tiesiog susispaudė, todėl buvo sudėti 2 nauji.

    Pridedu dar 1 tašką:

    Tiesiog meniu šiek tiek pasikeitė, o kitas punktas atrodo visiškai normalus. Ir yakby neturėjo vertikalios išlyginimo galios: apačioje, apie jaką, sakiau, meniu atrodys geriau.

    Pakeisiu meniu į tris taškus.

    Prekės tapo turtingesnės, tačiau pats meniu plotis nepasikeitė. Axis mi ir zrobili 100% gumos meniu!

    Kaip pritaikyti jogą?

    Iš esmės, kadangi apvyniojimo bloką nustatote ne į fiksuotą, o į maksimalų plotį, tai jo pritaikyti nebūtina. Pirmenybę teikiu didžiausio pločio galiai: 600 pikselių, o jei plotis yra mažesnis nei 600 pikselių, bloko dydis bus tiesiog pakeistas, kad sektų ekraną, užkertant kelią horizontaliam slinkimui.

    Na, jei norite ką nors pakeisti arba pakeisti meniu į mobilūs ūkiniai pastatai bet plačiuose ekranuose žiniasklaida jums padės! Sėkmės kuriant svetainę!

    Tęsiame seriją su pamoka, kaip priskirti meniu tam, ką matote. Horizontaliame meniu, ką matote, css savo rankomis.

    Jakščo tu čia gėrei vipadkovoj arba juokauji apie meniu įgyvendinimą, ką matai, radža eik į Batkivsky filialą.

    Kiekvienoje skiltyje bus aprašomas horizontalus meniu, rodomas CSS ir HTML.

    Šoninė navigacija:

    as taip Mūsų užduotis:

    robiti horizontalus meniu css sąrašas (ul li sąrašuose) be jQuery wiki kad Javascript, taip pat be zastosuvannya lentelės

    prie kodo.

    Horizontalus meniu, kurį matote

    Esame priekyje, prieš pradėdami rašyti kodą, turime padirbėti html šabloną už meniu.

    Šiuo atžvilgiu norime sukurti universalų meniu, noriu, kad jis būtų kuo panašesnis į „WordPress“ meniu išvaizdą. Mano nuomone, tai vienas paprasčiausių ir universaliausių HTML meniu kodų. Atrodo taip:

    Kaip matote iš kodo, mūsų meniu, kurį matote, bus įdiegtas ul ir li sąrašuose. Axis atrodo taip, kaip šis meniu be CSS stilių:

    Tarkime, žvelgiant tiesiai į priekį, kaip puikus sąrašas. Jie suteikė mums poreikį papuošti meniu papildomais CSS stiliais.

    Horizontalus meniu, patenkantis į CSS

    Meniu CSS stiliai, kas matoma, ir ne tik – reikia daugiau. Amžiaus skirtukas, kurį matote, kovokite remdamiesi pseudoklase: užveskite pelės žymeklį.

    Horizontaliam meniu, kurį matote, mums reikia tokios ašies:

    #meniu1( padėtis:santykinis; ekranas:blokas; plotis:100%; aukštis:automatinis; z-indeksas:10; ) #meniu1 ul(padėtis:santykinis; ekranas:blokas; paraštė:0px; užpildymas:0px; plotis:100 %;aukštis:automatinis;sąrašo stilius:nėra;fonas:#F3A601;meniu1 ul li( padėtis: santykinis; ekranas: blokas; plaukimas: kairė; plotis: automatinis; aukštis: automatinis; ) #menu1 ul li a( ekranas: blokas; užpildas: 9 piks. 25 piks. 0 piks. 25 piks.; šrifto dydis: 14 piks.; šriftų šeima: Arial, sans-serif; spalva: #ffffef; linijos aukštis: 1,3 em; teksto dekoravimas: nėra; šrifto svoris: paryškintas; tekstas -transform:didžiosios raidės;aukštis:36px;dėžutės dydis:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(fonas:#EBBD5B; spalva:#2B45E0; )

    Tai ne pabaiga, o tik dalis pagrindinio horizontalaus meniu CSS. Parašykime meniu sąrašo stilius:

    #meniu1 ul li ul ( padėtis:absoliutus; viršuje: 36 piks.; kairėje: 0 piks.; ekranas: nėra; plotis: 200 piks.; fonas: #EBBD5B; ) #menu1 ul li:hover ul(display:blokas;) užvedimo mechanizmas*/ # meniu1 ul li ul li( float:nėra; plotis:100%; ) #menu1 ul li ul li(display:blokuoti; teksto transformacija:nėra; aukštis:automatinis; 100% dėžutės dydis:border-box;border-top :1px solid #ffffff; ) #menu1 fonas:#FDDC96; spalva:#6572BC;

    Ašis dabar yra u. Pats realizacijų mažėjimo mechanizmas yra vienoje eilėje.

    Žiūrėkite odą iš meniu:

    Ryžiai. 2 (horizontalus meniu, ką matote)

    Žemiau pateikiama demonstracinė robotizuoto išskleidžiamojo meniu apžvalga, taip pat užklausa dėl nuomos atostogoms. (Demo versija bus paleista vidurinės pusės viršuje, nereikės spausti atidaryti naujame lange 🙂 arba bus daug meškų)

    Horizontalus meniu, kuris patenka į visą plotį

    Daugelis iš jūsų gali man pasakyti mažiau, pasakęs tokius meniu, lyg būčiau daugiau parodęs, aš įskiepiu iš praeities ir savotiškai dalį jūsų raciono, jei noriu su tokiais meniu rašyti naujus maketus.

    Spėju, tu pasinaudojai užpakaliuku. Html paliekamas nepakitęs, ir mes vėl prisimename CSS ašį. Galite tiesiog paimti CSS kodą iš čia ir įklijuoti jį į užpakalį arba galite pamatyti jį demonstraciniu režimu, kaip jis veikia.

    #conteiner( plotis: 1000 tšk.; aukštis: automatinis; paraštė: 0 tšk. automatinis; užpildymas viršuje: 10 tšk.; ) #meniu1( padėtis: santykinis; ekranas: blokas; plotis: 100 %; aukštis: automatinis; z indeksas: 10; ) #meniu1 ul( padėtis: santykinis; ekranas: blokas; paraštė: 0 tšk.; užpildymas: 0 tšk.; plotis: 100 %; aukštis: automatinis; sąrašo stilius: nėra; fonas: # F3A601; ) # meniu1 > ul( teksto lygiavimas: pagrįsti; šrifto dydis: 1 piks.; eilutės aukštis: 1 piks.; ) #meniu1 > ul:: po ;aukštis:automatinis;vertikalus lygiavimas:viršus;teksto lygiavimas:kairėje; ) #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:didžiosios raidės; :border-box; ) #menu1 ul li > a:hover; :0px; ekranas: nėra; plotis:automatinis; fonas:#EBBD5B; tarpas: be įvyniojimo; ) #menu1 ul li:last-child ul(/*paskutinis elementas bus pažymėtas dešiniuoju pelės mygtuku*/ left:auto; right:0px; ) išskleidžiamasis*/ #menu1 ul li ul li(display:block; plotis:automatinis; ) #meniu1 ul li ul li(display:blokuoti; teksto transformacija:nėra; aukštis:automatinis; dėžutės dydis:border-box;border-top:1px solid #ffffff;) #menu1 #FDDC96; spalva:#6572BC;

    Be to, šis užpakalis atrodo kaip pirmas kartas, kad meniu, kad tu nukrisi, pats lašas, driekiasi pūdyme, iš visų meniu elementų pločio.

    Kitiems meniu punktams ši parinktis gali būti ne patogesnė, nes smarvė bus už ribų. Norint išjungti maitinimą, pakanka žinoti galią "white-space:nowrap;" parinkiklis #menu1 ul li ul i turi jogą.

    Žemiau galite peržiūrėti demonstracinę versiją arba peržiūrėti horizontalaus meniu rodinius:

    Be mažmenininkų meniu atrodo taip. Plėtinius html galite pridėti ranka, bet jei turite TVS, pvz., „WordPress“, negalite ten pridėti rankiniu būdu.

    Horizontalus meniu su mažmenininkais

    Yra dešimtys variantų, pvz grynas CSS tarp meniu elementų pridėkite vyrą (rozdіlyuvach). Parinktys, pvz., sukti::prieš arba::po , kitaip aš nedubliuosiu kraštinės-kairėn, kraštinės-dešinės.

    Būna situacijų, jei išdėstymas toks nuostabus, kad neapsieisite be jquery.

    Turime daug html kodo, tiesiog sujungiame jį su pačia „jQuery“ biblioteka, kuri yra pergalinga:

    Vieną kartą.

    Kaip jūs suprantate, būtina sukurti failą script-menu-3.js ir įveskite šį mažą kodą:

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

    CSS stilius tokiam meniu reikia palikti, kas yra, + mesti šio kūrinio ašį iki galo:

    #menu1 ul li.razd( aukštis: 28 piks.; plotis: 1 piks.; fonas: #ffffff; paraštė-viršus: 4 piks.; )

    Norėdami pažvelgti į tokį horizontalų meniu su jQuery parinktimis, ašis bus tokia:

    Galite pažvelgti į demonstracinę versiją arba paimti žemiau esantį horizontalaus meniu šabloną:

    Tokio sprendimo privalumai yra šie:

    • meniu tęsiasi dinamiškai;
    • išeiti iš mažmenininko iki skirtumo;
    • gražiau tas zuikis papuoštas.

    Horizontaliai Baghatorivneve CSS+HTML meniu

    Kadangi tai buvo apie bugatorivnes, užvedus pelės žymeklį meniu dingsta, pavieniui juos suskirstykite į pogrupius:

    1. su vipadashkoy, kai taikosi nužudyti
    2. su sujungimo vapadka iš trečio lygio

    Savo užpakaliuke rodau bagatorivneve meniu CSS už 3 lygus, manau, nebus sunku suprasti, ką reikia padaryti.

    Bagatorivneve meniu su nuoroda į knygą, kai užvedate pelės žymeklį

    Dėl burbuolės mums reikia šiek tiek pakoreguoti savo html. Ten gausite porą eilučių 3 eilutei:

    #conteiner( plotis: 1000 tšk.; aukštis: automatinis; paraštė: 0 tšk. automatinis; užpildymas viršuje: 10 tšk.; ) #meniu1( padėtis: santykinis; ekranas: blokas; plotis: 100 %; aukštis: automatinis; z indeksas: 10; ) #meniu1 ul( padėtis: santykinis; ekranas: blokas; paraštė: 0 tšk.; užpildymas: 0 tšk.; plotis: 100 %; aukštis: automatinis; sąrašo stilius: nėra; fonas: # F3A601; ) # meniu1 > ul( teksto lygiavimas: pagrįsti; šrifto dydis: 1 piks.; eilutės aukštis: 1 piks.; ) #meniu1 > ul:: po ;aukštis:automatinis;vertikalus lygiavimas:viršus;teksto lygiavimas:kairėje ( ekranas: blokas; užpildymas: 9 tšk. 45 piks. 0 tšk. 45 tšk.; em;teksto dekoravimas: nėra; šrifto svoris: paryškintas; teksto transformavimas: didžiosios raidės; aukštis: 36 tšk.; dėžutės dydis: kraštinė-langelis;) #menu1 ul li ( fonas: #EBBD5B; spalva:#2B45E0; ) #meniu1 ul li ul( padėtis: absoliutus; viršuje: 36 piks.; kairėje: 0 piks.; ekranas: nėra; plotis: automatinis; fonas: # EBBD5B; tarpas: be įvyniojimo; ) # meniu1 > ul > li:paskutinis vaikas > ul(/*paskutinis elementas bus priedai dešiniajame krašte*/ left:auto; dešinėje:0px; ) #menu1 ul li:hover > ul(display:block;)/*ši eilutė įgyvendina užvedimo mechanizmą*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display : blokas; teksto pakeitimas: nėra; aukštis: automatinis; užpildymas: 7 pikseliai 45 pikseliai; plotis: 100 %; dėžutės dydis: kraštinė-langelis Kraštelis viršuje: 1 piks. vientisas #ffffff; ) a( fonas: #FDDC96; spalva: # 6572BC ; ) #meniu1 ul li ul li ul( viršus:0px; > ul ul(kairėje:automat.; dešinėje:100%;) #meniu1

    „jQuery“ failai nukopijuojami taip, tarsi jie būtų iš priekinio užpakalio. Vyrishiv palikite mažmenininkus, kad meniu atrodytų šiek tiek geriau. Žinoma, galite ir be jų.

    Ašis atrodė taip:
    Sukūriau 2 skinus viename, kad parodyčiau, kaip atrodau dešiniarankė ir vidurinė.

    Žemiau galite pamatyti demonstracinę versiją ir atsisiųsti atsargas:

    Išsamus meniu, kuris rodomas su sujungiamu išskleidžiamuoju meniu užvedus pelės žymeklį

    Troch aliejus nebuvo įtrauktas į pavadinimą, bet sugadino smuko kodą.

    Šio užpakalio esmė yra horizontalaus meniu sukūrimas, kuris patenka į visą plotį ir patenka į visą plotį + sodrumas.

    Html kodo nekeisiu, galima paimti iš priekinio užpakalio. Razdіlyuvachi jQuery taip pat yra priblokštas.

    Vėl ir vėl keisti tik CSS:

    #conteiner( plotis: 1000 tšk.; aukštis: automatinis; paraštė: 0 tšk. automatinis; užpildymas viršuje: 10 tšk.; ) #meniu1( padėtis: santykinis; ekranas: blokas; plotis: 100 %; aukštis: automatinis; z indeksas: 10; ) #meniu1 ul( padėtis: santykinis; ekranas: blokas; paraštė: 0 tšk.; užpildymas: 0 piks.; plotis: 100 %; aukštis: automatinis; sąrašo stilius: nėra; fonas: # F3A601; ) # meniu1 > ul( teksto lygiavimas: pagrįsti; šrifto dydis: 1 piks.; eilutės aukštis: 1 piks.; ) #meniu1 > ul:: po ;aukštis:automatinis;vertikalus lygiavimas:viršus;teksto lygiavimas:kairėje; ) #meniu1 > ul > li(pozicija:statinis;) :28px;width:1px;background:#ffffff;margin-top:4px;) # meniu1 ul li a(rodymas: blokas; užpildymas: 9 piks. 45 piks. serif; spalva: #ffffef; linijos aukštis: 1,3 em; teksto dekoravimas: nėra; šrifto svoris: paryškintas; teksto transformavimas: didžiosios raidės; aukštis: 36 pikseliai; a :hover, #menu1 ul li:hover > a(fonas:#EBBD5B; spalva:#2B45E0; ) #meniu1 ul li ul(pozicija:absoliutus; viršuje: 36 pikseliai; kairėje: 0px; ekranas: nėra; plotis: 100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:abi; float: n vienas; plotis: 100%; aukštis: 0px; turinys:" "; ) #meniu1 :blokuoti; plotis: 30%; plūdė:kairėje; ) #menu1 ul li ul li a( ekranas:blokas; -dėžė ; spalva:#6572BC; ; blokas;plaukimas:nėra;plotis:100%;) #menu1

    Meniu ašis atrodys taip: Vienintelis momentas - svetainėje gali būti pakankamai vietos, todėl nėra vietos kraštutiniam taškui dešinėje. Šią problemą galima išspręsti per: n-tas vaikas, bet aš nesiruošiu aptverti miesto.

    Žiūrėkite horizontalios meniu juostos demonstraciją:

    Kaip galėjote prisiminti: apatinė plokštė taip pat yra viso pločio. Ašis taip drovisi, kad nukris ties trinkelėmis.

    Aš esu už tai, esu tikras, noriu tau vieno iš savo užpakalių. Ačiū už pagarbą.

    Tse atneša melancholiją ir їm, ir aš 🙂.

    Jei atidžiai perskaitėte įrašą, bet nežinote, kaip susikurti savo horizontalųjį meniu, ką galite pamatyti css, nustatykite maistą komentaruose arba greitai ieškokite svetainėje.

    Taigi, radža mato tėvo pusę https://website/vypadayushhee-menu/, yra pasirinkti visi taikomi ir skirtingi meniu.

    Norėdami išplėsti svetainės meniu išdėstymo schemą, jei konteineris iš jos užima visą plotį, jis yra šone. Tokiu atveju pirmasis taškas yra kairiajame krašte, o likęs - dešinėje ir stovi tarp krašto elementų. Šiandien mes jums pasakysime, kaip kovoti.

    Siūlome jums realizacijos užpakaliuką dantenų meniu adresu Pagalba CSS už jūsų išteklius. Šiame meniu elementai dedami į vieną eilutę. Javascript nepasiekiamas. Meniu bus vietų dideliam sąrašui. Tokio meniu galvos figūra yra universalumas, nes tai pasireiškia tuo, kad tai yra skaičius, todėl gali būti net dozhina punkcija.

    Kaip įgyvendinti?

    Odos programuotojas gali pasiūlyti savo būdą, kaip atlikti nustatytą užduotį. Viską išdėstyti pagal savo vaizduotę, prilygstančią profesionalumui ir zdibnosti. Plačiausia problemos versija yra variantų lentelė. Tai taip pat naudinga tiems, kurie ragino pagreitinti „JavaScript“. Tylus, kuris ragino paspartinti galią rodyti vertybes stalo arba lentelės langelis- Paskubėsiu sugėdinti. Šis metodas negali būti pakankamai suderinamas su keliomis naršyklėmis.

    Mūsų sprendimas

    Mūsų pasiūlymas bus pagrįstas giliomis HTML5 ir CSS3 žiniomis.

    Proceso esmė – teksto derinimo galia pagrįsti vertybes. Tiems, kurie pamiršta, spėsiu: institucija orientuoja tekstą į visą konteinerio plotį.

    Pasirinkę savo sprendimą, galime pridėti dvi obov'yazykovyh taisykles. Pirmas dalykas, kad meniu elemento konteinerio plotis gali būti mažesnis, mažesnis tekstas. Tobto ne vienoje eilėje. Kita svarbi taisyklė – žodžiai ištraukiami vienodai, nepriklausomai vienas nuo kito, iki vieno taško, kad meluoja.

    Žemiau pateikiamas kodo vaizdas, kuris yra „hum“ meniu kūrimo užpakalis:

    HTML

    < ul> < li>< a href= "#" >Golovna < li>< a href= "#" >Dienoraštis < li>< a href= "#" >Novini < li>< a href= "#" >populiaresnis < li>< a href= "#" >Nauja

    ul (teksto lygiavimas: lygiuoti; perpildymas: paslėptas; /* nustatykite šoninio įpurškimo metodą */ aukštis: 20px; /* tezh usuvaє zayve */žymeklis: numatytasis; /* nustatykite burbuolės formą į žymeklį */ paraštė: 50 piks. 100 piks. 0 100 piks.; fonas: #eee; pamušalas: 5px ) li (rodymas: eilutinis; /* apiplėšti meniu elementus su tekstu */) li a (rodymas: inline-block; /* nustatyti meniu eilutės išplėtimą */ spalva: #444; ) a: užveskite pelės žymeklį ( spalva: #ff0000; ) ul: po ( /* formuojant kitą eilutę apdorojimo metodui */ turinys: "1"; kairioji paraštė: 100 % aukštis: 1px; perteklius paslėptas; ekranas: eilutinis blokas )

    Norėdami dirbti su sena gera „Internet Explorer“, prie CSS turite pridėti šį kodą

    ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( margin-left: 100%; ) * html ul ( /* reikia tik ie6 */ aukštis: 30 taškų; )

    Užregistravę reikiamas valdžios reikšmes ir kodą, paimame tokio meniu ašį:

    Metodo trūkumai

    1. Apimties kodas
    2. Neįmanoma priskirti aktyvios elemento būsenos per klasės parinkiklį. Tse vіdbuvaєtsya per rozryv sіv pastraipose (yakscho tai vienas). Problemos sprendimas būtų pridėti dar vieną konteinerį prie sąrašo elementų.
    3. Rodomame meniu turite perkelti kodą per neigiamą srauto perpildymą .

    Kurios naršyklės veikia?

    6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -
    Tabletės

Taip pat galite kostiumuoti