Menuja horizontale. Menyja horizontale CSS

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 në css të pastër. Dhe një menu e tillë nuk do të jetë më keq. Sot do t'ju tregoj se si të krijoni një menu dropdown në css. Më lejoni të ndaj recetën.

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

Në përgjithësi, së pari do 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ë në shënimin html me lista të mbivendosura. 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 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ë ne thjesht nuk krijojmë lista të mbivendosura në paragrafë pa një braktisje.

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

E kuptoj që është i madh. Ky është problemi me listat e ndërthurura, që duhet të shkruani shumë kode. Por merrni parasysh faktin që ne po bëjmë 4 artikuj kryesorë dhe do të ketë një menu rënëse për secilin.

Në fakt, i dhashë të gjithë navigimit ID-në e navigimit dhe të gjitha listat e ndërlidhura të klasës së stilit të dytë për të kuptuar se ato janë të ndërthurura.

E shkëlqyeshme, shënimi është gati, mund ta shihni rezultatin:

Po, duket e tmerrshme. Por tani ne do të përfshijmë css në punë dhe në pak minuta lundrimi ynë do të ndryshojë. 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ë ndërhyjnë me ne, është më mirë t'i vendosim vetë dhëmbëzat 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 që së pari të bëni një 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( float: majtas; gjerësia: 180 px; pozicioni: relative; )

Vini re se me shenjën > i referohemi artikujve të listuar që janë të vendosur drejtpërdrejt në ul, i cili është i vendosur drejtpërdrejt në nav. Kjo është shumë e rëndësishme, pasi ju lejon të mos aplikoni stil për artikujt e listës së mbivendosur. 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. Mund të siguroheni që të gjithë artikujt janë në një linjë.

Gjithsesi, kodin e mësipërm, shpresoj ta kuptoni. Ai detyron artikujt e listës kryesore të vendosen në të majtë, kështu që të gjithë përshtaten në të njëjtën linjë, edhe pse janë elementë të nivelit të bllokut. Unë gjithashtu u dhashë atyre një gjerësi të qartë dhe një pozicion relativ.

Për çfarë është pozicionimi? Është e nevojshme për të pozicionuar absolutisht listat e mbivendosura më vonë. Nëse keni studiuar pozicionimin në css, me siguri e dini se nëse vendosni një bllok në 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ë dritaren e shfletuesit.

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

Nga kjo pamje e ekranit, tashmë mund të imagjinoni rezultatin e përafërt. Natyrisht, ende duhet t'i stilojmë bukur pikat 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 në mënyrë që mbushja të funksionojë dhe të gjitha vetitë të aplikohen në mënyrë korrekte. Më pas, unë specifikoj ngjyrat e sfondit, tekstin, opsionet e kornizës, dhëmbëzimin dhe shtrirjen e tekstit në qendër. Së fundi, unë heq nënvizimin e lidhjeve.

Të gjithë këta parametra nuk duhet të shkruhen ashtu siç shkrova 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ë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ë zbulohen kur rri pezull mbi artikullin e dëshiruar. Pa këtë, menuja jonë duket si një tryezë. Epo, është koha për të fshehur sendet e mbivendosura.

#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 koordinojmë majën: 100%. Kjo do të thotë që menyja rënëse do të shfaqet qartë poshtë artikullit kryesor të cilit 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

Na mbetet të bëjmë gjënë më të rëndësishme - të zbatojmë vetë pasojat. 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, lista e mbivendosur do të bëhet e dukshme. Dhe vetëm lista që është e vendosur në artikullin në të cilin kursori është pezull.

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: 180 px; )

Kjo është ajo, problemi u zgjidh:

Gjithçka funksionon në mënyrë perfekte. Kur kaloni pezull mbi artikullin kryesor, shfaqet një menu 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 bërë një menu shumë të thjeshtë dhe të lehtë me zbritje pa absolutisht asnjë skript.

Ndryshimi i menusë në vertikale

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

Së pari, do t'ju duhet të hiqni float:left 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 navigimi 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 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 navigimit 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.

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

Gjithçka, tani gjithçka funksionon siç duhet. Ju mund të testoni. 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 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, i cili do të vendoset në një nga nën-artikujt.

Përshëndetje të dashur lexues të blogut tim! Artikulli i sotëm do të jetë shumë i dobishëm për fillestarët. Që 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ë fare e thjeshtë, kur po mendoja për temën e mësimit të radhës për sitin, fillova të kujtoj dhe analizoj përvojën time në studimin e paraqitjes, me atë që duhej të përballesha në fazën fillestare për t'u bërë vetvetja si plan urbanistik. projektuesi, 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ë me interes për një person që fillon rrugën e tij si një projektues faqosjeje. Dhe personalisht, sapo fillova të mësoja layout, mbi të gjitha kisha pyetje në lidhje me paraqitjen e menyve të ndryshme, veçanërisht kur bëhet fjalë për menutë 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ë paraqitjen e menusë sonë horizontale!

Siç mund ta merrni me mend, gjëja e parë që duhet të bëjmë është të krijojmë një faqe html me shënim standard dhe të përfshijmë një skedar stili në të. Nuk do të ndalem në këtë hap në detaje, sepse shpresoj ende që të mos jeni aq fillestar sa t'ju tregoj në 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ë, unë do të shkruaj rivendosjen më të thjeshtë në skedarin css në mënyrë që të rivendosni stilet dhe të arrini të njëjtën shfaqje të indenteve në të gjithë shfletuesit. Kështu duket rivendosja ime më e thjeshtë:

Nuk do të them asgjë për stilet zero, pasi në fakt 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ëtij kodi, të gjithë elementët e faqes që do të shkruajmë do të kenë margjinat dhe mbushjet, duhet ta bëjmë këtë 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 një faqe html me shënim standard:

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

Hapi tjetër është krijimi i shënjimit html për menunë tonë.

Krijimi i shënimit për menunë

Në shënimin tonë, ne do të përdorim etiketën e re