Paano gumawa ng pahalang na menu na may slope? Do-it-yourself na pahalang na drop-down na menu gamit ang CSS at Html Anong mga elemento ang pinakamahusay na mag-layout ng isang menu

18.09.2023 -

Magandang araw sa lahat ng nagbabasa ngayon ng publikasyong ito. Ngayon gusto kong sabihin sa iyo ang tungkol sa isa sa mga tool sa pagbuo ng website na hindi magagawa ng walang mapagkukunan ng web nang wala. Ito ang menu ng site, o gaya rin ng sinasabi nilang mapa ng site. Ngayon ay may walang limitasyong bilang ng mga uri at subtype ng mga menu.

Ang mga nag-develop ng mga online na tindahan, blog, serbisyong pang-edukasyon at iba pang mapagkukunan ay nag-eeksperimento at lumilikha ng higit at higit pang bago at hindi pangkaraniwang mga mapa. Matapos basahin ang artikulo, matututunan mo kung anong mga pangunahing grupo ang nahahati sa lahat ng mga uri ng mga panel ng nabigasyon, magagawa mong subukan ang bawat isa sa kanila, at matutunan din kung paano magsulat ng code ng menu para sa isang html website. Ngayon ay bumaba tayo sa negosyo!

Mga tool para sa paglikha ng navigation bar

Mayroong ilang mga paraan upang lumikha ng isang menu sa markup language. Ang kanilang pangunahing konsepto ay ang paggamit ng isang walang bilang na listahan. Kaya, sa html 4, na pamilyar sa amin, ang mga developer ay nagsusulat ng mga tag sa pahina

Tulad ng nakasaad sa mga nakaraang publikasyon, ang ipinares na elemento

- isang elemento ng listahan. Para sa kalinawan, isulat natin ang code para sa isang simpleng menu:

Pag-navigate
Pag-navigate sa site
- bahay
- Balita ng linggo
- Mga pagsulong sa teknolohiya
- Chat
Gayunpaman, sa pagdating ng platform, ang markup language ay napunan ng karagdagang mga tag. Ito ang dahilan kung bakit nilikha ang menu ng mga modernong website gamit ang isang espesyal na tag< menu>. Sa paggamit, ang elementong ito ay hindi naiiba sa mga naka-bullet na listahan.

Sa halip na isa< ul>ay inireseta< menu>. Gayunpaman, lumilitaw ang mga makabuluhang pagkakaiba kapag hinuhusgahan mula sa panig ng trabaho. Kaya, ang pangalawang halimbawa ay nagpapabilis sa gawain ng mga programa sa paghahanap at mga robot sa . Kapag sinusuri ang istraktura ng site, agad nilang nauunawaan na ang piraso ng code na ito ay responsable para sa mapa ng site.

Mayroong pahalang, patayo at drop-down na mga menu. Minsan ang navigation bar ay idinisenyo bilang isang imahe. Dahil lumawak ang segment ng teknolohiya, ginagawang adaptive ang mga serbisyo sa web, i.e. Ang istraktura ng pahina ay awtomatikong umaangkop sa laki ng screen ng device. Tingnan natin ang mga nakalistang pangkat ng menu.
Gumawa tayo ng horizontal navigation model
Ang ganitong uri ng nabigasyon ay ang pinakasikat. Kapag ang panel ay idinisenyo nang pahalang, ang lahat ng mga item sa menu ay matatagpuan sa header ng pahina o sa "footer" (kung minsan ang mga elemento ng nabigasyon ay nadoble, na lumalabas sa itaas at sa ibaba).

Bilang halimbawa, gagawa kami ng pahalang na panel, ang mga item sa menu kung saan ay idinisenyo gamit ang CSS (cascading style sheets), o sa halip ay binago. Kaya, ang bawat indibidwal na elemento ay matatagpuan sa isang beveled rectangle. Naiintriga?

Para sa pagbabagong-anyo gumagamit kami ng isang css property na tinatawag na transform . Upang tukuyin ang pagbabago, ginagamit ang built-in na skewX function, na tumutukoy sa skew angle sa mga degree.

Sa kasamaang palad, gumagana ang bawat browser sa property na ito sa sarili nitong paraan, sa kabila ng mga itinakdang pamantayan. Samakatuwid, nilikha ang mga espesyal na prefix upang ipahiwatig ito:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
Ngayon ay ilapat natin ang nakuhang kaalaman sa pagsulat ng isang halimbawa.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Pahalang na panel
bahay

Tungkol sa kumpanya

Mga produkto

Mga contact

Horizontal panel li ( display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(40deg); li:hover ( background: #1C1C1C; )
bahay
Tungkol sa kumpanya
Mga produkto
Mga contact

Para sa pangalawang programa ginagamit namin ang nakaraang code bilang batayan. Nais kong ang aking mga item sa vertical na menu ay may mga bilugan na sulok kaysa sa mga beveled.

Upang gawin ito, gumamit ako ng isa pang css property border-radius.

Sa mga nakaraang artikulo ay nagtrabaho na ako sa parameter na ito, kaya sa palagay ko ay hindi magkakaroon ng anumang mga paghihirap sa pag-unawa sa paggana nito.

Vertical panel li( display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; ) a (kulay: # fff; ) li:hover ( background: #1C1C1C; )

bahay
Tungkol sa kumpanya
Mga produkto
Mga contact

Tulad ng napansin mo na, ang pangunahing pagbabago sa code na ito ay ang kawalan ng display: inline-block na deklarasyon, na talagang responsable para sa pahalang na pag-aayos ng mga item sa nabigasyon.

Tiningnan namin ang mga pangunahing grupo ng mga panel ng nabigasyon, ngunit may ilang iba pang mga uri, o mas mabuti pa, mga add-on.

Minsan ang mga sitwasyon ay lumitaw kapag ang ilan sa mga punto ay umaakma sa mga pangunahing. Sa kasong ito, hindi mo magagawa nang walang mga drop-down na listahan. Nilikha ang mga ito sa pamamagitan ng mga pagbabagong-anyo gamit ang mga tool sa css.

Sa ibaba ay inilakip ko ang code ng isang maliit na programa na nagpapatupad ng diskarteng ito.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

Dropdown list body ( padding-left: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-menu > li (posisyon: relative; display: inline-block; ) .m-menu a (display: block; margin-left: -2px; padding: 13px; color: #fff; border -left: 3px solid #fff; ) .m-menu a:hover (background: #1C1C1C; ) .m-menu .s-menu ( left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none;

Gumawa ng pahalang na menu, ang mga item kung saan ay may di-makatwirang slope (Larawan 1).

kanin. 1. View ng menu na may mga slanted item

Ang pagbabago ng pag-aari ng istilo ay may pananagutan sa pagbabago ng elemento ang skewX function ay ginagamit bilang halaga nito, na nagtatakda ng nais na slope. Mas madaling itakda ang anggulo ng pagtabingi sa mga degree, halimbawa, ang 30deg ay 30º mula sa patayo. Naaapektuhan din ng pagbabago ang lahat ng elemento ng bata, kaya't ang teksto sa loob ng elemento ay itatagilid din, na walang pinakamagandang epekto sa pagiging madaling mabasa at kagandahan nito. Samakatuwid, mahalagang ilapat muli ang ikiling sa teksto, ngunit sa kabilang direksyon, baguhin lamang ang tanda sa harap ng halaga ng mga degree.

Sinusuportahan ng mga browser ang transform property higit sa lahat gamit ang kanilang sariling mga prefix, kaya para sa pagiging pangkalahatan sa mga istilo dapat mong ulitin ito ng ilang beses na may parehong halaga, pagdaragdag ng -moz- para sa Firefox, -webkit- para sa Safari at Chrome, -o- para sa Opera at -ms - para sa browser ng Internet Explorer tulad ng ipinapakita sa halimbawa 1.

Halimbawa 1: Tilt ng Item sa Menu

HTML5 CSS3 IE Cr Op Sa Fx

Menu li ( display: inline-block; /* Inline block elements */ background: #CA181A; /* Background color */ margin-right: 3px; /* Distansya sa pagitan ng menu item */ -webkit-transform: skewX(- 30deg ); /* Para sa Safari at Chrome */ -moz-transform: skewX(-30deg); /* Para sa Firefox */ -o-transform: skewX(-30deg); (-30deg); /* Para sa IE */ transform: skewX(-30deg); /* CSS3 */ ) a ( kulay: #fff; /* Kulay ng link */ display: block; /* Block element */ padding : 5px 15px; /* Mga margin sa paligid ng text */ text-decoration: none; /* Para sa Firefox */ -o-transform: skewX(30deg); /* Para sa Opera */ -ms-transform: skewX(30deg); /* Para sa IE */ transform: skewX(30deg); ( background: #333; /* Kulay ng background kapag nagho-hover */ )

Joker
Pazuzu
Palpatine
Doctor Doom

Sa halimbawang ito, ang isang pahalang na menu ay nilikha gamit ang isang bullet na listahan. Upang matiyak na pahalang ang listahan, ang isang display property na may value na inline-block ay idaragdag sa li element sa mga istilo. Para sa skew, gamitin ang transform property na may skewX function at ang value na -30º. Inilapat din ang property na ito sa mga link sa loob ng listahan, ngunit may positibong halaga na 30º, tinitiyak nito na ang mga titik ay ipinapakita nang tama sa halip na nakahilig.

Ginagamit ng mga browser ng Chrome, Safari, at Firefox ang transform property sa block o inline na mga elemento, kaya ang mga link ay nakatakda ang kanilang display property na i-block .

Kumusta, mahal na mga mambabasa ng aking blog! Ang artikulo ngayon ay magiging lubhang kapaki-pakinabang para sa mga baguhan na taga-disenyo ng layout. Dahil ngayon ay gagawa kami ng isang simpleng pahalang na menu. Bago tayo direktang magpatuloy sa layout, gusto kong magsabi ng ilang salita tungkol sa kung bakit ako nagpasya na piliin ang partikular na paksang ito para sa artikulo.

Sa katunayan, ang lahat ay medyo simple, kapag iniisip ko ang paksa ng susunod na aralin para sa site, sinimulan kong matandaan at suriin ang aking karanasan sa pag-aaral ng layout, kung ano ang kailangan kong harapin sa paunang yugto ng pagtatatag ng aking sarili bilang isang taga-disenyo ng layout, kung ano ang pinaka hindi ko maintindihan kapag pinag-aaralan ang lugar na ito atbp. Tinanong ko sa aking sarili ang lahat ng mga tanong na ito upang mas maunawaan kung ano ang maaaring maging kawili-wili sa isang tao na nagsisimula sa kanyang karera bilang isang layout designer. At personal, sa sandaling nagsimula akong mag-aral ng layout, ang karamihan sa mga katanungan ay lumitaw tungkol sa layout ng iba't ibang mga menu, lalo na pagdating sa mga multi-level na menu. At kaya ngayon ay pag-uusapan natin ang tungkol sa menu, at mas partikular tungkol sa pahalang na menu. Kaya simulan na natin!

Tulad ng malamang na nahulaan mo, ang unang bagay na kailangan naming gawin ay lumikha ng isang HTML na pahina na may karaniwang markup at ikonekta ang isang style file dito. Hindi ako magtatagal sa hakbang na ito nang detalyado, dahil umaasa pa rin ako na hindi ka tulad ng isang baguhan upang sabihin sa iyo nang detalyado kung ano ang katawan at ulo at kung paano konektado ang mga estilo. Sabihin ko lang na bilang karagdagan sa mga estilo para sa aming menu, isusulat ko ang pinakasimpleng pag-reset sa css file upang i-reset ang mga estilo at makamit ang parehong pagpapakita ng mga indent sa lahat ng mga browser. Ito talaga ang hitsura ng aking pinakasimpleng pag-reset:

Hindi pa kami magsasabi ng kahit ano nang detalyado tungkol sa pag-reset ng mga istilo, dahil mahalagang paksa ito para sa isa pang artikulo magkaroon ng margin at mga indent na i-reset sa zero, dapat itong gawin upang ang aming pahina ay magmukhang pareho sa lahat ng mga browser.

Kaya ano ang mayroon tayo sa yugtong ito? Mayroon kaming isang html na pahina na may karaniwang markup:

Pahalang na menu

At mayroon kaming style file na nakakonekta sa page na ito (para sa akin ito ay style.css), na may sumusunod na nilalaman:

Ang susunod na hakbang ay lumikha ng html markup para sa aming menu.

Sa aming markup gagamitin namin ang bagong tag na lumabas sa HTML5, nagpasya akong sanayin ka kaagad sa mga bagong tag upang masundan ang trend at pamantayan, sa kabila ng katotohanan na ang mga bagong HTML 5 na tag ay hindi suportado ng mas lumang mga browser, masidhi ko pa ring inirerekumenda na gamitin ang mga ito sa iyong layout, dahil maaga o huli kailangan mo pa ring lumipat sa kanila, tulad ng mga layout designer sa isang pagkakataon ay lumipat mula sa tabular na layout upang harangan ang layout, ito ang katotohanan, mas mahusay na sundin ang uso!

At dahil pinag-uusapan na natin ang pagsuporta sa mga bagong tag ng html 5, upang hindi tayo magkaroon ng mga problema dito sa mga mas lumang browser, kailangan nating magsama ng isang espesyal na library sa ating dokumento - html5shiv. Ginagawa ito sa pamamagitan ng pagpasok sa
ang head section ng iyong page na may sumusunod na code:

Ang lahat ng mga tag pagkatapos nito (at iba pang mga tag na nauugnay sa HTML5) ay karaniwang makikita ng mga mas lumang browser.

Bumalik tayo nang direkta sa ating markup. Susunod, kailangan naming magpasok ng bullet na listahan sa aming tag, para sa akin ganito ang hitsura:

bahay
Tungkol sa atin
Portfolio
Blog
Mga contact

Kaya, mukhang natapos na namin ang markup, oras na para magsimulang magsulat ng mga istilo, dahil ngayon ay hindi maganda ang hitsura ng aming menu, upang ilagay ito nang mahinahon:

At kaya, ang unang bagay na kailangan naming gawin kapag inilatag ang menu ay alisin ang mga marker ng listahan, malinaw na hindi namin kailangan ang mga ito, ginagawa namin ito tulad nito:

Ul(list-style:none; )

Pagkatapos nito ang aming menu ay magiging ganito:

Hindi ko talaga gusto kung paano nakadikit ang aming menu sa mga gilid ng browser, ayusin natin iyon:

Gamit ang code na ito, itinakda namin ang lapad ng aming menu, binigyan ito ng 50px na mga margin sa itaas at ibaba, at inilagay ito sa gitna. Sino ang nakakaalam, kung ang isang elemento ng bloke ay may lapad, kung gayon upang mailagay ang elementong ito nang mahigpit sa gitna, kailangan lang nating bigyan ito ng panlabas na margin (margin) sa kanan at kaliwa na may halagang auto.

Ang susunod na hakbang ay gawing pahalang ang aming menu sa pamamagitan ng pagtatakda ng mga elemento

lumutang pakaliwa
Menu li( float: left; )
Ang aming buong menu ay naging pahalang na ngayon.

Kung hindi mo naiintindihan kung ano ang eksaktong nangyari at kung ano ang ginagawa ng float property, inirerekumenda kong i-google mo ang impormasyon tungkol sa property na ito at pag-aralan itong mabuti, dahil
Walang isang pahina ng layout ang magagawa nang wala ito, masasabi ko sa iyo iyon nang sigurado. Well, okay, magpatuloy tayo!

Menu li a( display:block;/* Gawing block element ang link*/ padding:12px 20px;/* Itakda ang padding */ text-decoration: none; /* alisin ang underline */ color:#fff;/* itakda ang kulay na mga link na puti */ background:#444;/* gawing madilim ang kulay ng background */ font:14px Verdana, sans-serif;/* itakda ang laki at pangalan ng font */ )
Isa sa pinakamahalagang tuntunin dito ay display:block;. Ang katotohanan ay sa pamamagitan ng default na mga link ay mga inline na elemento, at ang mga indentasyon ay inilalapat nang iba sa mga inline na elemento sa iba't ibang mga browser, kaya ipinapayong gawin ang link na isang block element at pagkatapos ay ilapat dito ang mga katangian na nauugnay sa panlabas o panloob na mga indent. Ngayon ay hindi ko nais na pasanin ka ng hindi kinakailangang impormasyon sa paglipas ng panahon, gamit ang mga tunay na halimbawa, mauunawaan mo kung bakit ang gayong diin ay inilalagay dito.

Tingnan natin kung ano ang nakuha namin, i-refresh ang pahina ng browser at hayan ka!:

Tulad ng nakikita mo, hindi ito mukhang masama, maaari naming sabihin na, sa prinsipyo, handa na ang aming menu. Ang tanging bagay na kailangan pa ring gawin ay itakda ang liwanag ng mga link kapag nag-hover, at tila sa akin ay magiging mas maganda ang hitsura ng menu sa mga separator sa pagitan ng mga item.

Magsimula tayo sa mga delimiter:
Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )
Anong ginawa natin dito? Oo, ang lahat ay napaka-simple, itinakda namin ang aming mga puntos (
) kaliwang hangganan ng 1px na laki at kulay #666;. Tulad ng para sa .menu li:first-child selector, dito kami ay gumagamit ng isang espesyal na pseudo-class na nagbibigay-daan sa amin upang piliin ang unang child element ng listahan. Inirerekomenda ko rin ang pagbabasa tungkol sa mga pseudo-class nang mas detalyado sa Internet, matututo ka ng maraming kapaki-pakinabang na bagay.

Tingnan natin kung ano ang nakuha natin muli:

Sa palagay ko, mas maganda ito sa mga delimiter.

Menu li a:hover( background:#888; )
Muli gamit ang isang espesyal na pseudo-class, sa pagkakataong ito mag-hover, itinakda namin ang kulay ng link kapag nag-hover sa ibabaw nito, tingnan:

I think it's cool :) Sana mapunta ka sa parehong menu gaya ng sa akin.

Dito ko tatapusin ang araling ito, talagang umaasa ako na ito ay kapaki-pakinabang sa iyo at ngayon alam mo na kung paano mag-layout ng isang simpleng pahalang na menu gamit ang purong html at css. Siyempre, gumawa kami ng isang antas na menu; ito ay magiging mas kumplikado sa isang dalawang antas na menu (na may naka-nest na listahan), ngunit ito ay isang paksa para sa isa pang aralin, iyon lang para sa akin. Halika muli, matutuwa ako!!!

Ang isang menu ay isang mahalagang bahagi ng bawat website, o halos bawat isa. Ang menu (o nabigasyon) ay nagbibigay-daan sa iyo na mabilis na mag-navigate sa mga pangunahing seksyon ng site, katulad ng isang talaan ng mga nilalaman sa isang libro. Ang pagkakatulad ay lalong kapansin-pansin sa mga mapa ng site (isang uri ng nabigasyon):

Maaaring iba ang hitsura ng menu. Maaaring pahalang

Patayo

Multi-level

Ang menu ay maaaring maging napaka-magkakaibang at maaari itong ilagay sa iba't ibang paraan: mga talahanayan, mga bloke, mga link lamang, posibleng mga link sa
...maaari kang makabuo ng maraming "perverted" na pamamaraan at karamihan sa mga ito ay tumutugma sa mga prinsipyo ng block (tableless) na layout. Ngunit sa ilang kadahilanan sa mga propesyonal na lupon pinaniniwalaan na ang nabigasyon ay dapat na nakabatay sa mga hindi nakaayos na listahan - mga tag< >At< >.
Bakit mo dapat gamitin ang ul sa nabigasyon?
Ang unang paliwanag ay darating kung iniisip mo lang nang lohikal: ang menu ay isang listahan ng mga link (mga seksyon). At kung hindi mo lang iniisip, ngunit tumingin sa isang diksyunaryo, halimbawa Ozhegov:

nagiging malinaw na tayo ay nasa tamang landas (para sa mga nakalimutan, ang semantic code ay, una sa lahat, isang lohikal (makahulugang) tama na binuong code).

Kung may pagdududa, humingi tayo ng tulong sa mga awtoridad. W3C tungkol sa mga listahan:
Maaaring naglalaman ang mga listahan ng:
- hindi ayos na listahan
- iniutos na listahan
- nabigasyon
- mga kahulugan
Menu na may mga larawan
- Chrysler
- Audi
- Bugatti
Navigation ( list-style: none; /* hide markers */ margin: 30px; ) .navigation li ( float: left; /* ayusin ang listahan ng mga item sa isang row */ margin-right: 15px; /* indent para ang mga item sa menu hindi nagsanib */ ) .navigation li a ( display: block; text-align: center; padding-top: 100px; /* inner space para ang text ay nasa labas ng background */ color: #ff0000; background-position: center top; / * align ang background up at sa gitna */ background-repeat: no-repeat; li a ( /* hack para sa IE6, na naiiba ang pagtrato sa modelo ng kahon */ taas: 150px; ) .navigation .chrysler a ( background-image: url(path-to/menu-chrysler.jpg); ) .navigation .audi a ( background-image: url(path-to /menu-audi.jpg);

Ang pahalang na menu ay isang listahan ng mga seksyon ng website, kaya mas lohikal na ilagay ito sa loob ng elemento

Paano gumawa ng pahalang na menu na may slope? Do-it-yourself na pahalang na drop-down na menu gamit ang CSS at Html Anong mga elemento ang pinakamahusay na mag-layout ng isang menu

Mga Kamakailang Entri