Menu vertikale dhe horizontale në html. Pasqyrë e shkëlqyer e menuve të bukura me shumë nivele me kode

Le të krijojmë një menu të thjeshtë navigimi horizontal për sitin. Për ta bërë këtë, ne do të përdorim teknika të thjeshta që do të rezultojnë në shfaqjen e saktë të menusë 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". Krijoni një skedar të ri të quajtur menu.html, për shembull, duke përdorur programin Dreamweawer ose duke përdorur një bllok shënimesh të rregullt. Në të, midis etiketave të trupit vendosim menunë tonë. Kjo është një listë e rregullt me ​​pika të 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 Photoshop, krijoni një imazh 3x30 px në madhësi, me një mbushje gradient siç tregohet në figurën më poshtë. Do ta ruajmë skedarin në formatin 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:

• 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; /*rreshtoni listën në të majtë*/ gjerësia:auto;/*caktoni gjerësinë e automobilit bazuar në lloji dhe përmbajtja e listës */ imazhi i sfondit: url(bg.gif); /*hiq shënuesit e listës*/ ngjyrën e sfondit:#4778c3; /*cakto ngjyrën e sfondit për imazhin*/ madhësia e shkronjave:13 px; /*cakto madhësinë e shkronjave*/ font-family:Arial, Helvetica, sans-serif ; /*vendosni fontin*/ ) ul li ( float:majtas; /*radhisni elementet e listës majtas*/ ) ul a ( shfaq:blloku; /*paraqisni lidhjet e menysë si elemente blloku*/ gjerësia:100px; /* caktoni madhësinë e bllokut*/ lartësinë: 30 px; /* dhe lartësinë e bllokut*/ rreshtimin e tekstit: qendër; /* mbishkrimin në qendër*/ lartësinë e rreshtit: 2.1em; /*hapësira e rreshtave*/ dekorimi i tekstit: asnjë; /* hiqni nënvizimin nga lidhjet*/ ngjyra:#fff; /*ngjyra e tekstit të lidhjes - e bardhë*/ kufiri-djathtas:#fff solid 1px; /*kufiri në anën e djathtë të bllokut (vija e bardhë 1px)*/ ) ul a: rri pezull ( ngjyra:#cc; /*lidhja ndryshon ngjyrën kur qëndron 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 ta përsëris veten. Mos harroni ta lidhni me faqen tonë menu.html duke përdorur

Përmblidhni. Si rezultat, ne morëm një menu horizontale plotësisht ndër-shfletuese që duket e njëjtë jo vetëm në të gjithë shfletuesit 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ë, përdoret një dizajn elementi blloku 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, vetitë CSS dhe elementë grafikë shtesë. mirë dhe menuja 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

Detyrë

Bëni një menu horizontale, artikujt e së cilës kanë një pjerrësi arbitrare (Fig. 1).

Oriz. 1. Pamja e menysë me artikuj të pjerrët

Zgjidhje

Transformimi i vetive të stilit është përgjegjës për transformimin e elementit; si vlerë e tij përdoret funksioni skewX, i cili përcakton pjerrësinë e dëshiruar. Është më e lehtë të vendosni këndin e pjerrësisë në gradë, për shembull, 30 gradë është 30º nga vertikali. Transformimi prek gjithashtu të gjithë elementët fëmijë, kështu që teksti brenda elementit do të jetë gjithashtu i anuar, gjë që nuk ka efektin më të mirë në lexueshmërinë dhe bukurinë e tij. Prandaj, është e rëndësishme të aplikoni përsëri animin në tekst, por në drejtimin tjetër; për ta bërë këtë, thjesht ndryshoni shenjën përpara vlerës së gradëve.

Shfletuesit mbështesin vetinë e transformimit kryesisht me prefikset e tyre, kështu që për universalitet në stile duhet ta përsërisni disa herë me të njëjtën vlerë, duke shtuar -moz- për Firefox, -webkit- për Safari dhe Chrome, -o- për Opera dhe -ms - për shfletuesin Internet Explorer siç tregohet në shembullin 1.

Shembulli 1: Artikulli i menysë Anim

HTML5 CSS3 IE Cr Op Sa Fx

• Xhoker
• Pazuzu
• Palpatine
• Doktor Doom

Në këtë shembull, një meny horizontale krijohet duke përdorur një listë me pika. Për të siguruar që lista të jetë horizontale, elementit li në stile i shtohet një veti e shfaqur me vlerën inline-block. Për skew, përdorni vetinë e transformimit me funksionin skewX dhe vlerën -30º. Kjo veçori zbatohet gjithashtu për lidhjet brenda listës, por me një vlerë pozitive prej 30º, kjo siguron që shkronjat të shfaqen saktë dhe jo të pjerrëta.

Shfletuesit Chrome, Safari dhe Firefox përdorin veçorinë e transformimit në elementë bllok ose inline, kështu që lidhjet kanë veçorinë e tyre të shfaqjes të vendosur për të bllokuar.

Në këtë tutorial ne do të krijojmë menu horizontale në CSS. Sigurisht, mund të përdorni zgjidhje të gatshme, për shembull, të punësoni programues për CMS Made Simple. Megjithatë, nuk po kërkoni mënyra të thjeshta, apo jo? :bully:

Hapi 1 - Shënimi HTML

Së pari, ne duhet të krijojmë artikuj të listës me një etiketë për çdo artikull në menunë tonë horizontale. Për të krijuar një nënmenu, duhet të shtoni një listë tjetër fëmijësh brenda asaj mëmë.

• Lidhja numër 1
• Lidhja numër 2
• Lista rënëse
  • Dokumentacioni
  • Mesazhet
  • Regjistrimi
• Lidhja numër 3
• Lidhja numër 4
• Lidhja numër 5

Hapi 2 - Krijoni stile CSS për menynë horizontale

Fillimisht, menyja duket vertikale, për ta rregulluar këtë ne do të shkruajmë disa stile, do të modifikojmë indentimet, kufijtë, ngjyrën e sfondit dhe do të rrumbullakojmë qoshet. Gjerësia dhe lartësia do të fiksohen. Ne do t'i rreshtojmë elementët e menusë në të majtë duke përdorur float: majtas (në mënyrë që lundrimi të marrë një strukturë horizontale).

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, #5c5e6a 0%,#3c3d44 100%); sfond: -moz-linear-gradient(lart, #5c5e6a 0%,#3c3d44 100%); sfond: -o-linear-gradient( sipër, #5c5e6a 0%,#3c3d44 100%); sfond: -ms-linear-gradient(lart, #5c5e6a 0%,#3c3d44 100%); sfond: linear-gradient(lart, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; ) .menu li ( pozicioni: relative; list-style: asnjë; float: majtas; shfaqja: bllok ; lartësia: 40 px;)

Le të shkruajmë stilin e mëposhtëm për një kohë, duke fshehur listën rënëse. Kjo do ta bëjë më të lehtë redaktimin.

Hapi 3 - Stili i menysë së lidhjes

Më pas, ne do të shkruajmë stile që shtojnë disa veti bazë CSS si lloji i shkronjave, ngjyrat, mbushja, etj. Pastaj do të shtojmë një hije për tekstin dhe tranzicionet e ngjyrave për të krijuar një efekt të qetë ku ngjyra ndryshon jo menjëherë, por në një interval të caktuar. Për të krijuar një ndarës lidhjesh, le të shtojmë një kufi majtas dhe djathtas, dhe më pas heqim kufirin e majtë nga lidhja e parë dhe kufirin e djathtë nga lidhja e fundit. Kur rri pezull mbi menunë, vetëm ngjyra do të ndryshojë.

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: 1 px solid #494942; kufiri djathtas: 1 px solid #4f5058; font- familja: Helvetica, Arial, sans-serif; pesha e shkronjave: bold; madhësia e shkronjave: 13px; ngjyra: #f4f4f4; hije teksti: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : ngjyra jashtë; tranzicioni: ngjyra .3s ease-in-out;) .menu li:first-child a (kufi-majtas: asnjë;) .menu li:fëmija i fundit a(kufi-djathtas: asnjë;) .menu li: rri pezull > a ( ngjyra: #9fde63; )

Hapi 4 - Menyja rënëse

Para së gjithash, le të heqim këtë linjë kodi që shtuam në hapin e dytë.

Meny ul (ekrani: asnjë; )

Tani do të modifikojmë stilin e nënmenysë. Le të shtojmë një pozicionim të nënmenysë prej 40 px në krye dhe 0px në të majtë të artikullit të menusë dhe të shtojmë qoshe të rrumbullakosura në fund. Le ta vendosim opacitetin në zero dhe ta ndryshojmë atë në 1 kur rri pezull për të krijuar një efekt fade in/out. Për efektin e rrëshqitjes lart/poshtë, duhet të vendosim lartësinë e listës në 0 pikselë kur fshihet me listë dhe 36 pikselë kur rri pezull mbi listën me zbritje.

Meny ul ( pozicioni: absolut; lart: 40 px; majtas: 0; tejdukshmëria: 0; sfondi: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- rrezja: 0 0 4px 4px; -webkit-tranzicioni: opacity .3s lehtësi .1s; -moz-tranzicioni: opacity .3s lehtësi .1s; -o-tranzicioni: opacity .3s lehtësi .1s; -ms-transition: opacity . 3s lehtësi .1s; tranzicion: opacity .3s lehtësi .1s;) .menu li:hover > ul ( opacity: 1; ) .menu ul li (lartësia: 0; tejmbushje: fshehur; mbushje: 0; -webkit-transition: lartësi .3s lehtësi .1s;-moz-kalim: lartësi .3s lehtësi .1s;-o-kalim: lartësi .3s lehtësi .1s;-ms-kalim: lartësi .3s lehtësi .1s;kalim: lartësi .3s lehtësi. 1s; ) .menu li:hover > ul li (lartësia: 36px; vërshimi: i dukshëm; mbushje: 0; )

Vendosni gjerësinë e menysë rënëse të klikueshme në 100 px. Pas çdo lidhjeje shtova një kufi për t'i ndarë ato. Ne do të heqim kufirin në lidhjen e fundit.

Menyja ul li a ( gjerësia: 100 pikselë; mbushja: 4 px 0 4 pikselë 40 pikselë; kufiri: 0; kufiri: asnjë; kufiri i poshtëm: 1 px solid #464649; ) .menuja ul li:fëmija e fundit a (kufi: asnjë; )

Për të përfunduar një meny horizontale CSS, duhet të shtoni një ikonë për secilën nënmenu rënëse. Për ta bërë këtë, ne do të krijojmë një klasë të personalizuar për secilën nga nënmenutë dhe do të shtojmë një imazh të sfondit.

Menyja a.d ( sfondi: url(docs.png) pa përsëritje 6 pikselë në qendër; ) .menu a.m ( sfondi: url (flluska.png) pa përsëritje 6 pikselë në qendër; ) .menu a.s ( sfond: url(arrow.png) nr -përsëriteni qendrën 6px;)

konkluzioni

Ne kemi krijuar me sukses një meny horizontale drop-down duke përdorur stilet CSS3 dhe pa e përdorur atë, megjithëse ishte gjithashtu e mundur. Nëse keni ndonjë pyetje, më tregoni në komente.

(Shkarkime: 395)

Nëse faqja juaj e internetit është më shumë se një faqe interneti e vetme, atëherë duhet të mendoni të shtoni një shirit navigimi (menu). Menyja është një seksion i një faqe interneti të krijuar për të ndihmuar vizitorët të lundrojnë në sajt. Çdo menu është një listë e lidhjeve që çojnë në faqet e brendshme të faqes. Mënyra më e lehtë për të shtuar një shirit navigimi në faqen tuaj është të krijoni një menu duke përdorur CSS dhe HTML.

Menu vertikale

Hapi i parë në krijimin e një menuje vertikale është krijimi i një liste me pika. Ne gjithashtu do të duhet të jemi në gjendje të identifikojmë listën, kështu që do t'i shtojmë asaj një atribut id me identifikuesin "navbar". Çdo element