Si të shkruani një menu horizontale CSS. CSS - menu horizontale për dizajnerët e paraqitjes. Menuja horizontale me seksione

Duke filluar me këtë mësim, ne do të fillojmë të shtrojmë faqen nga e para duke përdorur stilin popullor të sheshtë. Kjo temë është shumë gjithëpërfshirëse dhe ne do t'i kushtojmë më shumë se një mësim. Çfarë do të thotë praktike?

Është e qartë se juve në shkëmbimin e pavarur ju janë refuzuar kërkesat për paraqitjen e një siti të njëanshëm. Deputeti ju ka dhënë një layout në formën .psd dhe ju ka kërkuar të ndriçoni anën HTML. Dizajneri i paraqitjes gjithashtu duhet të presë paraqitjen në fotografi, por ne e kalojmë këtë hap, pjesa tjetër e kohës do të shpenzohet në Photoshop. Në këtë temë, ju mund të eksploroni në mënyrë të pavarur mësimet themelore në Photoshop.

Rezulton se deputeti doli të ishte një person i sjellshëm dhe na dha faqosjen dhe më vonë preu fotot. Për të krijuar një faqe HTML, na duhen: një paraqitje .psd, një dosje me fotografi, Photoshop, Notepad++ dhe një shfletues.

Ne po flasim për paraqitjen, por është vetëm një fotografi, me të cilën mund të krijojmë një faqe HTML të plotë.

Ju lutemi vini re se faqosja jonë është një dizajn klasik i sheshtë. Dizajni i sheshtë - kjo do të thotë "e sheshtë", këtu nuk do të merrni hije vëllimore, gradientë dhe "këmbanat dhe bilbilat" e tjerë.

Ne hapim paraqitjen në Photoshop dhe marrim të gjitha informacionet e nevojshme - ngjyrën, fontin, madhësinë dhe fillojmë të shkruajmë kodin, së pari shkojmë në kokën e faqes, e cila përbëhet nga logoja dhe menyja e navigimit. Kuptohet që faqja jonë do të jetë e përshtatshme për çdo pajisje ose ekran të veçantë, kështu që të gjitha dimensionet tregohen në % dhe em.

Paraqitja e kokës së faqes në internet

Le të krijojmë një anë HTML dhe një paraqitje të detajuar të kokës sonë. Në vend të kokës, shkruani në mes të etiketës së çiftuar të kokës.









  • Golovna

  • Portofoli

  • Rreth meje

  • Kontaktoni






Pa stilimin CSS, koka duket krejtësisht e ndryshme nga ajo që duhet të duket. Në skedarin style.css, ne do të shkruajmë përzgjedhës për autoritete të ndryshme në mënyrë që koka të duket në përputhje me paraqitjen.

Le të shohim pikat kryesore. Logoja dhe menyja e navigimit shfaqen në një rresht. Float në div me logon është vendosur të notojë: majtas; Menuja e navigimit tani do të jetë në të djathtë të logos. Artikujt e menysë shfaqen në një rresht - ekrani: blloku inline; Ju mund ta pastroni mbështjelljen duke futur një div bosh në kod - , në stile është e qartë e shkruar kështu - .clear(clear:both;)

Kodi i kokës së faqes së internetit për skedarin style.css:

Trupi (
font-familja: "Lato", Verdana;
madhësia e shkronjave: 100%;
sfond: #fff;
}
.mbështjell
{
marzhi: 0 auto;
gjerësia: 70%; /* shkoni te dritarja e shfletuesit tuaj */
}
.header(
mbushje: 1.3em 0em; /* fushat pranë tekstit */
}
.logo(
noton: majtas; /* mbështilleni rreth logos */
}
.logo a (
shfaqja: bllok; /* ricaktimi në bllok */
}
.nav(
noton: djathtas; /* mbështilleni rreth logos */
marzh-lart: 0.82em;
}
.nav > ul > li (
shfaqja:inline-blloku; /* ricaktimi në bllokun e rreshtit */
}
.nav > ul > li.aktive a(
sfond: #d0a5a5;
ngjyra: #ffffff;
}
.nav > ul > li > a (
shfaqja: bllok;
font-family: "Lato", sans-serif;
madhësia e shkronjave: 1.1em;
tekst-transformim: shkronja të mëdha;
mbushje: 0.5em 1em;
ngjyra: #444;
-webkit-tranzicioni: 0.9s; /* tranzicion i qetë */
-moz-tranzicioni: 0,9s;
-o-tranzicioni: 0,9s;
tranzicioni: 0,9s;
}
.nav > ul > li > a:hover (
ngjyra: #fff;
sfond: #d0a5a5;
}

Kodi HTML për paraqitjen e kokës së faqes në internet:







Portofoli i argjilës "Lugina"










  • Golovna

  • Portofoli

  • Rreth meje

  • Kontaktoni



/* e rrumbullakosur */





Gjatë procesit të vendosjes së një faqe interneti nga e para, ne heqim kokën e gatshme për faqen e internetit.

Përshëndetje, kolegë lexues të blogut tim! Artikulli i sotëm do të jetë edhe më interesant për dizajnerët e paraqitjes. Sepse sot ne do të jemi me ju për të krijuar një menu të thjeshtë horizontale. Para se të kalojmë drejtpërdrejt në paraqitjen, dua të them disa fjalë për ata që vendosën të zgjedhin vetë temën për artikullin.

Në fakt, gjithçka është e thjeshtë, kur mendova për temën e mësimit përfundimtar për sitin, fillova të mendoj dhe analizoj njohuritë e mia për dizajnin e faqosjes, kjo ishte arsyeja pse më duhej të pengohesha në fazën fillestare për t'u bërë një projektues layout, që ishte më e vështira për mua me zgjuarsi për të gjithë galusët etj. E vendosa gjithë këtë ushqim mbi veten time në mënyrë që të bëhem më i ditur në atë nga çfarë mund të përfitojnë njerëzit kur fillojnë karrierën e tyre si dizajner faqosjesh. Dhe veçanërisht për mua, që kur fillova të shkruaja layout, më shqetësonte më së shumti faqosja e menuve të ndryshme, veçanërisht kur bëhet fjalë për menunë e pasur. Dhe sot po flasim për menunë, dhe më konkretisht për menunë horizontale. Pra, le të fillojmë!

Le të fillojmë paraqitjen e menusë sonë horizontale!

Siç mund ta merrni me mend lehtësisht, përpara se të na duhet të krijojmë një faqe HTML me një plan urbanistik standard dhe të përfshijmë një skedar stili përpara saj. Nuk do ta trajtoj çështjen, pasi jam i bindur që nuk po filloni, kështu që mund t'ju them qartë se trupi dhe koka dhe se si janë të lidhura stilet. Do të them gjithashtu se përveç stileve për menunë tonë në skedarin css, do të shkruaj rivendosjen më të thjeshtë për të rivendosur stilet dhe për të arritur të njëjtën pamje në të gjithë shfletuesit. Kjo është se si duket rivendosja ime më e thjeshtë:

Për momentin nuk do të flasim për rivendosjen e stileve, sepse në thelb kjo është një temë për një artikull tjetër, e vetmja gjë që duhet të dini për kodin e përshkrimit është se ky kod kërkohet për të gjithë elementët e faqes, të cilat do t'i shkruajmë, rivendosni Përveç margjinës dhe mbushjes, duhet të punojmë për të siguruar që faqja jonë të duket e njëjtë në të gjithë shfletuesit.

Epo, çfarë kemi në këtë fazë? Ne kemi një faqe html me një plan urbanistik standard:

Menuja horizontale

Dhe ne kemi një skedar stili (ose style.css) të lidhur me këtë faqe, me këtë në vend të kësaj:

Hapi tjetër do të jetë krijimi i shënjimit HTML për menunë tonë.

Krijimi i një plan urbanistik për menunë

Sipas mendimit tonë, ne do të shqyrtojmë etiketën e re që është shfaqur në HTML5, ju inkurajoj që menjëherë të miratoni etiketa të reja në mënyrë që të ndiqni trendin dhe standardin. Ata kanë paraqitjen e tyre, kështu që është shumë herët, do t'ju duhet ende të kaloni tek ata, ashtu si dizajnerët e paraqitjes kanë kaluar nga paraqitja tabelare në paraqitjen e bllokut, një realitet i tillë është më mirë të ndiqni trendin!

Dhe meqenëse tashmë po flasim për mbështetjen e etiketave të reja HTML 5, në mënyrë që të mos kemi probleme me këtë në shfletuesit më të vjetër, dokumenti ynë duhet të përfshijë një bibliotekë të veçantë - html5shiv. Mundohuni të mos e futni në
kreu i seksionit të faqes tuaj me kodin e mëposhtëm:

Të gjitha etiketat e mëposhtme (dhe etiketat e tjera që përfshihen në HTML5) do të analizohen normalisht nga shfletuesit më të vjetër.

Le të kthehemi te shënjimi ynë. Më pas, duhet të fusim një listë shënjimi në etiketën tonë; duket kështu:

  • Golovna
  • Rreth nesh
  • Portofoli
  • Blog
  • Kontaktet

Pra, me një shënim, ne ndaluam orën e fillimit menjëherë para stileve të shkrimit, kështu që tani menuja jonë duket sikur nuk është aq shumë:

Stilet e shkrimit për menunë tonë horizontale

Dhe kështu, para së gjithash, kur shtrojmë menunë, duhet të shtojmë shënues në listë, padyshim që nuk na duhen, kështu që duhet ta bëjmë kështu:

Ul (stili i listës: asnjë; )

Pas kësaj menyja jonë do të duket kështu:

Nuk më pëlqen shumë që menyja jonë është mbërthyer në skajet e shfletuesit, le ta rregullojmë:

Me këtë kod vendosëm gjerësinë e menysë sonë, i dhamë 50 px përpara dhe poshtë dhe e zhvendosëm në qendër. Nëse nuk e dini se çfarë është gjerësia në një element blloku, atëherë për ta zhvendosur këtë element në mënyrë rigoroze në qendër, duhet të vendosim vetëm kufirin e tij të jashtëm (diferencën) djathtas dhe majtas në vlerat automatike.

Në hapin tjetër, do të na duhet ta bëjmë menunë tonë horizontale dhe të fokusohemi në elementët e kërkuar.

  • noton: majtas

    Menyja li (lundrues: majtas; )

    E gjithë menyja jonë është bërë horizontale.

    Nëse nuk e keni kuptuar që jeni vrarë dhe se po përpiqeni të hiqni qafe fuqinë lundruese, ju rekomandoj që të kërkoni në google informacione rreth kësaj fuqie dhe ta lexoni me dashamirësi.
    Ju nuk mund të bëni pa të në çdo anë të paraqitjes, po ju them me siguri. Epo, le të vazhdojmë!

    Meny li а( ekran: bllok;/* Zgjidhni elementin e bllokut */ mbushje:12px 20px;/* Zgjidhni hyrjen e brendshme */ dekorimin e tekstit: asnjë; /* zgjidhni kolltukun e poshtëm */ ngjyra:#fff;/* zgjidhni ngjyrën vendosni ngjyrën në të errët */ sfond:#444;/* ngjyrosni sfondin të errët */ font:14 px Verdana, sans-serif;/* vendosni madhësinë dhe emrin e fontit */ )

    Një nga rregullat më të rëndësishme këtu është shfaqja: bllok;. Në të djathtë, për shkak se mesazhi dërgohet në elementë të vegjël dhe elementët e vegjël janë të vështirë për t'u aksesuar në shfletues të ndryshëm, është e nevojshme të krijoni mesazhin me një element blloku dhe vetëm atëherë të vendosni fuqinë e lidhur me të. nga i jashtëm ose i brendshëm hyrjet. Nuk dua t'ju mbingarkoj me këtë informacion, por me kalimin e kohës në shembuj realë do të kuptoni se një theks i tillë ka të ngjarë të zhvillohet këtu.

    Le të shohim se çfarë kemi, le të rifreskojmë anën e shfletuesit dhe ja ku shkojmë!:

    Siç e shihni, duket keq, mund të themi se, në parim, menuja jonë është gati. E vetmja gjë që duhet bërë është vendosja e dritës kur rri pezull, por edhe krijimi i një menuje me pamje më të thjeshtë me ndarës midis artikujve.

    Le të përfundojmë me veçori:

    Menyja li (kufiri-majtas:1px solid #666; ) .menu li:first-child(kufia-majtas:asnjë; )

    Çfarë kemi bërë këtu? Por ne vendosëm gjithçka shumë thjesht për pikët tona (

  • ) madhësia e kordonit të dorës së majtë 1px dhe ngjyra #666;. Meqenëse ekziston një menu selector.li:first-child, atëherë ne kemi një pseudo-klasë të veçantë që ju lejon të zgjidhni elementin e parë fëmijë të listës. Unë gjithashtu rekomandoj të lexoni raportin në internet në lidhje me pseudo-klasat, do të zbuloni shumë informacione të dobishme.

    Unë edhe një herë mrekullohem me atë që doli prej nesh:

    Sipas mendimit tim, është shumë më bukur me veçori.

    Menyja li a:hover( sfond:#888; )

    Unë po prezantoj një pseudo-klasë të veçantë, këtë herë - rri pezull, ne vendosim ngjyrën e mesazhit kur kursori rri pezull mbi të, çuditërisht:

    Unë jam shumë i lezetshëm 🙂, shpresoj që të keni të njëjtën menu si timen.

    Ky është fundi i këtij mësimi, unë jam tashmë i sigurt se do të lindni dhe tani ju e dini se si të krijoni një menu të thjeshtë horizontale në html dhe css të pastër. Sigurisht, ne kemi krijuar një menu me një nivel, pak më komplekse do të jetë nga menyja e oborrit (me një listë të futur), por kjo tashmë është një temë për një mësim tjetër, që është gjithçka që kam. Eja, do të të jap radium!

    Vazhdojmë serinë me një mësim mbi menutë që shfaqen. Në menunë horizontale, e cila bie në css me duart tuaja.

    Nëse keni humbur këtu papritmas ose keni kërkuar një zbatim të ndryshëm të menusë, e cila shfaqet, Raja do të shkojë në seksionin e Atit.

    Ky seksion do të përshkruajë menunë horizontale që përfshin CSS dhe HTML.

    Navigimi i faqes:

    Dhe po, Detyra jonë:

    krijoni një menu horizontale me një listë css (në listat ul li) pa jQuery dhe Javascript, si dhe pa një tabelë të grumbulluar

    në kod.

    Meny horizontale që bie poshtë

    Para se të fillojmë të shkruajmë kodin, duhet të krijojmë një shabllon HTML për menunë.

    Në lidhje me faktin që ne kemi një menu universale, unë dua ta krijoj atë sa më të ngjashme me menunë e WordPress. Sipas mendimit tim, ky është një nga kodet më të thjeshta dhe më universale të menusë HTML. Duket kështu:

    • Golovna
    • Rreth nesh
    • Shërbimet tona
      • Shërbëtori ynë numër 1
      • Shërbëtori ynë nr. 2
      • Shërbëtori ynë nr. 3
      • Shërbëtori ynë nr. 4
      • Shërbimi 5
    • Noviny
    • Kontaktet

    Siç mund ta shihni nga kodi, menyja jonë që bie do të zbatohet në listat ul dhe li. Aksi duket si ky për menunë pa stile CSS:

    Le të themi, duket lajkatare, si lista përfundimtare. Më pas duhet ta dekorojmë këtë menu me stile shtesë CSS.

    Menyja horizontale që bie në CSS

    Stilet CSS për menunë që bie, dhe jo vetëm kaq, janë gjithashtu të nevojshme. Sa herë që shfaqet skeda, punoni në bazë të pseudo-klasës: rri pezull.

    Për menunë horizontale që bie poshtë, 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 %. bllok; mbushje: 9px 25px 0px 25px;madhësia e shkronjave:14px;familja e shkronjave:Arial, sans-serif;ngjyra:#ffffef;lartësia e vijës:1.3em;dekorimi i tekstit:asnjë;pesha e shkronjave:bold;tekst -transform:shkronja të mëdha;lartësia:36px;sizing-box:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( sfond:#EBBD5B; ngjyra:#2B45E0; )

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

    #menu1 ul li ul( pozicioni:absolute; lart:36px; majtas:0px; ekrani:asnjë; gjerësia:200px; sfondi:#EBBD5B; ) #menu1 ul li:hover ul(ekrani:blloku;) mekanizmi i rënies */ # menu1 ul li ul li(float:asnjë; gjerësia:100%; ) #menu1 ul li ul li(ekrani:blloku;transformimi i tekstit:asnjë; 100% madhësia e kutisë:border-box;border-top:1px solid # ffffff;sfondi:#FDDC96;ngjyra:#6572BC;

    Boshti tani është një mustaqe. Vetë mekanizmi i lëshimit të shitjeve në një rresht.

    Shikoni lëkurën nga kjo meny:

    I vogël 2 (menuja horizontale që bie poshtë)

    Më poshtë është demonstrimi i disponueshëm dhe rishikimi i menusë së robotit, ajo që shfaqet, si dhe udhëzimet për shkarkimin e fundjavës. (Demo do të hapet si drop-down në krye të kësaj faqeje, nuk ka nevojë të klikoni dhe hapni atë në një dritare të re 🙂 ose të gudulisni arushin)

    Meny horizontale që përfshin të gjithë gjerësinë

    Shumica prej jush mund të hutohen duke përdorur meny të tilla, siç e kam treguar më lart, nga e kaluara, dhe pjesërisht po mendoni se dua të shoh paraqitje të reja me menu të tilla.

    Vë bast se jeni bërë më i interesuar për të pasmet. Html nuk është më i pandryshuar, por boshti CSS është ndryshuar plotësisht. Ju thjesht mund të merrni kodin CSS këtu dhe ta ngjisni në animacion, 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: justifikoni; madhësia e shkronjave: 1 px; lartësia e rreshtit: 1 px; ) #menu1 > ul::after( shfaqja:blloku i brendshëm; gjerësia:100%; lartësia: 0 px; :relative; shfaqja: blloku i linjës; gjerësia: auto ;height:auto;vertical-lin:lart;text-align:left; ) #menu1 :14px;font-family:Arial, sans-serif;color:#ffffef;line-height:1.3em;tekst-decoration:asnjë ; font-pesha:bold;transformimi i tekstit:shkronja të mëdha;lartësia:36px; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( sfond:#EBBD5B; ngjyra:#2B45E0; ) #menu1 ul li ul( :0px; shfaqja: asnjë; gjerësia:auto; sfondi:# EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*artikulli i mbetur do të bashkëngjitet në skajin e djathtë*/ majtas:auto; djathtas:0px; ) dropdown*/ #menu1 ul li ul li(ekrani:blloku; gjerësia:auto; ) #menu1 ul li ul li(ekrani:blloku; transformimi i tekstit:asnjë; lartësia:auto; madhësia e kutisë:kufia-kufi;border-top:1px solid #ffffff; ) #menu1 # FDDC96;ngjyra:#6572BC;

    Gjithashtu, ky shembull ndryshon nga i pari në atë që menyja që bie poshtë, vetë pika, shtrihet në gjerësi 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ë praktik, pasi një erë e keqe do të përhapet përtej kufijve. Për të fituar këtë fuqi, mjafton të njohësh fuqinë e "white-space:nowrap;" në përzgjedhësin #menu1 ul li ul dhe zgjidhni atë.

    Më poshtë mund të shihni një demo ose të shijoni opsionet e fundjavës të menysë horizontale:

    Pa ndarës, menyja duket kështu. Detajet mund të shtohen në HTML me dorë, por nëse keni një CMS, për shembull WordPress, atëherë shtimi i tyre manualisht nuk është shumë i lehtë.

    Menuja horizontale me seksione

    Ka dhjetëra opsione për të shtuar konfuzion midis artikujve të menusë duke përdorur CSS të pastër. Nuk do të kopjoj opsione si::para ose::pas , ose kufiri shumë më i thjeshtë - majtas, kufiri - djathtas.

    Ka situata kur faqosja krijohet aq mrekullisht sa është e pamundur të bëhet pa jquery.

    Kodi ynë HTML mungon shumë, por ne përfshijmë vetëm vetë bibliotekën jQuery dhe skedarin që përmban sa vijon:

    Menjëherë pas.

    Pasi ta kuptoni, duhet të krijoni një skedar script-menu-3.js Dhe vendosni 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ë hiqen, + vendosni boshtin e kësaj rreshti në fund:

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

    Një menu horizontale me ndarës në jQuery do të duket kështu:

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

    Përparësitë e një vendimi të tillë janë:

    • menyja vizatohet në mënyrë dinamike;
    • qasja nga ndarësi në pikën përmes megjithatë;
    • Dizajni është edhe më i bukur.
    Menu e pasur horizontale me CSS+HTML në rënie

    Pasi të ketë shumë menu që shfaqen kur kaloni pezull mbi to, ndajini ato veçmas në nëngrupe:

  • me rënie kur synoni
  • me shpërthimin e pështymës së nivelit të tretë

    • Në rastin tim, unë kam treguar një numër të madh menysh CSS në 3 nivele, dhe më pas mendoj se nuk do të jetë e vështirë të kuptoj se çfarë duhet bërë.

    Ekziston një meny e re që shfaqet nga kutia e lëshimit kur vendoset sipër

    Për të filluar, ne duhet të shkulim pak HTML-në tonë. Do të ketë disa rreshta për nivelin 3:

    • Golovna
    • Rreth nesh
    • Shërbimet tona
      • Shërbëtori ynë numër 1
        • Suplementi i shërbimit 1
        • Suplementi i shërbimit 2
      • Shërbëtori ynë nr. 2
        • Suplementi i shërbimit 3
        • Suplementi i shërbimit 4
      • Shërbëtori ynë nr. 3
      • Shërbëtori ynë nr. 4
      • Shërbimi 5
    • Noviny
    • Kontaktet
      • Harta e drejtimeve
        • Shtesa e kartës
        • Shtojca për kartën 2
      • Forma e jakës

    #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: justifikoni; madhësia e shkronjave: 1 px; lartësia e linjës: 1 px; ) #menu1 > ul::after( shfaqja:blloku i brendshëm; gjerësia:100%; lartësia: 0 px; :relative;ekrani: blloku i linjës; gjerësia: auto ;lartësia:auto;rreshtimi vertikal:lart;radhitja e tekstit:majtas; ) #menu1 ul li.razd(lartësia:28px; gjerësia:1px; margjina-lart:4px; ) #menu1 ul li a(ekrani:blloku; mbushje:9px 45px 0px 45px;em;dekorimi i tekstit:asnjë;pesha e shkronjave:bold;transformimi i tekstit: shkronja të mëdha;lartësia:36px;sizing-box:border-box;) #menu1 ul li> (Sfondi: #EBBD5B ; ngjyra:#2B45E0; ) #menu1 ul li ul( pozicioni:absolute; lart:36px; majtas:0px; ekrani: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 zbritjes*/ #menu1 ul li ul li( display:block; gjerësia:auto; ) #menu1 ul li ul li a( display : bllok; tekst-transformim: asnjë; lartësi: automatik; mbushje: 7 px 45 px; gjerësi: 100%; kufiri në krye: 1 px solid #ffffff; a( sfond:#FDDC96; ngjyra:#6572BC; ) #menu1 ul li ul li ul(lart:0px; majtas:100%; shfaqja:asnjë; sfond:#fddc96; ) #menu1 > ul > li:last-child > ul ul(majtas:auto; djathtas:100%;) #menu1

    Skedarët për jQuery kopjohen sikur nga përpara. Nëse dëshironi të hiqni ndarësit, në mënyrë që menyja të duket të paktën pak më e bukur. Është e mundur, natyrisht, pa to.

    Aksi doli kështu:
    Kam krijuar 2 lëkura në një për të treguar se si duket me dorën e djathtë dhe në mes.

    Më poshtë mund të shikoni demonstrimin dhe të shkarkoni shembullin:

    Ekziston një meny e re që shfaqet me një drop-down rrëshqitëse kur rri pezull

    Trochi oliya hyri në titull, ale prokotit, kod smut.

    Thelbi i kësaj është krijimi i një menuje horizontale që bie në gjerësinë e plotë me një rënie në gjerësinë e plotë + pasuri.

    Unë nuk do ta ndryshoj kodin HTML, ju mund ta merrni atë nga përpara. Ndarjet në jQuery janë hequr gjithashtu.

    Vetëm CSS mund të ndryshohet në të gjithë:

    #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: justifikoni; madhësia e shkronjave: 1 px; lartësia e rreshtit: 1 px; ) #menu1 > ul::after( shfaqja:blloku i brendshëm; gjerësia:100%; lartësia: 0 px; :relative; shfaqja: blloku i linjës; gjerësia: auto ;lartësia:auto;rreshtimi vertikal:lart;radhitja e tekstit:majtas;) :28px;gjerësia:1px;sfondi:#ffffff;margin-lart:4px; ) #menu1 ul li a(ekrani:blloku; mbushja:9px 45px serif;ngjyra:#ffffef;lartësia e linjës:1.3em;dekorimi i tekstit:asnjë;pesha e shkronjave:bold;transformimi i tekstit: shkronja të mëdha;lartësia:36px ;sizing-box:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul(position:absolute; top :36px; majtas:0px; shfaqja:asnjë; gjerësia:100%; sfondi:#EBBD5B; ) #menu1 > ul > li > ul::after( qartë: të dyja; float:asnjë; gjerësia:100%; lartësia:0 px ; përmbajtja:" "; ; :blloku; gjerësia:30%; float:majtas; ) #menu1 ul li ul li a( ekran:blloku; - kuti; ngjyra:#6572BC; ) #menu1 ul li ul li ul( krye :0px; majtas:100%; shfaqja:asnjë; sfond:#fddc96; z-index:15; ) #menu1 block;float:asnjë;gjerësia:100%;) #menu1 ul li

    Kështu do të duket menyja: Një gjë - faqja ka hapësirë ​​të mjaftueshme, pasi nuk ka vend ku të shfaqet artikulli i fundit në të djathtë. Ky problem mund të zgjidhet përmes: fëmijës së nëntë, por unë nuk bëhem qytet qytet.

    Shikoni demonstrimin e menysë horizontale të bagazheve:

    Siç mund ta keni vënë re: pllaka e poshtme është gjithashtu e gjithë gjerësia. Boshti shembet kështu rreth një numri blloqesh.

    Kjo është gjithçka për mua, shpresoj, megjithëse vetëm prapanica ime do t'ju përshtatet. Ju falenderoj per respektin.

    Sillni pak leh tek ai dhe mua 🙂.

    Nëse e keni lexuar plotësisht postimin, por nuk dini si të krijoni menunë tuaj horizontale që bie në css, bëni pyetjet tuaja në komente ose kërkoni shpejt faqen.

    Gjithashtu, dëshiroj t'ju prezantoj me faqen e babait tim https://site/vypadayushhee-menu/, ku janë mbledhur të gjitha aplikacionet dhe llojet e ndryshme të menuve.

    Shënim i autorit: Ju ftoj në blogun tonë në lidhje me faqen e internetit. Kjo është një seri artikujsh kushtuar specifikimeve të reja dhe sot do të doja t'ju tregoja se si të krijoni një menu në HTML5 dhe si ndryshon ky proces nga i njëjti në versionet e mëparshme të gjuhës.

    Cila është rëndësia

    Para së gjithash, dua të them se specifikimi nuk është aq i ri - ai filloi zhvillimin e tij në 2009. Epo, tani e tutje ka një zhvillim të qëndrueshëm - html5 ka aftësi të reja, shfletuesit aktualë po i mbështesin gjithnjë e më shumë vetë këto aftësi, kështu që së shpejti mund të flasim përsëri për mbështetjen e kësaj teknologjie, megjithëse jo për të njëjtin qëllim, sa më shpejt të jetë e mundur, një grup i aftësive të reja, lëkura është e pavarur.

    Epo, mirë, çfarë do të thotë krijimi i navigimit të kokës (menusë), nëse tashmë po lexoni një artikull mbi këtë temë, atëherë padyshim që autoritetet duhet të fajësohen. Epo, si u krijua menyja më parë? Krijoni një listë etiketash për të cilën keni vendosur një kontejner shtesë për të gjithë navigimin - ndarjen kryesore.

    Pra, me shfaqjen e etiketave të reja, tani mund ta bëni atë më saktë - në vend të etiketës div, mbështillni menunë në nav - një element i ri semantik, i cili u krijua posaçërisht për qëllimin e mbledhjes së mesazheve më të rëndësishme në një të re drejtim, duke i grupuar ato së bashku.

    Në nav mund ta vendosni si listë dhe thjesht shkruani mesazhin. Menuja është krijuar për të qenë më e thjeshtë dhe më korrekte, megjithëse në shabllone të pasur, si më parë, mund të shihni zbatimin e menusë pas etiketave shtesë ul, li, a.

    Tsikavo, cili është navi kontejner i krijimeve për dërgim me përparësi në faqe. Në fakt, mund të ketë më shumë se një kontejnerë të tillë në faqe, por ju mund t'i vendosni ato në të njëjtin rend si për të formuar efektivisht navigimin e kokës (për shembull, menyja e sipërme e kokës dhe dyfishi tjetër në fund të faqes) .

    Si të merrni ndihmë me menunë horizontale html5

    Golovna Shërbimet Kontaktet Vidguki

    Nuk ka nevojë për asnjë lloj inkuadrimi në listë, gjithçka do të shfaqet fillimisht në një rresht, fragmentet e dërguara do të jenë elementë të vegjël.

    Me fjalë të tjera, ata janë edhe më të kujdesshëm ndaj formaliteteve përmes fuqive të tyre të vogla. Ju mund të kontrolloni vetëm kontrolle të tilla si ngjyra, madhësia e shkronjave dhe dhëmbëzimet e jashtme. Nëse dëshironi të vendosni një ngjyrë të ndryshme të sfondit, të krijoni ndarës dhe të shtoni lidhje të brendshme (ose të vendosni madhësinë e artikullit të menusë së lëkurës), atëherë nuk do të mund ta bëni këtë në këtë mënyrë.

    Këtu duhet të rikrijojmë pikat tona në elementët e bllokut. Për të cilat është e nevojshme që ata të shkruajnë fuqinë:

    shfaqja: bllok;

    Tani era e keqe digjet deri në fund, kështu që navigimi ynë është bërë vertikal. Për ta kthyer përsëri horizontalisht, duhet të shtoni një këngë fuqie. Për shembull, në vend të një lloji blloku, vendoseni në rreshtin e bllokut ose vendoseni në (float: majtas). Lexoni raportin për këto metoda.

    Navigacion vertikal

    Na kërkoni të krijojmë një menu vertikale në HTML5 me një listë vikory, në mënyrë që të mund të përdorim të njëjtën paraqitje që ju dhashë më shumë. Sapo vendosni të ndryshoni rendin në blloqe, erërat automatikisht zbresin një nga një, sepse dy blloqe nuk mund të qëndrojnë në të njëjtin rresht.

    Tani mund t'u tregoni atyre rregullat e regjistrimit. Blloqet kanë shumë më tepër fuqi, por në një mënyrë të vogël, ju keni shumë më tepër fuqi. Për shembull, unë shtova sa vijon:

    a( dekorimi i tekstit: asnjë; ngjyra: #fff; mbushja: 5 px; madhësia e shkronjave: 22 px; ekrani: bllok; sfondi: gradient linear (djathtas, rgba(96,108,136,1) 0%, rgba(63,76,107 ) ,1) 100%); gjerësia: 200 px; rreshtimi i tekstit: në qendër )

    tekst-dekorim: asnjë;

    ngjyra: #fff;

    mbushje: 5 px;

    madhësia e shkronjave: 22 px;

    shfaqja: bllok;

    sfond: linear-gradient(në të djathtë, rgba(96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%);

    gjerësia: 200 px;

    teksti - rreshtoj: qendër

    Menuja është një pjesë e panjohur e faqes së lëkurës, po aq sa lëkura. Menyja (ose navigimi) ju lejon të lundroni shpejt nëpër seksionet kryesore të faqes, e cila është e ngjashme me hapësirën në libra. Ngjashmëria është veçanërisht e dukshme në hartat e faqeve (lloje të ndryshme navigimi):

    Menuja mund të duket ndryshe. Ndoshta horizontale

    Vertikale

    Bagatory

    Menuja mund të jetë edhe më e larmishme dhe mund të paraqitet në mënyra edhe më të ndryshme: tabela, blloqe, hyrje të thjeshta, ndoshta hyrje me
    ...mund të merrni me mend shumë metoda "të kujdesshme" dhe shumica e tyre korrespondojnë me parimet e paraqitjes së bllokut (pa tavolinë). Në qarqet profesionale, mendoj se është e rëndësishme që navigimi të bazohet në lista të pa renditura.< >і< >.

    Pse duhet të përdorni ul në navigim?

    Gjëja e parë për të shpjeguar është të vini, sepse është thjesht logjike të mendosh: menyja është plot me posilan (seksione). Dhe nëse nuk mendoni vetëm, por shikoni fjalorin, për shembull, Ozhegov:

    Bëhet e qartë se jemi në rrugën e duhur (për ata që kanë harruar, kodi semantik është pak para kodit të saktë logjik (pas ndryshimit).

    Si të mundoni dyshimet, duke kërkuar ndihmë nga autoritetet. W3C rreth listave:

    Listat mund të jenë mashtruese:
    • jashtë përdorimit
    • urdhërimi i tejmbushjes
    • navigacion
    • takim
    Menu me foto

    • Chrysler
    • Audi
    • Bugatti

    Navigimi ( stili i listës: asnjë; /* shënuesit preferohen */ margjina: 30 px; ) .navigimi li ( float: majtas; /* artikujt e listës zgjidhen në një rresht */ margjina-djathtas: 15 px; /* qasja në meny artikujt kërkohet nuk u zemëruan */). navigacion li a ( shfaqja: bllok; rreshtimi i tekstit: në qendër; mbushja e sipërme: 100 px; * sfondi është i lartë dhe i përqendruar */ përsëritja e sfondit: pa përsëritje; gjerësia : 200px;/* dimensionet Tregohet se fotografitë duhet të shfaqen të plota */ lartësia: 50 px; ndryshe interpretohet modeli i bllokut */ lartësia: 150 px; ) .navigimi .chrysler a (background-image: /menu-audi. jpg); ) .navigacion .bugatti a (background-image: url(path-to/menu-bugatti.jpg); ) .

    Aplikimi © 2024 Pajisje celulare dhe kompjuterike