Krijimi i një menuje horizontale. Si të përafroni në qendër një menu horizontale

Pjesa më e rëndësishme e ndryshimeve tona është ripërcaktimi i elementeve inline për të bllokuar elementët. Tani lidhjet tona zënë të gjithë hapësirën e disponueshme të artikujve të listës, domethënë, për të ndjekur lidhjen, nuk kemi më nevojë të vendosim kursorin mbi tekst.

#navbar a (ngjyra e sfondit: # 949494; ngjyra: #fff; mbushja: 5 px; dekorimi i tekstit: asnjë; pesha e shkronjave: bold; kufiri majtas: 5 px solid # 33ADFF; ekrani: bllok;) #navbar li ( kufiri-majtas: 10px solid # 666; kufiri-poshtë: 1px solid # 666;)

Ne kemi kombinuar të gjithë kodin e përshkruar më sipër në një shembull, tani, duke klikuar në butonin provo, mund të shkoni në faqen me shembullin dhe të shihni rezultatin:

• në shtëpi
• Lajme
• Kontaktet
• Rreth Nesh

Kur rri pezull kursorin e miut mbi një artikull të menysë, pamja e tij mund të ndryshojë, duke tërhequr vëmendjen e përdoruesit. Ju mund të krijoni një efekt të tillë duke përdorur: pseudo-klasë hover.

Le të kthehemi te shembulli ynë i mëparshëm i menusë vertikale dhe të shtojmë rregullin e mëposhtëm në fletën e stilit:

#navbar a: rri pezull (ngjyra e sfondit: # 666; kufiri majtas: 5 px solid # 3333FF;) Provojeni "

Menuja horizontale

Në shembullin e mëparshëm, ne shikuam shiritin e navigimit vertikal, i cili më së shpeshti gjendet në faqet në të majtë ose në të djathtë të zonës kryesore të përmbajtjes. Megjithatë, menytë me lidhje lundrimi gjithashtu shpesh pozicionohen horizontalisht në krye të një faqe interneti.

Një menu horizontale mund të krijohet duke stiluar një listë të rregullt. Vetia e shfaqjes për elementet

Për të pozicionuar artikujt e menusë horizontalisht, fillimisht krijoni një listë me pika me lidhje:

• në shtëpi
• Lajme
• Kontaktet
• Rreth Nesh

Le të shkruajmë disa rregulla për listën tonë që rivendosin stilin e përdorur për listat e paracaktuara dhe ripërcaktojmë artikujt e listës nga blloku në shkronja të vogla:

#navbar (margjina: 0; mbushja: 0; lloji i stilit të listës: asnjë;) #navbar li (ekrani: në linjë;) Provojeni "

Tani gjithçka që duhet të bëjmë është të përcaktojmë stilin për menunë tonë horizontale:

#navbar (margjina: 0; mbushja: 0; lloji i stilit të listës: asnjë; kufiri: 2 px solid # 0066FF; rreze-kufi: 20 px 5 px; gjerësia: 550 px; rreshtimi i tekstit: në qendër; ngjyra e sfondit: # 33ADFF; ) #navbar a (ngjyra: #fff; mbushja: 5px 10px; dekorimi i tekstit: asnjë; pesha e shkronjave: bold; ekrani: inline-block; gjerësia: 100px;) #navbar a: rri pezull (rreze kufitare: 20px 5px ; ngjyra e sfondit: # 0066FF;) Provojeni "

Menyja rënëse

Menyja që ne do të krijojmë do të ketë lidhjet kryesore të navigimit të vendosura në shiritin e lundrimit horizontal dhe nën-artikuj që do të shfaqen vetëm pasi të vendosni kursorin e miut mbi artikullin e menysë të cilit i referohen këta nën-artikuj.

Së pari, ne duhet të krijojmë strukturën HTML për menunë tonë. Ne do t'i vendosim lidhjet kryesore të navigimit në një listë me pika:

• në shtëpi
• Lajme
• Kontaktet
• Rreth Nesh

Ne do t'i vendosim nën-artikujt në një listë të veçantë duke i futur ato në element

• në shtëpi
• Lajme
• Kontaktet
  • Adresa
  • Telefoni
  • Email
• Rreth Nesh

Tani le të fillojmë të shkruajmë kodin CSS. Së pari, duhet të fshihni listën e nën-artikujve me një shfaqje: asnjë; deklaratë në mënyrë që të mos shfaqen në faqen e internetit gjatë gjithë kohës. Për të shfaqur nën-artikuj, na nevojitet kur rri pezull mbi një element

#navbar ul (ekran: asnjë;) #navbar li: rri pezull ul (shfaq: bllok;)

Hiqni kufijtë dhe shënuesit e paracaktuar nga të dyja listat. Ne bëjmë artikuj të listës me lidhje lundrimi lundruese, duke formuar një meny horizontale, por për artikujt e listës që përmbajnë nën-artikuj, vendosni float: asnjë; në mënyrë që ato të shfaqen poshtë njëra-tjetrës.

#navbar, #navbar ul (diferencë: 0; mbushje: 0; lloji i stilit të listës: asnjë;) #navbar li (float: majtas;) #navbar ul li (float: asnjë;)

Më pas, duhet të sigurohemi që nënmenyja jonë rënëse të mos e lëvizë përmbajtjen poshtë shiritit të navigimit poshtë. Për ta bërë këtë, ne do t'i japim artikujve të listës pozicionin: relative; , dhe një listë që përmban pozicionin e nën-artikujve: absolute; dhe shtoni një pronë të lartë me një vlerë prej 100% në mënyrë që një nënmenu absolutisht e pozicionuar të shfaqet saktësisht poshtë lidhjes.

#navbar ul (ekrani: asnjë; pozicioni: absolut; lart: 100%;) #navbar li (lundrues: majtas; pozicioni: relative;) #navbar (lartësia: 30 px;) Provojeni "

Lartësia për listën mëmë u shtua me qëllim, pasi shfletuesit nuk marrin parasysh përmbajtjen lundruese si përmbajtje të elementit, atëherë pa shtuar lartësinë, lista jonë do të injorohet nga shfletuesi dhe përmbajtja pas listës do të mbështillet. menunë tonë.

Tani duhet të stilojmë të dyja listat tona dhe menyja rënëse do të jetë gati:

#navbar ul (ekrani: asnjë; ngjyra e sfondit: # f90; pozicioni: absolute; lart: 100%;) #navbar li: rri pezull ul (ekrani: bllok;) #navbar, #navbar ul (diferencë: 0; mbushje: 0; list-style: asnjë;) #navbar (lartësia: 30px; ngjyra e sfondit: # 666; mbushje-majtas: 25px; min-gjerësia: 470px;) #navbar li (lundrues: majtas; pozicioni: relative; lartësia: 100%;) #navbar li a (ekrani: bllok; mbushja: 6 px; gjerësia: 100 px; ngjyra: #fff; dekorimi i tekstit: asnjë; rreshtimi i tekstit: në qendër;) #navbar ul li (float: asnjë; ) #navbar li: rri pezull (ngjyra e sfondit: # f90;) #navbar ul li: rri pezull (ngjyra e sfondit: # 666;)

Përshëndetje të dashur lexues të blogut tim! Artikulli i sotëm do të jetë shumë i dobishëm për projektuesit fillestarë të paraqitjes. Që sot ne do të krijojmë një menu të thjeshtë horizontale me ju. 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ë kujtoja dhe analizoja përvojën time të studimit të paraqitjes, me çfarë 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ë e fillon udhëtimin e tij si një projektues layout. Dhe për mua personalisht, sapo fillova të studioja layout, më lindën pyetjet për paraqitjen e menuve 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, ja ku shkojmë!

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ë lidhim fletën e stilit me të. Nuk do të ndalem në këtë hap në detaje, pasi ende shpresoj që nuk jeni mjaft fillestar për t'ju treguar në detaje se çfarë janë trupi dhe koka dhe si lidhen stilet. Unë do të them vetëm se përveç stileve për menunë tonë, do të shkruaj rivendosjen më të thjeshtë në skedarin css në mënyrë që të rivendosni stilet dhe të arrini të njëjtën indentacion në të gjithë shfletuesit. Kështu duket rivendosja ime më e thjeshtë:

Nuk do të them asgjë në detaje as për rivendosjen e stileve, 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ë kufijtë dhe kufijtë e tyre rivendosen në zero, mbushja, kjo duhet bërë 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ë fletë stili të lidhur me këtë faqe (e imja është style.css), me përmbajtjen e mëposhtme:

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

Si të krijoni shënimin për menunë

Në shënimin tonë ne do të përdorim një etiketë të re