Skref fyrir skref leiðbeiningar
Hvort leiðsagnarvalmyndin þín er lárétt röð yfir efri eða lóðréttri röð niður hliðina, er það ennþá bara listi. Þegar þú opnar vefleiðsögn er oft auðvelt að gleyma því að leiðsagnarvalmynd er bara glorified hópur tengla. En ef þú forritar flakk með XHTML + CSS, getur þú búið til valmynd sem er lítil til að hlaða niður (XHTML) og auðvelt að sérsníða (CSS).
Að byrja
Til að byrja að hanna lista fyrir siglingar þarftu að nota lista.
Það kann að vera staðlað óflokkað listi sem hefur verið auðkenndur sem flakk:
Ef þú lítur vel á HTML, munt þú taka eftir því að tengillinn "Heim" hefur einnig auðkenni þitt þar. Þetta leyfir þér að búa til valmynd sem auðkennir núverandi staðsetningu fyrir lesendur þína. Jafnvel ef þú ætlar ekki að hafa þessa tegund af sjónrænum hætti á vefsvæðinu þínu núna, þá getur þú notað þær upplýsingar. Ef þú ákveður að bæta við cue síðar hefurðu minna kóða til að undirbúa síðuna þína.
Án CSS stíl , þetta XHTML matseðill lítur út eins og venjulegur óflokkað listi. Það eru byssukúlur og listatriðin eru örlítið indented. Vegna þess að ég er að nota staðartengiliðir , munu flestar vélar ekki birta tenglana sem smellt er á (undirstrikað og blátt). Ef þú lítur inn í ofangreind HTML á vefsíðu, þá mun flakk þín líta svona út:
- Heim
- Vörur
- Þjónusta
- Hafðu samband við okkur
Þetta er nokkuð leiðinlegt og lítur ekki mikið út eins og matseðill. En með nokkrum CSS-stílum bætt við listann geturðu búið til valmynd sem gerir þig stolt.
Lóðrétt stýrihópur
Lóðrétt leiðsagnarvalmynd er mjög auðvelt að skrifa því hún birtist á sama hátt og venjuleg listi: upp og niður.
Listaliðirnir birtast lóðrétt niður á síðunni.
Þegar ég er að stilla valmyndir, mér finnst gaman að byrja að utan og vinna inn. Með þessu þýðir ég að ég stíll fyrst # ulígunarinnar og þá farðu í li þætti og síðan tenglana o.fl. Svo fyrir þennan valmynd, fyrst skilgreinir þú breidd valmyndarinnar. Þetta tryggir að jafnvel þótt valmyndarþættirnir séu lengi, munu þeir ekki ýta restinni af skipulaginu yfir eða valda láréttri hreyfingu.
ul # flakk {breidd: 12em; }
Þegar ég hef fengið breidd sett, get ég spilað með listatölunum. Þetta leyfir mér að setja hluti eins og (til að losna við skotin), bakgrunnslitir, landamæri, textajöfnun og marmar.
ul # navigation li {
listastíll: ekkert;
bakgrunnslit: # 039;
Landamærin efst: solid 1px # 039;
text-align: vinstri;
framlegð: 0;
}
Þegar þú hefur sett grunnatriði fyrir listatriðin getur þú byrjað að spila með því hvernig valmyndin lítur út í tengslasvæðinu. Fyrst stíll UL # flakk LI A og síðan A: tengilinn, A: heimsótt, A: sveima og A: virk (ef þú vilt þá). Fyrir tengla finnst mér gaman að gera tenglana í blokkareiningu (frekar en sjálfgefið í línu). Þetta gerir þeim kleift að taka allt plássið á LI-og þeir virka meira eins og málsgrein, sem gerir þeim auðveldara að stilla eins og valmyndarhnappar. Annað sem ég geri alltaf er að fjarlægja undirlínuna (textaskreyting: none;), eins og þetta gerir hnappar líta meira eins og hnappar til mín.
En auðvitað getur hönnun þín verið öðruvísi.
ul # navigation li a {
sýna: blokk;
textaskreyting: ekkert;
padding: .25em;
Landamæri-botn: solid 1px # 39f;
landamærin til hægri: solid 1px # 39f;
}
Takið eftir því með skjánum: blokk; sett á tenglana er allt reitinn í valmyndinni smellt á, ekki bara stafina. Þetta er líka gott fyrir nothæfi. Gakktu úr skugga um að setja tengilinn litum (tengilinn, heimsótt, sveima og virk) ef þú vilt að þau séu frábrugðin sjálfgefið bláum, rauðum og fjólubláum.
a: hlekkur, a: heimsótt {lit: #fff; }
a: sveima, a: virk {litur: # 000; }
Mér líkar líka að gefa sveima ríkisins smá athygli með því að breyta bakgrunnslitnum.
a: sveima {bakgrunnslitur: #fff; }
Ef þú vilt fleiri dæmi um lóðréttar valmyndir skaltu hafa samband við listann hér fyrir neðan.
- A Stíll Lóðrétt Valmynd
- Grunnur lóðrétt valmyndarsniðmát
- A Stíll Lóðrétt Valmynd með Þú ert hér
- A Basic Lóðrétt Valmynd Sniðmát með þér er hér
Lárétt Navigation Valmynd
Að búa til láréttar flakkavalmyndir er örlítið erfiðara en lóðréttar valmyndir, þar sem þú þarft að vega upp á móti því að HTML listar kjósa að birta lóðrétt. Eins og með lárétta valmyndina skaltu fyrst búa til valmyndalistann fyrir flakk :
Til að búa til lárétta valmynd, vinna það sama og þú gerðir með lóðréttum valmyndinni. Byrjaðu að utan og vinnðu inn. Þar sem ég vil fá leiðsögn mína til að byrja í vinstra horninu set ég það með 0 vinstri kanti og púði, og ég fljóta það til vinstri. Þú ættir einnig að venjast því að setja breiddina þannig að valmyndin þín taki ekki meira eða minna pláss en þú ætlar. Fyrir lárétta valmyndir er þetta venjulega fullur breidd hönnunarinnar. Ég lagði líka bakgrunnslit á alla listann til að auðvelda það að lesa.
ul # flakk {
fljóta: vinstri;
framlegð: 0;
padding: 0;
breidd: 100%;
bakgrunnslit: # 039;
}
En leyndarmálið á lárétta flakkavalmyndinni er í listatölunum. Listaliðir eru venjulega blokkarþættir, sem þýðir að þeir munu hafa newline sett fyrir og eftir hverja einn. Með því að skipta skjánum úr blokk til inline, þvingar þú listahlutana til að raða næstum öðru á láréttan hátt.
ul # navigation li {sýna: inline; }
Ég meðhöndlaði tenglana nákvæmlega eins og ég hafði meðhöndlað þau í lóðrétta flakkavalmyndinni, með sömu litum og textaskreytingu. Ég bætti við efri mörkum til að afmarka hnappana þegar þau eru sveiflast yfir. Það eina sem ég flutti var skjánum: blokk; eins og það mun setja newlines aftur inn og eyða láréttum matseðlinum.
ul # navigation li a {
textaskreyting: ekkert;
padding: .25em 1em;
Landamæri-botn: solid 1px # 39f;
Landamæri efst: solid 1px # 39f;
landamærin til hægri: solid 1px # 39f;
}
a: hlekkur, a: heimsótt {lit: #fff; }
ul # navigation li a: hover {
bakgrunnslit: #fff;
litur: # 000;
}
Þú ert hér Staðsetning Upplýsingar
Annar þáttur af HTML er þér þar sem þú þekkir þig. Ef þú vilt breyta valmyndinni til að sýna núverandi staðsetningu notenda skaltu einfaldlega nota þetta auðkenni til að skilgreina aðra bakgrunnslit eða annan stíl. Færðu þetta auðkenni á réttu valmyndinni á öðrum síðum þannig að núverandi síða sé alltaf auðkennd.
ul # navigation li # youarehere a {background-color: # 09f; }
Ef þú setur þessa stíl saman á síðuna þína geturðu búið til lárétt eða lóðrétt valmyndarslá sem vinnur með síðuna þína en er fljótur að hlaða niður og mjög auðvelt að uppfæra í framtíðinni. Notkun XHTML + CSS breytir listum þínum í mjög öflugt verkfæri fyrir hönnun.
Ef þú vilt fleiri dæmi um lárétta valmyndir skaltu hafa samband við eftirfarandi.
- A Stíll Lárétt Valmynd
- A Basic Lárétt Matseðill Sniðmát
- A Stíll Lárétt Valmynd með Þú ert hér
- A Basic Lárétt Valmynd Sniðmát með þér er hér