Menu e bukur horizontale duke përdorur css. Menu vertikale e ndritshme jQuery

Shumica e faqeve klasike në internet përdorin menu horizontale si element kryesor i lundrimit. Ndonjëherë mund të përmbajë veçori të ndryshme shtesë - struktura me shumë nivele, ikona për nën-artikuj, një bllok kërkimi, lista komplekse e kështu me radhë. Kohët e fundit isha në blog përzgjedhje e vogël, dhe sot do të shohim 4 shembuj praktik si të krijoni një menu dropdown duke përdorur CSS + HTML. Informacioni do të jetë i dobishëm për zhvilluesit fillestarë dhe ata që duan të ndryshojnë navigimin në faqen e tyre të internetit.

Tutoriali i parë i menusë Dropdown CSS3 është më i riu në koleksion (nga prilli 2016). Përparësitë e zgjidhjes: në këtë menu horizontale rënëse për sitin, nën-artikujt përmbajnë ikona, zbatimi dhe vetë kodi CSS janë mjaft të thjeshtë për t'u kuptuar dhe zbatuar.

Hapi 1 - Shënimi HTML

Hapi i parë është krijimi i një liste të parregulluar në HTML me lidhje ankorimi (#) për elementët e saj. Atje, në një nga artikujt, shtojmë një listë tjetër të mbivendosur, e cila do të jetë përgjegjëse për nënmenunë.

• Paneli im
• Pëlqimet
• Pamje
  • Dokumentet
  • Mesazhet
  • Dilni
• Ngarkimet
• Videot
• Dokumentet

Hapi 2 - Shfaq menunë

Ne heqim dhëmbëzimin e panevojshëm në CSS për elementët e menysë horizontale rënëse të sajtit. Në të njëjtën fazë, ne do të vendosim një gjerësi dhe lartësi fikse të artikujve të menusë, dhe gjithashtu do të shtojmë qoshe të rrumbullakosura.

Menu, .menu ul, .menu li, .menu a ( margjina: 0; mbushja: 0; kufiri: asnjë; skica: asnjë; ) .menu ( lartësia: 40 px; gjerësia: 505 px; sfondi: #4c4e5a; sfondi: - webkit-linear-gradient(lart, #4c4e5a 0%,#2c2d33 100%) sfond: -moz-linear-gradient(lart, #4c4e5a 0%,#2c2d33 100%); 100%) sfond: -ms-linear-gradient(lart, #4c4e5a 0%,#2c2d33 100%); rrezja: 5px-border-radius: 5px .menu li (pozicioni: relativ; lista-style: asnjë; float: blloku; lartësia: 40px;

Hapi 3 - dizajni i lidhjes

Përveç veçorive bazë në stile (font, ngjyrë, lartësi), ne përdorim dhe krijojmë tranzicion i qetë rri pezull ngjyrat e tekstit. Ne gjithashtu shtojmë ndarës në menu, duke hequr kufirin nga elementi i parë në të majtë dhe nga i fundit në të djathtë.

Meny li a ( ekrani: bllok; mbushja: 0 14 px; diferenca: 6 px 0; lartësia e rreshtit: 28 px; dekorimi i tekstit: asnjë; kufiri-majtas: 1px solid #393942; kufiri-djathtas: 1px solid #4f5058; font- familja: Helvetica, sans-serif: font-size: 1px 1px rgba(0,0,0,.6); tranzicioni .2s ease-in-out: color .2s ease-in-out; majtas: asnjë;

Hapi 4 - nënmenyja

Meqenëse ne kemi një meny të faqes rënëse duke përdorur CSS, duhet të vendosim edhe dizajnin për listën e mbivendosur. Së pari, vendosni një diferencë prej 40 px në krye dhe 0px në të majtë + shtoni qoshe të rrumbullakosura. Për të shfaqur/fshehur nënmenytë, vendosni fillimisht veçorinë e transparencës (opacity) e barabartë me zero, dhe kur rri pezull - një. Për të krijuar efektin e një nënmenuje që shfaqet, vendosni vlerën e lartësisë së listës në zero dhe me hover = 36px.

Meny ul ( pozicioni: absolut; lart: 40 px; majtas: 0; tejdukshmëria: 0; sfondi: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- rrezja: 0 5px 5px: opacity .25s ease .1s; opacity .25s ease .1s;) .menu li:hover > ul (opacity: 1;) .menu ul li (lartësia: 0; tejmbushje: fshehur; mbushje: 0; -webkit-transition: height .25s ease .1s; -moz-tranzicion: lartësia .25s lehtësi .1s -ms-tranzicioni: lartësia .1s ) .menu li:hover > ul li (lartësia: 36px; mbushje: 0;)

Ne vendosim gjerësinë e lidhjeve = 100px, një kufi në fund të kufirit shtohet në fund të të gjithë elementëve përveç atij të fundit. Gjithashtu, nëse dëshironi, mund të vendosni fotografi për artikujt e nënmenusë (vëmendje! mos harroni të ndryshoni shtigjet e imazheve në kod me ato që përdorni).

Menyja ul li a ( gjerësia: 100 px; mbushja: 4 px 0 4 px 40 px; kufiri: 0; kufiri: asnjë; kufiri-fund: 1px solid #353539; ) .menu ul li:fëmija e fundit a (kufi: asnjë; ) . menyja a.dokumentet ( sfond: url(../img/docs.png) pa përsëritje 6px qendër; ) .menu a.mesazhe ( sfond: url(../img/bubble.png) pa përsëritje 6px qendër; ) .menu a.signout ( sfond: url(../img/arrow.png) pa përsëritje 6px qendër; )

Mua personalisht më pëlqen lehtësia e zbatimit dhe përdorimi i ikonave. Këtu është kodi përfundimtar nga codepen:

Opsioni i Josh Riser është vizualisht i ngjashëm me menunë rënëse të mëparshme HTML dhe CSS. Kodi nuk ka një përzgjedhës fëmijë ">" (i dobishëm në dizajne me shumë nivele), por autori përdor mirë efektet CSS3 (tranzicioni, kuti-hije dhe hije teksti) për një rezultat më të bukur. Lidhja në burim nuk përshkruan procesin e krijimit të një menuje horizontale rënëse, kështu që unë do të jap menjëherë kodin përfundimtar:

NË në këtë shembull Ne do të shikojmë se si të krijojmë një menu drop-down duke përdorur CSS, e cila përveç artikujve do të përmbajë një bllok kërkimi. Një zbatim i ngjashëm shpesh mund të gjendet në moderne. Për sa i përket kohës së zbatimit dhe kompleksitetit, zgjidhja është pak më e ndërlikuar se ato të mëparshmet. Ai u publikua në maj 2013, kështu që mund t'ju duhet të ndryshoni disa gjëra, megjithëse funksionoi mirë në testimin tonë.

Kodi HTML

Për navigim, si gjithmonë, përdoret një listë e pa renditur (me klasën nav). Artikujt e rregullt të menusë janë artikuj të listës (li) dhe përmbajnë lidhje (a href) pa asnjë klasë ose ID. Përjashtim bëjnë 3 elementë të specializuar të kësaj menyje horizontale rënëse me ID-të e mëposhtme:

• cilësimet — foto e lidhjes;
• kërkimi - një bllok me një kërkim dhe një buton përkatës;
• opsionet - përmban një nënmenu (e implementuar përmes një liste me klasën subnav).

Gjithashtu në kod do të shihni një skript pa prefiks për përdorimin e vetive CSS pa prefiksa. Final Opsioni HTML për menunë rënëse duket si:

• 
• Aplikacion
• Bordi
• Opsione
  • Cilësimet
  • Aplikacion
  • Bordi
  • Opsione

Menyja CSS

1. Stilet bazë dhe artikujt e menysë

Së pari, ne specifikojmë fontin Montserrat, të errët Sfondi gri dhe lartësi fikse për artikujt e menysë. Të gjithë elementët kanë float: shtrirje majtas dhe pozicionim relativ në mënyrë që më vonë të mund të shtoni një nënmenu me pozicionin: absolute;

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margjina: 0; mbushja: 0; ) .nav ( sfond: #232323; lartësia: 60 px; ekrani: blloku inline; ) .nav li ( float: majtas; lloji i stilit të listës: asnjë; pozicioni: relative; )

2. Formatimi i lidhjeve

Artikujt e menysë përdorin modelin bazë + . Lartësia është e njëjtë si në klasën nav. Për #settings lidhjen e imazhit në fillim të menysë, vendoset shtrirja.

Nav li a ( madhësia e shkronjave: 16 px; ngjyra: e bardhë; ekrani: bllok; lartësia e rreshtit: 60 px; mbushja: 0 26 px; dekorimi i tekstit: asnjë; kufiri majtas: 1 px solid #2e2e2e; font-familja: Montserrat, sans-serif-hije: 0 0 1px rgba(255, 255, 255, 0.5 .nav li a:hover (ngjyra e sfondit: #2e2e2e; ) #cilësimet a (mbushje: 18px; lartësia: 24px; font); -madhësia: 10px; lartësia e rreshtit: 24px)

3. Blloku i kërkimit

Ky element ka një gjerësi fikse dhe përbëhet nga disa pjesë - një fushë hyrëse (#search_text) me sfond jeshil dhe butonat e kërkimit (#search_button). Në disa shfletues, ngjyra e sfondit mund të jetë gri.

#search ( gjerësia: 357px; margjina: 4px; ) #search_text( gjerësia: 297px; mbushja: 15px 0 15px 20px; madhësia e shkronjave: 16px; font-familja: Montserrat, sans-nonserif; lartësia: 0 ; Firefox 4 deri në 18 */ ngjyra: e bardhë ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ ngjyra: e bardhë; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ ngjyra: e bardhë; ); 52 px;

4. Nënmenyja rënëse

Prekja e fundit do të na lejojë të krijojmë një meny rënëse në CSS që aktivizohet për artikullin e fundit #options.

#options a(bord-majtas: 0 asnjë; ) #options>a (background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( dukshmëria: e fshehur; pozicioni: absolute; lart: 110%; djathtas: 0; gjerësia: 200 px; lartësia: automatik; tejdukshmëria: 0; tranzicioni: të gjitha 0.1s; sfondi: #232323; ) .subnav li ( float : asnjë;

Në stilet do të gjeni futjen e një imazhi të sfondit trekëndësh (triangle.png) për të treguar nënmenynë - mos harroni të tregoni rrugën e duhur për këtë dhe imazhe të tjera në shembull. Shfaqja e një nënmenuje zbatohet duke përdorur veçorinë opacity. Zgjidhja përfundimtare në kodimin:

NË këtë opsion Përdoren kryesisht teknikat CSS2.1, zgjidhja plus ose minus është e re - për Mars 2015. Nëse ju mungon një nënnivel në një menu horizontale rënëse për një sajt, atëherë ky shembull përmban tre njëherësh. Duke përdorur pseudo-class:only-child, një simbol "+" u shtohet artikujve për të treguar praninë e një nënmenuje.

Në përgjithësi, një shembull i mirë dhe i thjeshtë. Ne nuk do ta përshkruajmë në detaje procesin e zbatimit, sepse... është e ngjashme me ato të mëparshme - së pari krijoni një kornizë HTML, dhe pastaj gradualisht shtoni stile për të. Shkarkoni kodin përfundimtar duke përdorur lidhjen me burimin, mund ta shikoni pjesërisht në Codepen:

Total

Më sipër ne shikuam 4 opsione se si të krijoni një menu drop-down duke përdorur CSS + HTML për, megjithëse ka shumë shembuj të tjerë të ngjashëm në internet. Ka zgjidhje me jQuery, por kjo ka shumë të ngjarë të jetë e dobishme vetëm për zbatimin e disa efekte speciale dhe detyra jo standarde. Në shumicën e rasteve, një kombinim i CSS + HTML do të jetë i mjaftueshëm, veçanërisht pasi tani kërkesat kryesore për një menu janë komoditeti dhe shpejtësi të shpejtë shkarkime.

Së fundi, dy shënime mbi kodet e mësipërme. Disa shembuj përdorin imazhe për menunë rënëse në CSS, kështu që do t'ju duhet të rishikoni me kujdes shtigjet e imazhit dhe të specifikoni vlerat e sakta për faqen tuaj. Së dyti, disa nga zgjidhjet janë 2-3 vjeç, kështu që duhet të kontrolloni edhe një herë performancën e tyre shfletues të ndryshëm.

Nëse dini ndonjë implementim tjetër interesant modern të menyve horizontale drop-down për një faqe interneti, dërgoni lidhje në komente.

Etiketa ka për qëllim të shfaqë një listë të artikujve të menusë. Ngjashëm me etiketat dhe

brenda kontejnerit lista formohet duke përdorur etiketa
• .

  Në HTML4 etiketa është vjetëruar, rekomandohet të përdoret në vend të saj

  . Në HTML5 etiketa përfshihet përsëri, por me një kapacitet tjetër. Tani ai vepron si një enë për krijimin e etiketës dhe menusë.
  Sintaksë

  HTML	artikulli i menysë artikulli i menysë
  HTML5	...

  Atributet Vendos etiketën e dukshme për menunë. Cakton llojin e menysë. Etiketa mbyllëse

  E detyrueshme.

  Vleresimi

  Përdorimi i kësaj etikete dënohet nga specifikimi HTML4, merret vetëm kur përdoret një kod kalimtar. Në HTML5, etiketa përdoret si duhet.

  HTML 4.01 IE Cr Op Sa Fx

  Etiketa MENU

  Në këtë numër:

  • Kuzhinë ruse. Supë Burlatskaya
  • Ushqimi ukrainas. Vareniki
  • Kuzhina moldave. Paprikash
  • Kuzhinë Kaukaziane. Kharço supë
  • Kuzhina baltike. Vertinyai

  Rezultati i këtij shembulli është paraqitur në Fig. 1.

  Oriz. 1. Pamje e një liste të krijuar duke përdorur një etiketë

  HTML5 IE Cr Op Sa Fx

  Etiketa MENU

  • E re... Hape... Ruaj
  • Copy Cut Paste
  1. Menu vertikale e ndritshme jQuery 2. Efekt i këndshëm. Menuja e vallëzimit.

  

  

  4. Lista rënëse duke përdorur jQuery

  

  Stilim i shkëlqyeshëm i elementit të ndërfaqes në formën e një liste rënëse.

  

  Kur vendosni miun mbi buton, një panel shfaqet sipër.

  6. plugin jQuery"MobilyBlocks" për të shfaqur menunë radiale

  

  7. Menu duke përdorur sprites

  

  Menuja e animuar Javascript me efekt shkëlqimi.

  

  Menu e freskët, e këndshme duke përdorur jQuery.

  9. Menyja e jQuery “GarageDoor” 10. Menuja me lëvizje vertikale jQuery

  

  Zbatimi i një menuje me sasi e madhe pikë. Lëviz kur lëvizni kursorin e miut lart ose poshtë.

  11. Dizajnimi i listës rënëse jQuery

  

  12. Shtojca për navigimin e faqeve

  

  Lëvizje e qetë te në seksionin e kërkuar Në faqe. Shtojca jQuery One Page Navigation.

  13. Shtojca "Menyja e përmbajtjes së animuar"

  

  Shtojca e re jQuery. Zbatim i shkëlqyer i navigimit të animuar të faqes. Kur kaloni nëpër artikujt e menysë, shfaqet një bllok me një përshkrim dhe lidhje të mundshme, dhe në varësi të artikullit të zgjedhur, ndryshon sfondi i faqes, i cili shtrihet për të mbushur të gjithë ekranin, pavarësisht nga madhësia e dritares së shfletuesit. Sigurohuni që të shikoni faqen demo.

  14. Shtojca e menusë jQuery "Menuja e ëmbël"

  

  Menu e animuar me artikuj që shfaqen.

  15. Menyja jQuery e fiksuar

  

  Kur lëvizni poshtë faqes, menyja mbetet e fiksuar në krye të ekranit.

  16. Menytë e lëvizjes së kompletit rrëshqitës

  

  Për të zbatuar një menu vertikale me një numër të madh artikujsh. Lëvizja nëpër artikuj bëhet duke përdorur rrotën e miut ose duke përdorur lidhjet "Previos" dhe "Next".

  17. Meny elegante CSS3

  

  18. Menuja e re CSS3 në stilin Apple

  Menu e re në stilin Apple. Duket më e errët se më parë, por jo më pak e lezetshme.

  19. Menuja origjinale e jQuery

  

  Menyja rënëse me efekt sfondi. Nën-artikujt e menysë zgjerohen lart. Kur rri pezull mbi një artikull, menyja ndryshon imazhi i sfondit.

  20. Menu e animuar me jQuery

  

  Menu e animuar. Artikujt e menysë paraqiten në formën e ikonave dhe përshkrimeve. Disa efekte të shkëlqyera kur lëvizni miun mbi një artikull të menysë. Ka 8 efekte, për t'i parë të gjitha - ndiqni lidhjet Exemple1-Exemple8 në faqen demo.

  21. Menyja “Scrolling menu” XML me lëvizje

  

  Menyja e lëvizjes vertikale dhe horizontale. Vendim i mirë në sasi të mëdha artikujt e menysë.

  22. Menyja e kontekstit në një faqe interneti duke përdorur jQuery

  

  Menyja shfaqet kur klikohet klikoni me të djathtën miu në një zonë të caktuar.

  23. Meny rrethore me dy nivele për sitin

  

  Kur zgjidhni një artikull të menysë, artikujt e nënmenysë shfaqen në të djathtë.

  24. Menuja jQuery CSS3 me efekt blur “Menyja Blur” CSS3

  

  Menuja origjinale e jQuery CSS3 vjen në 7 stile të ndryshme. Kur kaloni miun mbi një nga artikujt e menysë, pjesa tjetër duket se turbullohet.

  25. Disa meny spektakolare të animuara jQuery CSS3

  

  10 menu kreative të animuara. Menytë horizontale dhe vertikale CSS3 me efekte të ndryshme dhe tranzicionet.

  

  Arkivi përfshin edhe origjinalin Skedari PSD menu.

  27. Menyja MagicLine

  

  Sfondi ose nënvizimi i një artikulli të menysë ndjek miun me një vonesë të vogël, ndërsa sfondi ndryshon pa probleme ngjyrën e tij ndërsa lëviz nga artikulli në artikull. Shumë efekt i bukur, duket e pazakontë. Kujdes: efekti nuk funksionon në opera

  28. Flluskat e imazhit

  

  Një efekt i shkëlqyeshëm kur vendosni miun mbi një nga imazhet. Efekti të kujton disi jQDock të përshkruar më sipër.

  

  31. Menu interesante jQuery me efekte të ndryshme

  

  Horizontale, menu vertikale. Efekte interesante.

  32. Menuja e madhe jQuery e stilit Apple

  

  

  34. Menuja jQuery me një efekt interesant

  

  36. Menu e freskët me një efekt interesant duke përdorur jQuery

  

  

  Shumë efekt interesant. E përkryer për dizajnimin e faqeve të portofolit.

  

  Efekt interesant i miniaturave që shfaqen kur rri pezull.

  40. Lista rënëse me autoscrolling

  

  

  Efekt i bukur tranzicioni midis artikujve.

  42. Menuja e madhe jQuery

  

  43. Menu e bukur e madhe jQuery

  

  44. Menytë e lëvizjes jQuery

  

  Artikujt e menysë paraqiten në formën e miniaturave.

  

  46. ​​Menyja e navigimit radial jQuery

  

  47. Menyja CSS dhe jQuery

  

  Një shirit navigimi me një kuti kërkimi që bëhet i tejdukshëm ndërsa lëvizni poshtë faqes.

  48. Menyja horizontale jQuery

  

  49. jQuery vertikale menu

  

  Menu e shkëlqyer vertikale. Kur rri pezull kursorin, shfaqet një artikull i menysë.

  50. Menyja horizontale jQuery

  

  

  Një efekt interesant kur rri pezull kursorin mbi një artikull të menysë.

  52. Menyja rënëse e jQuery

  

  Kur vendosni miun mbi meny, artikujt e tij do të shfaqen. Artikujt që shfaqen shfaqen në formën e një harku, rrezen e të cilit mund ta vendosni kur konfiguroni shtojcën. Në disa shfletues nuk do të shihni një ekran me hark, menyja do të shfaqet drejt, por kjo ende nuk do të prishet përshtypje të përgjithshme nga ky implementim i menysë jQuery.

  53. Shiriti i navigimit CSS dhe jQuery

  

  Një efekt interesant kur rri pezull miun mbi një artikull të menysë.

  54. Paneli kërcyes i jQuery

  Menu e freskët e animuar me tone gri.

  58. Navigimi i faqes me kolona duke përdorur jQuery

  

  Një zgjidhje interesante për navigimin, e cila është paraqitur në formular vija vertikale. Kur kaloni miun mbi këto shirita, shfaqet një imazh për artikullin dhe një listë me nënmenutë. Kur klikoni në një artikull të nënmenysë, shfaqet një faqe me një përshkrim. Ky zbatim është i përsosur për faqet promovuese ose prezantimet. Sigurohuni që të shikoni demonstrimin e shtojcës.

  59. Navigimi i faqes jQuery

  

  Navigimi i faqes është paraqitur në formën e 4 fotografive, kur kaloni pezull mbi to do të vini re një efekt interesant të animuar.

  60. Shiriti i navigimit rrotullohet me përmbajtje

  

  Paneli i navigimit. Duke klikuar mbi shigjetën lëviz faqja. Lundrimi lëviz së bashku me përmbajtjen e faqes.

  61. Paneli jQuery me shërbime të ndryshme sociale

  

  62. Menu e pastër e animuar jQuery

  

  63. Menuja e jQuery “Watercolor Brushes”.

  

  Le të krijojmë një menu të thjeshtë navigimi horizontal për sitin. Për këtë do të përdorim teknika të thjeshta, e cila do të rezultojë në shfaqja e saktë menunë tonë në të gjithë shfletuesit.

  Pra, le të fillojmë. Le të krijojmë një listë me emrat e menusë sonë. Le të jenë emrat e artikujve: "Shtëpia", "Lajmet", "Produktet", "Shërbimet", "Partnerët", "Kontaktet". Ne krijojmë skedar i ri i quajtur menu.html, për shembull, duke përdorur Dreamweawer ose duke përdorur një bllok shënimesh të rregullt. Në të mes etiketat e trupit Ne postojmë menunë tonë. Kjo eshte normale listë me pika ul me elemente li. Sigurisht, ne e bëjmë çdo artikull të menusë një lidhje, ku në vend të URL-së fusim hash #. Duke përdorur Programi Photoshop Le të krijojmë një imazh 3x30 px në madhësi, me një mbushje gradient siç tregohet në figurën më poshtë. Skedari do të ruhet në Formati GIF. Le ta quajmë bg.gif. Kjo foto do të veprojë si imazhi i sfondit të menusë sonë.

  Këtu janë përmbajtja e skedarit menu.html:

  Menu e thjeshtë horizontale ndër-shfletuesi

  • në shtëpi
  • Lajme
  • Produktet
  • Shërbimet
  • Partnerët
  • Kontaktet

  Tani le të krijojmë veçmas një skedar stili të quajtur main.css. Lista e saj është paraqitur e plotë më poshtë.

  Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*lidhoni listën në të majtë*/ gjerësia:auto;/*vendosni gjerësinë e automatikut bazuar në lloji dhe përmbajtja e listës */ background-image: url(bg.gif /*set the background image*/ background-repeat:repeat-x); /*hiq shënuesit e listës*/ ngjyrën e sfondit:#4778c3 /*cakto ngjyrën e sfondit për imazhin*/ madhësinë e shkronjave: 13 px / cakto madhësinë e shkronjave*/ font-family:Arial, Helvetica, sans-serif; ; caktoni madhësinë e bllokut*/ lartësinë: /* dhe lartësinë e bllokut*/ rreshtimin e tekstit: /* në qendër të tekstit*/ lartësinë e rreshtit; ndarja e vijave*/ tekst-dekorim:asnjë; /*hiq nënvizimin nga lidhjet*/ ngjyra:#fff; /*Ngjyra e tekstit të lidhjes - e bardhë*/ kufiri-djathtas:#fff solid 1px; /*kufi anën e djathtë bllok (1px vijë e bardhë)*/ ) ul a:hover (ngjyra:#ccc; /*lidhja ndryshon ngjyrën kur rri pezull mbi*/ )

  Unë mendoj se nuk duhet të ketë pyetje në lidhje me përmbajtjen e skedarit main.css. Unë i shkrova këshillat në komente në detaje dhe qartë, kështu që nuk do të përsëris veten time. Mos harroni ta lidhni me faqen tonë menu.html duke përdorur

  Përmblidhni. Si rezultat, ne morëm një meny horizontale plotësisht ndër-shfletuese që duket e njëjtë jo vetëm në të gjitha shfletues modern, por edhe në raste të rralla si IE 5.5 dhe IE 6.0. Të gjithë elementët e menusë paraqiten si elementë blloku dhe kanë të njëjtat dimensione prej 100 px gjerësi dhe 30 px lartësi. Si ndarës për artikujt e menysë, një dizajn elementi blloku përdoret duke përdorur një kufi të bardhë djathtas 1 px të trashë. Kjo është praktikisht mënyra më e thjeshtë për të zbatuar një menu horizontale. Sigurisht, nëse dëshironi, mund ta modifikoni, ta bëni më të bukur dhe funksional duke përdorur imagjinatën tuaj, vetitë css dhe shtesë elementet grafike. Epo, menyja jonë horizontale duket diçka si kjo:

  Përparësitë e kësaj zgjidhjeje:
  Lehtë për t'u bërë
  Kodi i thjeshtë
  Nuk ka tabela apo javascript
  Pajtueshmëria ndërmjet shfletuesve: menyja duket e njëjtë në të gjithë shfletuesit
  Përdoret vetëm një vizatim
  Kodi minimal në faqen menu.html
  Kodi minimal për zbatimin e stileve në main.css

  Skedarët e përdorur në këtë shembull mund të shkarkohen në arkiv

  Përshëndetje, të dashur lexues të blogut tim! Artikulli i sotëm do të jetë shumë i dobishëm për dizajnerët fillestarë të paraqitjes. Sepse sot do të krijojmë një menu të thjeshtë horizontale. Para se të vazhdojmë drejtpërdrejt me paraqitjen, dua të them disa fjalë se pse vendosa të zgjedh këtë temë të veçantë për artikullin.

  Në fakt, gjithçka është mjaft e thjeshtë, kur po mendoja për temën e mësimit tjetër për sitin, fillova të kujtoja dhe analizoja përvojën time në studimin e paraqitjes, me çfarë duhej të merresha. faza fillestare duke u vendosur si një projektues layout, gjë që ishte më e pakuptueshme për mua kur studioja këtë fushë, etj. I bëra vetes të gjitha këto pyetje në mënyrë që të kuptoja më mirë se çfarë mund të jetë interesante për një person që po fillon karrierën e tij si stilist. Dhe personalisht, sapo fillova të studioja layout, më lindën pyetjet në lidhje me paraqitjen e menuve të ndryshme, veçanërisht nëse po flasim për O menu me shumë nivele. Dhe kështu sot do të flasim për menunë, dhe më konkretisht për menunë horizontale. Pra, le të fillojmë!

  Le të fillojmë të shtrojmë menunë tonë horizontale!

  Siç ndoshta e keni marrë me mend, gjëja e parë që duhet të bëjmë është të krijojmë një faqe HTML me shënim standard dhe të lidhim një skedar stili me të. Nuk do të hyj në detaje këtë hap, sepse shpresoj akoma që të mos jeni aq fillestar sa duhet t'ju tregoj me detaje se çfarë është trupi dhe koka dhe si lidhen stilet. Më lejoni të them vetëm se përveç stileve për menunë tonë, do të shkruaj rivendosjen më të thjeshtë në skedarin css për të rivendosur stilet dhe për të arritur të njëjtën shfaqje të indenteve në të gjithë shfletuesit. Kjo është në fakt se si duket rivendosja ime më e thjeshtë:

  Nuk do të themi ende asgjë në detaje rreth rivendosjes së stileve, pasi në thelb kjo është një temë për një artikull tjetër, e vetmja gjë që duhet të dini për kodin e mësipërm është se falë këtë kod Të gjithë elementët e faqes që do të shkruajmë do të kenë diferencë dhe rivendosje të mbushjes në zero, kjo duhet të bëhet në mënyrë që faqja jonë të duket e njëjtë në të gjithë shfletuesit.

  Pra, çfarë kemi ne në këtë fazë? Ne kemi faqe html me shënim standard:

  Menuja horizontale

  Dhe ne kemi një skedar stili të lidhur me këtë faqe (për mua është style.css), me përmbajtjen e mëposhtme:

  Hapi tjetër do të jetë duke krijuar html shënim për menunë tonë.

  Krijimi i shënjimit për menunë

  Në shënimin tonë ne do të përdorim etiketë e re, e cila u shfaq në HTML5, vendosa t'ju mësoj menjëherë me etiketat e reja për të ndjekur trendin dhe standardin, si të thuash, Përkundër faktit se etiketat e reja HTML 5 nuk mbështeten nga shfletuesit më të vjetër, unë ende rekomandoj fuqimisht përdorimin e tyre. në paraqitjen tuaj, meqenëse është herët ose vonë do t'ju duhet ende të kaloni tek ata, ashtu si dizajnerët e paraqitjes në një kohë kaluan nga faqosja tabelare në paraqitjen e bllokut, ky është realiteti, është më mirë të ndiqni trendin!

  Dhe meqenëse tashmë po flasim për mbështetje të re etiketat html 5, në mënyrë që të mos kemi probleme me këtë në shfletuesit më të vjetër, duhet të përfshijmë një bibliotekë të veçantë në dokumentin tonë - html5shiv. Kjo bëhet duke futur në
  seksioni kryesor i faqes tuaj me kodin e mëposhtëm:

  Të gjitha etiketat pas kësaj (dhe etiketat e tjera që lidhen me HTML5) do të perceptohen normalisht nga shfletuesit më të vjetër.

  Le të kthehemi drejtpërdrejt në shënimin tonë. Më pas, duhet të fusim një listë me pika në etiketën tonë, për mua duket kështu:

  • në shtëpi
  • Rreth Nesh
  • Portofoli
  • Blog
  • Kontaktet

  Pra, duket se kemi mbaruar me shënimin, është koha të fillojmë të shkruajmë stile, pasi tani menuja jonë nuk duket shumë e mirë, për ta thënë butë:

  Stilet e shkrimit për menunë tonë horizontale

  Dhe kështu, gjëja e parë që duhet të bëjmë kur shtrojmë menunë është heqja e shënuesve të listës, padyshim që nuk na duhen, e 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ë mënyra se si menuja jonë është mbërthyer në skajet e shfletuesit, le ta rregullojmë këtë:

  Me këtë kod, ne vendosëm gjerësinë e menusë sonë, i dhamë 50px kufijtë e sipërm dhe të poshtëm dhe e pozicionuam në qendër. Kush nuk e di nëse një element blloku ka një gjerësi në mënyrë që të pozicionohet këtë element rreptësisht në qendër, vetëm duhet ta pyesim diferencë(margjina) djathtas dhe majtas me vlerën auto.

  Hapi tjetër është të bëjmë më në fund menunë tonë horizontale, kjo bëhet duke vendosur elementët

  • noton: majtas

    Menuja li (lundrues: majtas; )

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

    

    Nëse nuk e kuptoni se çfarë ka ndodhur saktësisht dhe çfarë bën prona float, ju rekomandoj që të kërkoni në google informacione për këtë pronë dhe ta studioni atë tërësisht, pasi
    Asnjë faqe e vetme e paraqitjes nuk mund të bëjë pa të, këtë mund t'ju them me siguri. Epo, mirë, le të vazhdojmë!

    Menu li a( shfaq: bllok;/* Krijoni një lidhje element blloku*/ mbushje:12px 20px;/* Cakto mbushjen e brendshme */ dekorimin e tekstit: asnjë; /* heq nënvizoj*/ color:#fff;/* bëje lidhjen ngjyrë të bardhë */ sfond:#444;/* bëje ngjyrën e sfondit të errët */ font:14 px Verdana, sans-serif;/* cakto madhësinë dhe emrin e shkronjave */ )

    Këtu është një nga më të rregulla të rëndësishme- shfaq: bllok;. Fakti është se si parazgjedhje lidhjet janë elementë inline, dhe dhëmbëzimi zbatohet ndryshe për elementët inline në shfletues të ndryshëm, kështu që këshillohet ta bëni lidhjen një element blloku dhe vetëm atëherë të aplikoni për të vetitë që lidhen me dhëmbëzimet e jashtme ose të brendshme. Nuk dua t'ju ngarkoj tani informacione të panevojshme me kalimin e kohës shembuj realë ju vetë do ta kuptoni pse vihet një theks i tillë këtu.

    Le të shohim se çfarë kemi, rifreskoni faqen e shfletuesit dhe ja ku shkoni!:

    

    Siç mund ta shihni, nuk duket keq, mund të themi se, në parim, menuja jonë është gati. E vetmja gjë që duhet bërë ende është vendosja e dritës së lidhjeve kur rri pezull dhe më duket se menyja do të duket më mirë me ndarësit midis artikujve.

    Le të fillojmë me kufijtë:

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

    Çfarë kemi bërë këtu? Po, gjithçka është shumë e thjeshtë, ne vendosëm për pikat tona (

  • ) kufiri në të majtë me një madhësi prej 1px dhe ngjyrën #666;. Sa i përket menusë përzgjedhës li:first-child , këtu përdorim një pseudo-klasë të veçantë që na lejon të zgjedhim të parën element fëmijë listë. Unë gjithashtu rekomandoj të lexoni në lidhje me pseudo-klasat në mënyrë më të detajuar në internet, do të mësoni shumë gjëra të dobishme.

    Le të shohim se çfarë kemi marrë përsëri:

    

    Sipas mendimit tim, është shumë më mirë me kufijtë.

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

    Përsëri duke përdorur një pseudo-klasë të veçantë, këtë herë rri pezull, vendosim ngjyrën e lidhjes kur rri pezull mbi të, shikoni:

    Unë mendoj se është e lezetshme 🙂, shpresoj të keni të njëjtën menu si timen.

    Këtu do ta mbyll këtë mësim, me të vërtetë shpresoj se ishte i dobishëm për ju dhe tani ju e dini se si të vendosni një menu të thjeshtë horizontale në html i pastër dhe css. Sigurisht, ne krijuam një menu me një nivel, do të jetë pak më e ndërlikuar me një menu me dy nivele (me një listë të ndërthurur), por kjo është një temë për një mësim tjetër, kjo është e gjitha për mua. Ejani përsëri, do të jem i lumtur!!!