Treoir céim ar chéim
Cibé an bhfuil do roghchlár nascleanúna ina chéile cothrománach thar an mbarr nó as a chéile ingearach síos ar an taobh, tá sé fós ach liosta. Nuair a bhíonn an tsaingseoireacht ar an ngréasán á dhearadh, is minic dearmad a dhéanamh dearmad nach bhfuil ach roghchlár nascleanúna ag grúpa glúine de naisc. Ach má chláraíonn tú do nascleanúint ag baint úsáide as XHTML + CSS, is féidir leat a chruthú roghchlár atá beag le híoslódáil (an XHTML) agus éasca a shaincheapadh (CSS).
Ag tosú
Chun tús a dhearadh liosta le haghaidh loingseoireachta, ní mór duit liosta a úsáid.
D'fhéadfadh sé gur liosta caighdeánach neamhordaithe a aithníodh mar an loingseoireacht:
Má fhéachann tú go dlúth leis an HTML, feicfidh tú go bhfuil ID agat freisin ar an nasc "Baile". Ligeann sé seo duit roghchlár a chruthú a aithníonn an suíomh reatha do do léitheoirí. Fiú mura bhfuil tú ag pleanáil ar an gcineál sin d'amharc ar do shuíomh anois, is féidir leat an fhaisnéis sin a áireamh. Má shocraíonn tú an cue a chur ina dhiaidh sin, beidh níos lú códaithe agat chun do shuíomh a ullmhú.
Gan aon styling CSS , is cosúil go bhfuil liosta caighdeánach neamhordaithe ag an roghchlár XHTML seo. Tá urchair ann agus tá na míreanna liostaithe beagán. Ós rud é go bhfuil mé ag baint úsáide as naisc áitcheangail , ní thaispeánfaidh an chuid is mó de na brabhsálaithe na naisc mar atá cliceáil (béimithe agus gorm). Má ghreamú tú sa HTML thuas i leathanach Gréasáin, beidh cuma ar do nascleanúint mar seo:
- Baile
- Táirgí
- Seirbhísí
- Glaoigh orainn
Tá sé seo an-leadránach agus ní cosúil le roghchlár. Ach le roinnt stíleanna CSS curtha leis an liosta, is féidir leat roghchlár a chruthú a dhéanann tú bródúil as.
Menu Nascleanúint Ingearach
Tá an-éasca le scríbhneoireacht ingearach a scríobh toisc go léiríonn sé ar an mbealach céanna le gnáthliosta: suas agus síos.
Taispeánann na hítimí liosta go hingearach síos an leathanaigh.
Nuair atá mé biachláir ag stiúradh, is maith liom tosú ag an taobh amuigh agus obair a dhéanamh orthu. De réir seo, is éard atá i gceist agam stíl an ul # nascleanúint agus ansin bogadh go dtí na heilimintí li agus ansin na naisc, etc. Mar sin, an chéad leat a shainmhínítear leithead an roghchláir. Cinnteoidh sé seo go fiú má tá na hítimí roghnóireachta fada, ní chuirfidh siad an chuid eile den leagan amach ar ais nó a scriosadh go cothrománach.
ul # navigation {leithead: 12em; }
Nuair a bheidh an leagan leithead agam, is féidir liom a imirt leis na hítimí liosta. Ligeann sé seo dom rudaí a shocrú cosúil le (chun fáil réidh leis na piléar), dathanna cúlra, teorainneacha, ailíniú téacs agus imeall.
ul # navigation li {
liosta-stíl: none;
dath cúlra: # 039;
teorainn-barr: 1px soladach # 039;
téacs-ailíniú: clé;
imeall: 0;
}
Nuair atá na bunghnéithe leagtha amach agat chun na míreanna liosta is féidir leat tosú ag seinm leis an gcaoi a bhreathnaíonn an roghchlár sa cheantar naisc. An chéad stíl an UL # navigation LI A agus ansin an A: nasc, A: cuairt, A: hover, agus A: gníomhach (más mian leat iad). Maidir leis na naisc, is maith liom na bloc eilimintí a dhéanamh (seachas an réamhshocraithe in-líne). Ligeann sé seo dóibh spás iomlán an LI a ghlacadh - agus gníomhóidh siad níos mó cosúil le mír, rud a fhágann go bhfuil siad níos éasca stíl mar cnaipí roghchláir. Is é an rud eile a dhéanaim i gcónaí ná an líne a bhaint as (maisiú téacs: none;), toisc go dtéann na cnaipí seo níos mó cosúil le cnaipí domsa.
Ach ar ndóigh, d'fhéadfadh do dhearadh a bheith difriúil.
ul # navigation li a {
taispeáint: bloc;
maisiú téacs: none;
stuáil: .25em;
bun na teorann: 1px soladach # 39f;
ceart teorann: 1px soladach # 39f;
}
Fógra leis an taispeáint: bloc; atá leagtha ar na naisc, tá bosca iomlán an mhír roghchláir cliceáil, ní hamháin na litreacha. Tá sé seo go maith freisin maidir le húsáidteacht. Déan cinnte na dathanna nasc a shocrú (nasc, cuairt a thabhairt, cliceáil agus gníomhach) más mian leat go mbeadh siad difriúil ó na gorm, dearg agus corcra réamhshocraithe.
a: nasc, a: cuairt {dath: #fff; }
a: hover, a: gníomhach {dath: # 000; }
Is maith liom freisin aird níos leithne a thabhairt don stát hover trí athrú ar an dath cúlra.
a: hover {background-color: #fff; }
Más mian leat níos mó samplaí de bhiachláir ingearach, téigh i gcomhairle leis an liosta thíos.
- Clár Ingearach Styled
- Teimpléad Bunúsach Menu Ingearach
- Tá Menu Styled Ingearach ina bhfuil tú anseo
- Teimpléad Bunúsach Menu Ingearach ina bhfuil tú anseo
Roghchlár Nascleanúint Cothrománach
Tá biachláir nascleanúna cothrománach níos deacra ná biachláir nascleanúna ingearacha toisc go gcaithfidh tú an fhíric gur liostaí HTML fearr a thaispeáint go hingearach. Mar leis an roghchlár cothrománach, cruthaigh do liosta roghchlár nascleanúna :
Chun roghchlár cothrománach a chruthú, déan an obair céanna mar a rinne tú leis an roghchlár ingearach. Tosaigh leis an taobh amuigh agus oibrigh isteach. Ós rud é gur mhaith liom mo nascleanúint a thosú sa chúinne ar chlé, leag mé é le 0 imeall agus stuáil chlé, agus snámhfaidh mé é ar chlé. Ba chóir duit a bheith ar an nós leithead a leagan síos ionas nach nglacfaidh do roghchlár spás níos mó ná níos lú ná mar a bheartaíonn tú. Maidir le biachláir chothrománacha, is é seo an leithead iomlán an dearadh de ghnáth. Chuir mé dath cúlra leis an liosta ar fad chomh maith le go mbeadh sé níos éasca é a léamh.
ul # navigation {
snámhphointe: ar chlé;
imeall: 0;
stuáil: 0;
leithead: 100%;
dath cúlra: # 039;
}
Ach tá an rún don roghchlár nascleanúna cothrománach sna míreanna liosta. De ghnáth, is iad na hítimí liosta bloc eilimintí, rud a chiallaíonn go mbeidh líne nua acu a chuirfear roimh gach ceann agus dá éis. Trí athrú a dhéanamh ar an taispeántas ó bhloc go inlíne, cuirfidh tú na heilimintí liosta chun teacht in aice le chéile go cothrománach.
ul # navigation li {taispeáint: inline; }
Chóireáil mé na naisc díreach mar a chóireáil mé leo sa roghchlár nascthaingeingearach, leis na dathanna céanna agus maisiú téacs. Chuir mé teorainn bhreise chun na cnaipí a leagan amach nuair a bhíonn siad ag dul thar a chéile. An t-aon rud a d'éirigh liom ná an taispeáint: bloc; mar go gcuirfidh na línte nua isteach agus roghnaigh an roghchlár cothrománach.
ul # navigation li a {
maisiú téacs: none;
padáil: .25em 1em;
bun na teorann: 1px soladach # 39f;
teorainn-barr: 1px soladach # 39f;
ceart teorann: 1px soladach # 39f;
}
a: nasc, a: cuairt {dath: #fff; }
ul # navigation li a: hover {
dath cúlra: #fff;
dath: # 000;
}
Tá An Eolas Anseo Anseo
Gné eile de HTML is ea an aitheantóir. Más mian leat do roghchlár a mhodhnú chun suíomh reatha d'úsáideoirí a chur in iúl, bain úsáid as an ID seo chun dath cúlra nó stíl eile a shainmhíniú. Bog an tréith ID leis an mír roghchlár ceart ar leathanaigh eile ionas go mbeidh an leathanach reatha le feiceáil i gcónaí.
ul # navigation li # youarehere a {background-color: # 09f; }
Má chuireann tú na stíleanna seo le chéile ar do leathanach, is féidir leat barra roghnóra cothrománach nó ingearach a chruthú a oibríonn le do shuíomh ach go tapa é a íoslódáil agus an-éasca a thabhairt cothrom le dáta sa todhchaí. Ag baint úsáide as XHTML + CSS casann do liostaí ina uirlis chumhachtach le haghaidh dearadh.
Más mian leat níos mó samplaí de bhiachláir chothrománacha, déan teagmháil leis an méid seo a leanas.
- Clár Cothrománach Styled
- Teimpléad Bunúsach Menu Cothrománach
- Tá Roghchlár Cothrománach Styled atá Anseo Anseo
- Teimpléad Bunúsach Menu Cothrománach a bhfuil tú Anseo