Si të krijoni një menu anësore. Si të krijoni një menu rënëse me CSS dhe HTML

Kjo rresht paraprihet nga 2 rreshta, në dukje të parëndësishme (Home
dhe Shiko menynë vertikale). Duhet një person i panjohur me materialin e ri (d.m.th., pikërisht atë për të cilin keni shkruar) për të kuptuar se këto rreshta për menunë rënëse nuk janë të nevojshme. Apo janë ende të nevojshme?

Kreu në shembullin tuaj ka 3 rreshta. Nga këto, vetëm një ka të bëjë me temën (vendos emrin e skedarit CSS), ndërsa 2 të tjerët jo. Kjo gjithashtu e bën të vështirë zotërimin e materialit. Për më tepër, në kompjuterin tim një kokë e tillë përgjithësisht çon në shfaqjen e gabuar të tekstit, pasi më duhet të vendos jo "utf-8", por "Windows-..."

Është e paqartë në shembull se fjalët "style.css", "block-menu" dhe "nav" nuk janë fjalë kyçe, por emra të përcaktuar nga përdoruesi. Këtë e zbulova në mënyrë eksperimentale

Shkurtimisht, unë do të doja që shembujt të përmbajnë vetëm atë që është relevante dhe që rreshtat që janë të paqarta në kontekst të shkruhen saktësisht se çfarë "relevancë" kanë ato.

• Identifikohu për të lënë komente

Oleg Sat, 09/20/2014 - 23:50

Komenti me voluminoz!!!
Komentet përpunohen vetëm pas moderimit, prandaj nuk e keni parë komentin tuaj menjëherë.
Do të përpiqem t'i përgjigjem gjithçkaje. Le të fillojmë duke pyetur pse është këtu. Epo, dy lidhje rrodhën nga versioni i punës.
Në lidhje me shfaqjen e gabuar të tekstit. Ju mund të lexoni dhe komentoni në këtë faqe, pavarësisht se kodimi i saj është i njëjtë me shembullin në postim.
Ky postim nuk është i destinuar për fillestarët absolut dhe është shkruar me kërkesë të abonentëve. Nëse shpjegoni absolutisht gjithçka, do t'ju duhet të flisni për klasat dhe identifikuesit, blloqet, pozicionimin, pseudo-zgjedhësit, kaskadën, etj. Do të jetë një artikull mjaft i gjatë dhe, më e rëndësishmja, i padobishëm.
ul.nav li:hover > ul (shfaq: bllok;) do të shfaqë artikullin e fshehur më parë. Nëse e marrim atë shkronjë për shkronjë, atëherë (këtu e shikojmë kodin paralelisht) kur rri pezull mbi artikullin e menysë (ul.nav li), do të funksionojë sa vijon: rri pezull dhe lista e parë e mbivendosur >ul do të jetë e dukshme për shkak për faktin se vlera e shfaqjes do të ndryshojë nga asnjë në bllok.

2 korrik 2016

Sot, krijimi i një menuje vertikale drop-down duke përdorur css nuk është problem, dhe unë do t'ju tregoj sot se si është bërë, absolutisht pa skripta.

Nuk është problem, nuk është problem, por sot papritmas kuptova se harrova se si ta bëja, thjesht nuk e kam bërë për një kohë të gjatë. Epo, në rregull, pasi pashë një mësim, e korrigjova plotësisht këtë problem, kështu që do të ndaj me ju në sa më shumë detaje të jetë e mundur se si ta zbatoni të gjithë këtë. Nga rruga, nëse doni të dini se si bëhet një menu e rregullt vertikale (e bukur), atëherë shikoni.

Shënim i plotë

Vendosa që menyja jonë vertikale të kishte katër artikuj. Kur kaloni pezull mbi çdo artikull, do të shfaqet një nënmenu me tre nën-artikuj. E kuptoni idenë time? Kjo e bëri shënimin pak të rëndë, kështu që këtu është:

Në parim, gjithçka është shumë e thjeshtë këtu. E gjithë menyja është në kontejnerin nav, ku krijojmë listën dhe artikujt e saj. Por meqenëse menyja jonë është me dy nivele, në secilin artikull të listës (li) ne gjithashtu fusim një listë me klasën e dytë-ul (si një ul i vendosur). Emri i klasës nuk ka rëndësi. Dhe ne e bëjmë këtë me çdo artikull. Nëse studioni me kujdes shënimin duke përdorur shembullin e një pike, do të kuptoni gjithçka, këtu është përsëri:

Kjo do të thotë, ne vendosim një listë në një artikull, i cili nga ana tjetër përmban artikuj të mbivendosur. Kjo është e gjitha me shënimin html, le të kalojmë te css, ku gjithçka është shumë më interesante.

Dizajnimi i menusë sonë

Do të bëj disa cilësime bazë. Në veçanti, duhet të hiqni shënuesin nga artikujt e menusë dhe të vendosni lartësinë e tij. Unë gjithashtu do të rivendos plotësimin e të gjithë elementëve. Ju nuk keni pse ta bëni këtë, është opsionale, vetëm mbani mend se si parazgjedhje një listë e ndërthurur do të jetë e futur.

*( margjina: 0; mbushja: 0; ) #nav (lartësia: 70 px; ) #nav ul( stili i listës: asnjë; )

Këto janë rregullat e para që dërgohen në fletën e stilit. Le të shohim se si duket menuja jonë:

E tmerrshme, apo jo? Por është në rregull, do ta rregullojmë tani!

Rregullat e mëposhtme të stilit janë shumë të rëndësishme nga pikëpamja estetike - menuja jonë do të bëhet shumë më e bukur për t'u parë. Këtu janë të gjitha rregullat:

#nav > ul > li( gjerësia: 180 px; pozicioni: relative; ) #nav li a (ekrani: bllok; sfondi: #cccc; kufiri: 1px solid #333; ngjyra: #fff; mbushja: 15 px; ) #nav li a:hover( sfond: #999; )

Çfarë kam vendosur këtu? Së pari, unë specifikova gjerësinë dhe pozicionimin relativ për artikujt e listës kryesore. Është e nevojshme për të kryer më pas pozicionimin absolut të nënmenusë. Më pas, ne rregullojmë pamjen e lidhjeve. I bëjmë në formë blloku, i lyejmë në ngjyrën e dëshiruar, i shtojmë mbushje, një kornizë etj. Fakultative. Ne gjithashtu do të ndryshojmë ngjyrën e sfondit në hover. Rezultati i të gjitha këtyre manipulimeve:

E preva pamjen e ekranit. Nëse bëni gjithçka pas meje, atëherë do t'i keni të gjitha pikat dhe nënpikat me radhë. Kjo është e gjitha, tani pamja nuk është e neveritshme, mund të përqendroheni në krijimin e menusë në rënie!

Krijimi i një menuje vertikale me drop-down

Tani për tani, të gjitha menutë e ndërlidhura janë të dukshme. Kjo është e gabuar, si parazgjedhje ato nuk duhet të jenë në faqe, por duhet të shfaqen vetëm në hover. Kjo do të thotë, kur rri pezull mbi një artikull specifik, një menu duhet të shfaqet vetëm për të. A është e qartë pika?

Për të filluar, ne do t'i fshehim të gjitha nënmenytë tona, por para kësaj duhet t'i pozicionojmë ato në mënyrë që të mos vendosen nën artikullin kryesor, por në të majtë të tij. Për ta bërë këtë, le të shkruajmë këtë:

#nav li .second-ul(ekrani: bllok; pozicioni: absolut; majtas: 100%; lart: 0; )

Kjo do të thotë, për një listë të ndërthurur ne specifikojmë pozicionimin absolut dhe një zhvendosje majtas prej 100% të gjerësisë nga gjerësia e bllokut prind (artikulli i listës). Dhe me sa dimë, gjerësia e tij është 180 piksele. Lartësia e nënmenusë duhet të jetë në të njëjtin nivel. Pas këtyre manipulimeve duhet të merrni diçka si kjo:

Epo, në fakt tani zëvendësoni ekranin: bllokoni në stilet për listat e ndërlidhura me ekranin: asnjë . Pas kësaj, nënmenytë do të zhduken nga ekrani, gjë që na nevojitet. Po i afrohemi fazës më të rëndësishme - zbatimit të braktisjes në css. Për ta bërë këtë, ne do të bëjmë këtë:

#nav li:hover .second-ul( shfaqja: bllok; )

Është shumë e thjeshtë, kjo linjë ju mjafton! Këtu në thelb po i themi shfletuesit: kur rri pezull mbi një artikull në listën kryesore, bëje nënlistën të dukshme!

Le të kontrollojmë. Tregoni drejt secilit artikull dhe sigurohuni që për secilin artikull të shfaqet një nënmenu unike. Kështu duket:

Dhe ky do të jetë rasti për çdo artikull. Nëse keni bërë gjithçka pas meje, atëherë kjo është pikërisht ajo që do të ndodhë. Sidoqoftë, shtova gjithashtu gjerësinë për artikujt e listës së ndërthurur në mënyrë që ato të kenë të njëjtën madhësi si ato kryesore:

#nav li li (gjerësia: 180 px; )

Epo, atëherë mundeni, sipas gjykimit tuaj, të ndryshoni pamjen e gjithë kësaj menuje, të shtoni artikuj të rinj, etj. E gjithë kjo është shumë e lehtë për t'u bërë pasi të njihni teknologjinë. Dhe unë ju tregova teknologjinë. Nëse keni ndonjë pyetje, mund t'i shkruani ato në komente, por këtu e mbyll artikullin.

Nga autori: Pershendetje te gjitheve. Për disa arsye, webmasters lidhin menutë rënëse me skriptet, por për një kohë të gjatë një navigim i tillë mund të bëhet absolutisht lehtësisht duke përdorur CSS të pastër. Për më tepër, një menu e tillë nuk do të jetë më keq. Sot do t'ju tregoj se si të krijoni një menu dropdown në css. Unë do të ndaj, si të thuash, recetën.

Plani i mësimit dhe faqosja e menusë sonë

Në përgjithësi, le të vendosim së pari se si do ta krijojmë vetë menunë. Në html5, mënyra standarde është ta krijoni atë në kontejnerin nav duke përdorur një listë me pika. Le të bëjmë vetëm atë. Ne do t'i heqim shënuesit më vonë duke përdorur css, nuk na duhen fare në meny.

Në fakt, unë do të shkruaj menjëherë shënimin me lista të mbivendosura në html. Kjo do të thotë, lista jonë do të jetë me dy nivele - do të përmbajë lista të tjera. Përkatësisht, për secilin artikull ka 1 listë, e cila do të formojë një menu rënëse.

Ekziston një pikë e rëndësishme këtu, e cila është se mund të mos keni nevojë të bëni çdo artikull në rënie, por vetëm disa. Nuk ka problem, atëherë në artikujt pa zbritje ne thjesht nuk krijojmë lista të mbivendosura.

Në fakt, këtu është, e gjithë shënimi:

E kuptoj që është i madh. Ky është problemi me listat e mbivendosura, që ju duhet të shkruani shumë kode. Por kini parasysh faktin që ne po bëjmë 4 pika kryesore dhe për secilën do të ketë një menu me zbritje.

Në fakt, i dhashë të gjithë navigimit një identifikues të navigimit dhe të gjitha listat e mbivendosura një klasë stili të dytë për të kuptuar se ato janë të ndërthurura.

E shkëlqyeshme, ne kemi gati shënimin, mund të shikoni rezultatin:

Po, duket e tmerrshme. Por tani do të aktivizojmë css dhe brenda pak minutash navigimi ynë do të transformohet. Le te punojme.

Shkrimi i stileve CSS

Gjëja e parë që do të bëj është të rivendos të gjithë mbushjen në parazgjedhje për të gjithë elementët. Ata vetëm do të na pengojnë, është më mirë t'i vendosim vetë më vonë, aty ku është e nevojshme.

*( margjina: 0; mbushje: 0; )

#nav(lartësia: 70px; ) #nav ul(stili i listës: asnjë; )

Tani duhet të vendosim se cila do të jetë menyja jonë. Horizontale apo vertikale? Unë sugjeroj të bëni fillimisht atë horizontale dhe të shihni gjithçka në shembullin e saj. Për ta bërë këtë ju duhet të shkruani stilet e mëposhtme:

#nav > ul > li( float: majtas; gjerësia: 180 px; pozicioni: relative; )

Vini re se duke përdorur shenjën > i referohemi artikujve të listës që janë të vendosur drejtpërdrejt në ul, të cilët janë të vendosur drejtpërdrejt në nav. Kjo është shumë e rëndësishme sepse parandalon që stili të aplikohet në artikujt e listës së ndërthurur. Fakti është se, sipas idesë time, artikujt në listën kryesore do të vendosen horizontalisht, dhe në ato të mbivendosura - vertikalisht.

Por ju, sigurisht, mund ta bëni ndryshe, në përputhje me idenë tuaj. Mund të siguroheni që të gjitha pikat të jenë në një vijë.

Gjithsesi, kodin e mësipërm shpresoj ta kuptoni. Ai detyron artikujt e listës kryesore të shtyhen majtas në mënyrë që të shfaqen të gjithë në të njëjtën linjë, edhe pse janë elementë blloku. Unë gjithashtu u dhashë atyre një gjerësi të qartë dhe një pozicion relativ.

Pse pozicionimi? Është e nevojshme që më pas të pozicionohen absolutisht listat e mbivendosura. Nëse keni studiuar pozicionimin në CSS, atëherë me siguri e dini se nëse i jepni një blloku pozicionim relativ, atëherë të gjithë elementët në të mund të pozicionohen absolutisht brenda këtij blloku të veçantë, dhe jo të gjithë dritares së shfletuesit.

Ndërkohë, ja çfarë kemi marrë deri tani:

Nga kjo pamje e ekranit tashmë mund të imagjinoni rezultatin e përafërt. Natyrisht, ne ende duhet t'i dizajnojmë artikujt bukur në mënyrë që sytë të mos kërkojnë mëshirë kur shikojnë navigimin.

#nav li a( ekrani: bllok; sfondi: #90DA93; kufiri: 1px solid #060A13; ngjyra: #060A13; mbushja: 8 px; rreshtimi i tekstit: në qendër; dekorimi i tekstit: asnjë; ) #nav li a:hover( sfond: #2F718E )

Së pari, vetë lidhjet duhet të bllokohen. Kjo është e nevojshme që mbushja të funksionojë dhe të gjitha vetitë të zbatohen siç duhet. Më pas, unë specifikoj ngjyrat e sfondit, tekstin, parametrat e kornizës, mbushjen e brendshme dhe shtrirjen e tekstit në qendër. Së fundi, zhbëj nënvizimin e lidhjeve.

Të gjithë këta parametra nuk duhet të specifikohen ashtu si unë. Ju mund të zgjidhni ngjyrat në mënyrë arbitrare, të bëni një kornizë të ndryshme ose të mos e përdorni fare, dhëmbët mund të zvogëlohen ose rriten.

Ju lutemi vini re se në këtë rast ne nuk kemi përdorur shenjën >, kështu që rregullat e mësipërme do të zbatohen për të gjitha lidhjet, duke përfshirë ato në paragrafët e ndërlidhur. Pra, tani kemi sa vijon:

E shkëlqyeshme, por ju e kuptoni që nën-artikujt nuk duhet të jenë të dukshëm, ato duhet të hapen kur rri pezull mbi artikullin e dëshiruar. Pa këtë, menuja jonë duket si një tryezë. Epo, është koha për të fshehur artikujt e mbivendosur.

#nav li .second( shfaqja: asnjë; pozicioni: absolut; lart: 100%; )

Së pari, ne fshehim listat e mbivendosura plotësisht. Së dyti, ne u japim atyre pozicionimin absolut dhe koordinatën e sipërme: 100%. Kjo do të thotë që menyja rënëse do të shfaqet qartë poshtë artikullit kryesor të cilit i përket, qartë në 100% të lartësisë së atij artikulli.

Tani ne shohim vetëm menunë kryesore në faqen e internetit, e cila është ajo që na nevojitet.

Le të zbatojmë braktisjen

Gjithçka që na mbetet të bëjmë është gjëja më e rëndësishme - të kuptojmë vetë rënien. Nuk ka asgjë të komplikuar në lidhje me të, shikoni këtë kod:

#nav li:hover .second( shfaqja: bllok; )

Ky kod do të funksionojë pa të meta. Kur rri pezull mbi një artikull të menysë kryesore, nënlista do të bëhet e dukshme. Për më tepër, vetëm lista që është e vendosur në artikullin mbi të cilin lëviz kursori.

Ekziston vetëm një problem i vogël - gjerësia e artikujve të mbivendosur nuk përputhet me gjerësinë e atyre kryesore. Por kjo mund të zgjidhet shumë lehtë duke shtuar stilet e duhura:

#nav li li (gjerësia: 180 px; )

Kjo është ajo, problemi u zgjidh:

Gjithçka funksionon në mënyrë perfekte. Kur rri pezull mbi artikullin kryesor, shfaqet një meny rënëse që korrespondon me të. Nëse e lëvizni kursorin anash, ai zhduket. Nëse e zhvendosni kursorin te vetë artikujt e mbivendosur, mund të klikoni mbi to dhe të shkoni në seksionin e dëshiruar të faqes. Kështu, ne kemi krijuar për ju një menu drop-down shumë të thjeshtë dhe të lehtë pa absolutisht asnjë skript.

Konvertimi i menusë në vertikale

Epo, në rregull, ne e kemi kuptuar plotësisht navigimin horizontal, por përveç kësaj, navigimi vertikal është shumë i zakonshëm në sajte dhe mund të jetë gjithashtu një me rënie. Në fakt, ndryshimi i menusë nga horizontale në vertikale është shumë i lehtë.

Së pari, do t'ju duhet të hiqni float:left nga artikujt e listës kryesore. Është kjo veti që siguron që artikujt tanë të shfaqen në një rresht, por pse na duhet kjo nëse navigimi duhet të jetë vertikal?

Tani mbetet vetëm të ndryshohen rregullat për përzgjedhësin #nav li .second, domethënë për listat e ndërlidhura, domethënë, ato duhet të pozicionohen pak më ndryshe. Si kjo:

#nav li .second( shfaqja: asnjë; pozicioni: absolut; majtas: 100%; lart: 0; )

Kjo do të thotë, është e nevojshme të regjistrohen dy koordinata në vend të një. Së pari, në rastin e lundrimit horizontal, thashë që, siç ishte planifikuar, artikujt e nënmenusë duhet të shfaqen nën artikujt kryesorë. Në rastin e një menuje vertikale, kjo nuk është e përshtatshme - artikujt duhet të shfaqen anash.

Prandaj, ne ndryshojmë majën: 100% në të majtë: 100%. Përveç kësaj, ne gjithashtu kemi nevojë për koordinatën e sipërme. E vendosim në 0 në mënyrë që nënmenyja të jetë në të njëjtin nivel me artikullin që i përgjigjet.

Kjo është ajo, tani gjithçka funksionon siç duhet. Mund ta provoni. Siç mund ta shihni, nuk gënjeva kur thashë se do të më duhej të rishkruaja vetëm disa rreshta kodi.

Menu horizontale me disa nivele

Duke përdorur pothuajse të njëjtën qasje, mund të krijoni më shumë nivele të menusë nëse është e nevojshme. Për shembull, le të krijojmë një listë për artikullin e katërt të menysë kryesore, e cila do të vendoset në një nga nën-artikujt.

Detyrë

Krijoni një menu dropdown duke përdorur mjetet CSS dhe HTML.

Zgjidhje

Së pari, le të krijojmë një listë, ta vendosim atë horizontalisht dhe të stilojmë pamjen e saj. Kjo do të jetë menyja kryesore, dhe më pas ne do të krijojmë një menu rënëse për artikujt e saj.

• shtëpi
• Kontaktet
• Shërbimet

Ne përfunduam me një listë si kjo:

Figura 1. Punë përgatitore.

Ju lutemi vini re: stili i lidhjes ndryshon kur rri pezull mbi të. Kjo zbatohet duke përdorur pseudo-klasën :hover. Kjo pseudo-klasë specifikon stilin e një elementi kur kursori rri pezull mbi të pa shtypur butonin e miut. Nëse shtypni butonin, kjo është një pseudo-klasë tjetër.

Tani le të kalojmë në zgjidhjen e problemit tonë. Le të krijojmë një menu rënëse për artikullin "Shërbime", shtojmë seksionet rënëse: "Bli", "Shit", "Shkëmbim". Këta artikuj janë një listë e veçantë që është e vendosur në një etiketë

Le të krijojmë këtë listë dhe të shtojmë stile që përshkruajnë pamjen e saj.

• shtëpi
• Kontaktet
• Shërbimet
  • Blej
  • Shitet
  • Shkëmbim

Tani kemi këtë listë:

Figura 2. Punë përgatitore.

Natyrisht, kjo nuk është ajo që na nevojitet. Si parazgjedhje, kjo listë duhet të fshihet dhe të bëhet e dukshme vetëm me lëvizjen e mausit. Ju mund të fshehni një element duke përdorur rregullin e rregullit (ekrani: asnjë). Dhe kur rri pezull kursorin, duhet ta aktivizosh duke i bërë sërish të dukshme rregullat (ekrani: inline-block).

• shtëpi
• Kontaktet
• Shërbimet
  • Blej
  • Shitet
  • Shkëmbim

Tani menyja jonë zbehet brenda dhe jashtë, por na duhet që ajo të shfaqet në krye të elementeve ekzistuese pa ndryshuar kufijtë e vendosur tashmë të blloqeve ekzistuese.

Në mënyrë që një element të shfaqet pa ndikuar në shfaqjen e elementeve të tjerë, ai duhet të pozicionohet me një vlerë absolute.

• shtëpi
• Kontaktet
• Shërbimet
  • Blej
  • Shitet
  • Shkëmbim

Çfarë bëmë këtu:

2. rregulli i pozicionimit (pozicioni : relative ;). Kjo bëhet në mënyrë që raportimi i koordinatave të pozicionimit absolut të listës së mbivendosur të fillojë nga këndi i sipërm i majtë i atij blloku, dhe jo nga këndi i ekranit.
3. Shtuar te elementi prind
4. rregulli (lartësia: 20 px ;). Ne vendosëm lartësinë e tij për ta bërë më të përshtatshëm pozicionimin e listës rënëse.
5. Vendosni pozicionimin absolut (pozicioni : absolute ;) në listën rënëse dhe vendosni koordinatat: lart dhe majtas.

Menyja rënëse tani funksionon si duhet.

Figura 3. Versioni përfundimtar.

Sigurisht, këtu mund ta bëni menynë rënëse të duket më e bukur, por për qëllimet e detyrës sonë, kjo është e mjaftueshme.

Problemi arsimor është zgjidhur. Mirupafshim.

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