Canllaw cam wrth gam
P'un a yw'ch dewislen llywio yn rhes llorweddol ar draws y brig neu res fertigol i lawr yr ochr, mae'n dal yn unig restr. Wrth ddylunio gwe-lywio, mae'n aml yn hawdd anghofio mai dim ond grŵp o gysylltiadau gogoneddedig yw bwydlen lywio. Ond os ydych chi'n rhaglennu'ch mordwyo trwy ddefnyddio XHTML + CSS, gallwch greu bwydlen i'w lawrlwytho (y XHTML) a'i hawdd ei addasu (y CSS).
Dechrau arni
I ddechrau dylunio rhestr ar gyfer mordwyo, mae angen i chi ddefnyddio rhestr.
Gall fod yn rhestr safonol heb ei orfodi a nodwyd fel y llywio:
Os edrychwch yn fanwl ar yr HTML, byddwch yn sylwi bod gan y ddolen "Cartref" ID hefyd o chi. Bydd hyn yn eich galluogi i greu bwydlen sy'n nodi lleoliad presennol eich darllenwyr. Hyd yn oed os nad ydych chi'n bwriadu cael y math hwnnw o gliw gweledol ar eich safle ar hyn o bryd, gallwch gynnwys y wybodaeth honno. Os penderfynwch ychwanegu'r ciw yn ddiweddarach, bydd gennych lai codio i baratoi eich safle.
Heb unrhyw arddull CSS , mae'r ddewislen XHTML hwn yn edrych fel rhestr safonol sydd heb ei orfodi. Mae yna fwledi ac mae'r eitemau rhestri wedi'u cwtogi ychydig. Gan fy mod yn defnyddio dolenni cyswllt , ni fydd y rhan fwyaf o borwyr yn arddangos y dolenni fel y gellir eu clicio (danlinellu ac yn las). Os ydych chi'n gludo yn yr HTML uchod i mewn i dudalen We, bydd eich mordwyo yn edrych fel hyn:
- Cartref
- Cynhyrchion
- Gwasanaethau
- Cysylltwch â Ni
Mae hyn yn eithaf diflas ac nid yw'n edrych yn debyg iawn i fwydlen. Ond gyda dim ond ychydig o arddulliau CSS sydd wedi'u hychwanegu at y rhestr, gallwch greu bwydlen sy'n eich gwneud yn falch ohono.
Dewislen Llywio Fertigol
Mae dewislen llywio fertigol yn hawdd iawn i'w ysgrifennu oherwydd ei fod yn dangos yr un ffordd â rhestr arferol: i fyny ac i lawr.
Mae'r eitemau rhestr yn ymddangos yn fertigol i lawr y dudalen.
Pan dwi'n arddull bwydlenni, hoffwn ddechrau ar y tu allan a gweithio ynddo. Drwy hyn, rwy'n golygu fy mod yn gyntaf yn trefnu llywio ul # ac yna'n symud i'r elfennau ef ac yna'r dolenni, ac ati. Felly, ar gyfer y fwydlen hon, Yn gyntaf, rydych chi'n diffinio lled y fwydlen. Bydd hyn yn sicrhau, hyd yn oed os yw'r eitemau yn hir, ni fyddant yn gwthio gweddill y cynllun dros neu yn achosi sgrolio llorweddol.
ul # navigation {width: 12em; }
Unwaith rwyf wedi gosod y lled, gallaf chwarae gyda'r eitemau rhestr. Mae hyn yn fy ngalluogi i osod pethau fel (i gael gwared ar y bwledi), lliwiau cefndir, ffiniau, aliniad testun, ac ymylon.
ul # navigation li {
rhestr-arddull: dim;
cefndir-liw: # 039;
border-top: solid 1px # 039;
testun-alinio: chwith;
ymyl: 0;
}
Unwaith y byddwch wedi gosod y pethau sylfaenol ar gyfer yr eitemau rhestr y gallwch chi ddechrau eu chwarae gyda sut mae'r fwydlen yn edrych yn yr ardal dolenni. Arddull gyntaf yr UL # llywio LI A ac yna'r A: cyswllt, A: ymwelwyd, A: hover, ac A: yn weithgar (os ydych chi eisiau iddynt). Ar gyfer y dolenni, hoffwn wneud yr elfennau bloc yn y dolenni (yn hytrach na'r diffyg mewn-lein). Mae hyn yn eu gorfodi i ymgymryd â gofod cyfan yr LI - ac maen nhw'n gweithredu'n fwy fel paragraff, sy'n eu gwneud yn haws arddull fel botymau bwydlen. Y peth arall rydw i bob amser yn ei wneud yw cael gwared ar y tanlinell (addurniad testun: dim;), gan fod hyn yn gwneud y botymau yn edrych yn fwy tebyg i fotymau i mi.
Ond wrth gwrs, gallai eich dyluniad fod yn wahanol.
ul # navigation li a {
arddangos: bloc;
text-decoration: dim;
padio: .25em;
border-bottom: solid 1px # 39f;
ffin-dde: solet 1px # 39f;
}
Rhybuddiwch gyda'r arddangosfa: bloc; ar y dolenni, mae blwch cyfan yr eitem ddewislen yn glicio, nid dim ond y llythrennau. Mae hyn hefyd yn dda ar gyfer defnyddioldeb. Gwnewch yn siŵr eich bod yn gosod y lliwiau cyswllt (dolen, ymweld â nhw, hofran a gweithgar) os ydych chi am iddynt fod yn wahanol i'r glas, coch a phorffor diofyn.
a: link, a: visited {lliw: #fff; }
a: hover, a: active {lliw: # 000; }
Hoffwn hefyd roi mwy o sylw i'r wladwriaeth hofran trwy newid lliw cefndirol.
a: hover {background-color: #fff; }
Os hoffech fwy o enghreifftiau o fwydlenni fertigol, edrychwch ar y rhestr isod.
- Dewislen Fertigol Styled
- Templed Dewislen Fertigol Sylfaenol
- Dewislen Fertigol Styled gyda Chi Yma
- Templed Dewislen Fertigol Sylfaenol gyda Chi Yma Yma
Dewislen Llywio Llorweddol
Mae creu bwydlenni llywio llorweddol ychydig yn fwy anodd na bwydlenni llywio fertigol oherwydd mae'n rhaid i chi wrthbwyso'r ffaith bod yn well gan restrau HTML arddangos yn fertigol. Fel gyda'r fwydlen lorweddol, gwnewch chi eich rhestr ddewislen fordwyo gyntaf:
Er mwyn creu bwydlen lorweddol, dylech weithio yr un peth ag y gwnaethoch gyda'r ddewislen fertigol. Dechreuwch gyda'r tu allan a gweithio ynddo. Ers i mi am i fy mordwyo ddechrau yn y gornel chwith, rwy'n ei osod gyda 0 ymyl chwith a padio, ac yr wyf yn ei arnofio i'r chwith. Dylech hefyd ddod â'r arfer o osod y lled fel na fydd eich bwydlen yn cymryd mwy o lai na'ch bwriad. Ar gyfer bwydlenni llorweddol, fel arfer mae lled llawn y dyluniad. Rwyf hefyd wedi ychwanegu lliw cefndir i'r rhestr gyfan i'w gwneud hi'n haws ei ddarllen.
ul # navigation {
arnofio: chwith;
ymyl: 0;
padio: 0;
lled: 100%;
cefndir-liw: # 039;
}
Ond mae'r gyfrinach i'r ddewislen lywio llorweddol yn yr eitemau rhestr. Fel rheol, mae eitemau rhestru yn elfennau bloc, sy'n golygu y bydd ganddynt linell newydd a osodir cyn ac ar ôl pob un. Trwy newid yr arddangosfa o bloc i mewn llinell, byddwch yn gorfodi'r elfennau rhestr i gyd-fynd â'i gilydd yn llorweddol.
ul # navigation li {display: inline; }
Fe wnes i drin y cysylltiadau yn union fel yr wyf yn eu trin yn y ddewislen llywio fertigol, gyda'r un lliwiau ac addurniadau testun. Ychwanegais frig uchaf i gyfyngu'r botymau pan fyddant yn cael eu hudo drosodd. Yr unig beth rwy'n ei dynnu oedd yr arddangosfa: bloc; gan y bydd hynny'n gosod y llinell newydd yn ôl ac yn dinistrio'r fwydlen lorweddol.
ul # navigation li a {
text-decoration: dim;
padio: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
ffin-dde: solet 1px # 39f;
}
a: link, a: visited {lliw: #fff; }
ul # navigation li a: hover {
cefndir-liw: #fff;
lliw: # 000;
}
Gwybodaeth Yma Yma Yma Yma
Agwedd arall ar HTML yw'r dynodwr chi. Os ydych chi eisiau addasu'ch dewislen i nodi lleoliad presennol eich defnyddwyr, defnyddiwch yr ID hwn i ddiffinio lliw cefndir gwahanol neu arddull arall. Symud y priodwedd ID i'r eitem ddewislen gywir ar dudalennau eraill fel bod y dudalen gyfredol bob amser yn cael ei amlygu.
ul # navigation li # youarehere a {background-color: # 09f; }
Os ydych chi'n gosod yr arddulliau hyn gyda'i gilydd ar eich tudalen, gallwch greu bar dewislen llorweddol neu fertigol sy'n gweithio gyda'ch gwefan ond mae'n hawdd ei lawrlwytho ac yn hawdd iawn i'w ddiweddaru yn y dyfodol. Mae defnyddio XHTML + CSS yn troi eich rhestrau yn arf pwerus iawn ar gyfer dylunio.
Os hoffech fwy o enghreifftiau o fwydlenni llorweddol, edrychwch ar y canlynol.
- Dewislen Llorweddol Styled
- Templed Dewislen Llorweddol Sylfaenol
- Dewislen Llorweddol Styled gyda chi Yma
- Templed Dewislen Llorweddol Sylfaenol gyda Chi Yma