Si të krijoni një menu horizontale css. Konvertimi i menusë në vertikale

HTML5 IE Cr Op Sa Fx

Përqendrimi i një menuje horizontale mund të jetë një detyrë e ndërlikuar, veçanërisht për ata që janë të rinj në CSS. Gjetja e zgjidhjeve çon në një listë shumë të kufizuar metodash, shumica e të cilave mbështeten në CSS, truket JavaScript ose përdorimin e rregullave jo standarde që nuk mbështeten nga të gjithë shfletuesit. Në këtë tutorial, ne do t'ju tregojmë metodën e përqendrimit të një menuje horizontale, e cila përdor vetëm rregullat standarde CSS dhe funksionon në të gjithë shfletuesit.

Një shembull i një menuje të përqendruar

Më poshtë është një menu horizontale me qendër në këtë kolonë, në të cilën aktivizohet skeda e dytë. Mund të provoni të ndryshoni madhësinë e dritares ose faqes së shfletuesit për t'u siguruar që menyja të qëndrojë gjithmonë në qendër dhe të përgjegjshme.

Në faqen demo, mund të shihni disa opsione të projektimit për një menu me qendër horizontalisht. Secili prej tyre mund të përdoret në projektet tuaja.

Shënimi HTML

Të gjitha menutë e paraqitura në këtë mësim përdorin një strukturë të thjeshtë. Kjo është një listë e zakonshme e parregulluar e lidhjeve të vendosura në një element div.

Kodi CSS i menysë në qendër

Më poshtë është CSS e plotë që do të përqendrojë menunë. Dhe shpjegimet e parimit të punës jepen më vonë në mësim.

#centredmenu (float: majtas; gjerësia: 100%; sfond: #fff; kufiri-fund: 4px solid # 000; tejmbushje: fshehur; pozicioni: relative;) #centredmenu ul (e qartë: majtas; noton: majtas; stili i listës : asnjë; margjina: 0; mbushje: 0; pozicioni: relative; majtas: 50%; rreshtimi i tekstit: në qendër;) #centeredmenu ul li (ekrani: bllok; float: majtas; stili i listës: asnjë; margjina: 0; mbushja: 0; pozicioni: relative; djathtas: 50%;) #menu në qendër ul li a (ekrani: bllok; margjina: 0 0 0 1px; mbushja: 3px 10px; sfondi: #ddd; ngjyra: # 000; dekorimi i tekstit: asnjë; lartësia e linjës: 1,3em;) #menu në qendër ul li a: rri pezull (sfondi: # 369; ngjyra: #fff;) #menu në qendër ul li a.active, #menu në qendër ul li a.active: rri pezull (ngjyra: # fff; sfondi: # 000; pesha e shkronjave: bold;)

Si funksionon metoda e përqendrimit

Metoda bazohet në pozicionimin relativ të elementeve të bllokut lundrues në njëri-tjetrin. Së pari, le të shohim se si elementët ndryshohen kur zhvendosen.

Elementi div(blloku), pa kompensim, shtrihet në gjerësinë e plotë të disponueshme për të.

Por nëse e zhvendosim elementin div në të majtë, ai automatikisht do të tkurret për t'iu përshtatur përmbajtjes së tij. Kompresimi është çelësi për zbatimin e kësaj metode për qendrimin e menyve. Ndihmon për të zhvendosur menunë në pozicionin e duhur.

Menuja standarde e rreshtuar majtas

Le të marrim një menu standarde të rreshtuar majtas dhe ta ridizajnojmë atë hap pas hapi. Për qartësi, artikujt janë të ngjyrosur me ngjyra të ndryshme, kështu që është e qartë menjëherë se çfarë është investuar.

Kushtojini vëmendje pikave të mëposhtme:

• Elementi meny në qendër div(drejtkëndëshi blu) është zhvendosur në të majtë, por është 100% i gjerë, kështu që qëndron i shtrirë për të mbushur të gjithë faqen.
• Elementi ul(drejtkëndësh rozë) është brenda elementit menu në qendër div dhe zhvendoset në të majtë. Kjo do të thotë se do të tkurret në gjerësinë e përmbajtjes së tij, domethënë në gjerësinë totale të të gjithë faqeshënuesve.
• Të gjithë elementët li (drejtkëndëshat e gjelbër) janë brenda elementit ul dhe lëvizni në të majtë. Kështu, ato zvogëlohen në madhësinë e lidhjeve në to dhe rreshtohen në një vijë horizontale.
• Brenda çdo lidhjeje (drejtkëndësha portokalli) shfaqet teksti i faqerojtësit: Faqeshënuesi 1, Faqerojtësi 2, e kështu me radhë.

Zhvendosja e pozicionit të listës së pa renditur

Pastaj ne kompensojmë elementin ul në të djathtë me 50% duke përdorur pozicionin: relative; ... Kur një element kompensohet me një përqindje në këto kushte, është e rëndësishme të mbani mend se gjerësia totale e elementeve që ai përmban nuk është gjerësia e tij. Në rastin tonë, zhvendosja ndodh nga gjysma e dritares së shfletuesit (ose hapësira e disponueshme për t'u shfaqur) Si rezultat, menyja jonë fillon në mes të dritares dhe pjesërisht shtrihet jashtë saj. Dhe kaloni në hapin tjetër.

Zhvendosja e pozicionit të të gjithë artikujve të menusë

Mbetet vetëm për të lëvizur të gjithë elementët li lënë me 50%. Kjo është 50% e gjerësisë së elementit tonë ul (kontejneri që përmban menunë). Kështu, skedat zhvendosen saktësisht në qendër të dritares.

Disa shënime të rëndësishme

Ka disa pika të rëndësishme që duhen mbajtur parasysh kur përdorni këtë metodë përqendrimi:

• Që nga elementi ul shtrihet pjesërisht jashtë dritares, kjo çon në shfaqjen e shiritave të lëvizjes. Prandaj, duhet të përdorni tejmbushjen: rregulli i fshehur; për element meny në qendër div... Kështu, pjesa e dalë e elementit div do të ndërpritet.
• Që nga elementi ul nuk është në linjë me faqeshënuesit, nuk mund të përdorni asnjë stil vizual për të. Lëreni elementin ul pa ngjyrë të sfondit dhe pa kufi, kështu që ai të jetë plotësisht i padukshëm. Dhe stilet për faqeshënuesit duhet të përdoren vetëm për elementë. li.
• Nëse keni nevojë të vendosni stile të veçanta për faqeshënuesit e parë dhe të fundit, duhet të shtoni një klasë për elementët e parë dhe të fundit. li kështu që ju mund t'i stiloni ato individualisht.

konkluzioni

Zgjidhja e propozuar është e përputhshme me të gjithë shfletuesit, nuk përdor JavaScript dhe mbështet tekst të ripërmasave.

Nga autori: I mirëpres të gjithëve. Për disa arsye, webmasterët shoqërojnë një menu rënëse me skriptet, por për një kohë të gjatë një navigim i tillë mund të bëhet absolutisht në mënyrë të sigurt duke përdorur css të pastër. Për më tepër, një menu e tillë nuk do të jetë më e keqe. Sot do t'ju tregoj se si të krijoni një menu dropdown në css. Unë do të ndaj, si të thuash, një recetë.

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

Në përgjithësi, së pari le të vendosim se si do ta krijojmë vetë menunë. Në html5, mënyra standarde është krijimi i tij në një kontejner navigimi 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. Domethënë, për çdo artikull 1 listë, e cila do të formojë një menu me rënie.

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ë ne thjesht nuk krijojmë lista të mbivendosura në paragrafë pa lënë jashtë.

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

E kuptoj që është i madh. Ky është problemi me listat e mbivendosura, që kërkon shumë kod. Por mbani në mend faktin që ne po bëjmë 4 artikuj kryesorë dhe për secilin do të ketë një menu me zbritje.

Në fakt, vendosa identifikuesin nav për të gjithë navigimin dhe klasën e stilit të dytë për të gjitha listat e ndërlidhura, në mënyrë që të kuptoj se ato janë të ndërthurura.

E shkëlqyeshme, shënimi ynë është gati, mund të shikoni rezultatin:

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

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ë ndërhyjnë me ne, është më mirë t'i vendosim vetë dhëmbëzat, aty ku duhet.

* (diferencë: 0; mbushje: 0;)

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

Tani ne në fakt duhet të vendosim se cila do të jetë menyja jonë. Horizontale apo vertikale? Unë propozoj që së pari të bëni horizontale dhe të shihni gjithçka në shembullin e saj. Për ta bërë këtë, duhet të shkruani stilet e mëposhtme:

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

Vini re se me shenjën > i referohemi artikujve në një listë që është i vendosur drejtpërdrejt në një ul dhe ai është i vendosur drejtpërdrejt në një nav. Kjo është shumë e rëndësishme, pasi ju lejon të mos aplikoni stilin për artikujt në listat e ndërlidhura. Fakti është se, sipas idesë sime, artikujt në listën kryesore do të rregullohen horizontalisht, dhe në ato të mbivendosur - vertikalisht.

Por, sigurisht, ju mund ta bëni atë ndryshe, në përputhje me idenë tuaj. Ju mund t'i bëni të gjitha artikujt në një rresht.

Gjithsesi, kodin e mësipërm, shpresoj ta kuptoni. Ai detyron artikujt në listën kryesore të rrafshohen në të majtë, në mënyrë që të vendosen të gjithë në të njëjtën linjë, edhe pse janë artikuj bllok. Unë gjithashtu u dhashë atyre një gjerësi të qartë dhe një pozicion relativ.

Për çfarë është 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 vendosni një pozicionim relativ të bllokut, 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ë tashmë:

Nga kjo pamje e ekranit, tashmë mund të imagjinoni rezultatin e përafërt. Natyrisht, ende duhet t'i dekorojmë bukur paragrafët, 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: rri pezull ( 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 dhe shtrirjen e tekstit në qendër. Në fund, hiqni nënvizimin nga lidhjet.

Të gjithë këta parametra nuk duhet të shkruhen siç shkrova unë. Ju mund të zgjidhni ngjyrat në mënyrë arbitrare, të bëni një kornizë të ndryshme ose të mos përdorni fare, dhëmbëzimi mund të zvogëlohet ose rritet.

Vini re se në këtë rast ne nuk kemi përdorur shenjën>, kështu që këto rregulla do të zbatohen për të gjitha lidhjet, duke përfshirë ato në paragrafët e mbivendosur. 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 të, menuja jonë duket si një tryezë. Epo, është koha për të fshehur artikujt e mbivendosur.

#nav li .sekond (ekrani: 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 që i përket, qartë në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.

Zbatimi i braktisjes

Ne duhet të bëjmë gjënë më të rëndësishme - të kuptojmë vetë humbjen. Nuk ka asgjë të komplikuar në lidhje me të, shikoni këtë kod:

#nav li: hover .sekond (shfaq: bllok;)

Ky kod do të funksionojë pa të meta. Kur rri pezull mbi një artikull në menynë kryesore, lista e mbivendosur do të bëhet e dukshme. Dhe vetëm lista që është e ngulitur 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 zgjidhet shumë lehtë duke shtuar stilet e duhura:

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

Gjithçka, problemi është zgjidhur:

Gjithçka funksionon në mënyrë perfekte. Kur kaloni pezull mbi artikullin kryesor, shfaqet menyja përkatëse e lëshimit. 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 me ju një menu shumë të thjeshtë dhe të lehtë rënëse, pa absolutisht asnjë skript.

Konvertimi i menusë në vertikale

Epo, mirë, ne e kemi kuptuar plotësisht navigimin horizontal, por përveç tij, navigimi vertikal është shumë i zakonshëm në faqet, dhe gjithashtu mund të jetë me rënie. Në fakt, është shumë e lehtë të ndryshosh menunë nga horizontale në vertikale, thjesht duhet të ndryshojmë disa rreshta kodi.

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

Tani mbetet për të ndryshuar rregullat për përzgjedhësin #nav li .second, domethënë për listat e mbivendosura, domethënë, ato duhet të pozicionohen paksa ndryshe. Si kjo:

#nav li .sekond (ekrani: 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 menduar, artikujt e menyve të ndërlidhura duhet të shfaqen nën artikujt kryesorë. Në rastin e një menuje vertikale, kjo nuk është e përshtatshme - artikujt duhet të shfaqen anash.

Pra, ndryshoni majën: 100% majtas: 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.

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

Menu horizontale me shumë nivele

Duke përdorur përafërsisht të njëjtën qasje, mund të krijoni më shumë nivele të menysë 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.