Paŝo de paŝo post paŝo
Ĉu via navigila menuo estas horizontala vico trans la supro aŭ vertikala vico laŭ la flanko, ĝi estas nur nur listo. Al la desegnado de TTT-navigado, ofte estas facile forgesi, ke navigado-menuo nur estas glora grupo de ligoj. Sed se vi planas vian navigacion per XHTML + CSS, vi povas krei menuon, kiu estas malgranda por elŝuti (la XHTML) kaj facile agordi (la CSS).
Komencante
Por komenci desegni liston por navigado, vi devas uzi liston.
Ĝi povas esti norma neordigita listo kiu estis identigita kiel la navigado:
Se vi rigardas la HTML, vi rimarkos, ke la ligilo "Hejmo" ankaŭ havas ID de vi. Ĉi tio ebligos al vi krei menuon, kiu identigas la nunan lokon por viaj legantoj. Eĉ se vi ne planas havi tiun tipon de vida vidaĵo en via retejo nun, vi povas inkludi tiun informon. Se vi decidas aldoni la cue poste, vi havos malpli kodigon por prepari vian retejon.
Sen ajna CSS-stilo , ĉi tiu XHTML-menuo aspektas kiel normo neordigita listo. Estas kugloj kaj la lertaĵoj estas iomete dentitaj. Ĉar mi uzas lokokupetajn ligilojn , la plej multaj foliumiloj ne montros la ligojn kiel klareblaj (substaritaj kaj en bluaj). Se vi batos en la supra HTML en TTT-paĝon, via navigado aspektos kiel ĉi:
- Hejmo
- Produktoj
- Servoj
- Kontakti Nin
Ĉi tio estas sufiĉe enuiga kaj ne aspektas kiel menuo. Sed kun nur kelkaj CSS-stiloj aldonitaj al la listo, vi povas krei menuon, kiu vin fieras.
Vertikala Navigado Menuo
Vertikala navigado-menuo estas tre facila por skribi ĉar ĝi montras same kiel normala listo: supren kaj malsupren.
La lertaĵoj montras vertikale malsupren de la paĝo.
Kiam mi starigas menuojn, mi ŝatas komenci ekstere kaj labori. Per ĉi tio, mi volas diri, ke mi unue stiras la uln-navigado kaj poste movos al la elementoj li kaj poste la ligojn ktp. Do por ĉi tiu menuo, unue vi difinas la larĝecon de la menuo. Ĉi tio certigos, ke eĉ se la menuoj estas longaj, ili ne antaŭenpuŝos la reston de la aranĝo aŭ kaŭzas horizontalan movadon.
ul # navigado {larĝa: 12em; }
Unufoje mi havas la larĝan aranĝon, mi povas ludi kun la listaj eroj. Ĉi tio permesas al mi agordi aferojn kiel (por forigi la kuglojn), fonkolorajn, limojn, tekston, kaj randojn.
ul # navigado li {
listo-stilo: neniu;
fonkoloro: # 039;
limo-supro: solida 1px # 039;
teksto-alineo: maldekstra;
rando: 0;
}
Unufoje vi starigis la bazaĵojn por la listaj eroj, kiujn vi povas ludi kun kiel la menuo aspektas en la ligoj areo. Unua stilo la UL # navigado LI A kaj poste la A: ligilo, A: vizitis, A: ŝvebi, kaj A: aktiva (se vi volas ilin). Por la ligiloj, mi ŝatas fari la ligilojn blokan elementon (prefere ol la defaŭlta en linio). Ĉi tio devigas ilin ekpreni la tutan spacon de la LI-kaj ili agas pli kiel alineo, kio faras ilin pli facila por stiligi kiel menuo-butonoj. La alia afero, kiun mi ĉiam faras, forigas la substrekon (teksto-dekoracio: neniu;), ĉar ĉi tio faras al mi la butonojn pli similan al mi butonojn.
Sed kompreneble, via dezajno povus esti malsama.
ul # navigado li a {
montriĝo: bloko;
teksto-dekoracio: neniu;
kompletigado: .25em;
limo-fundo: solida 1px # 39f;
limo-dekstra: solida 1px # 39f;
}
Rimarku, ke per la ekrano: bloko; en la ligiloj, la tuta skatolo de la menuo estas klarebla, ne nur la literoj. Ĉi tio ankaŭ estas bona por usabilidad. Certigu agordi la ligajn kolorojn (ligilon, viziton, ŝvebadon kaj aktivon) se vi volas, ke ili estu malsamaj de la defaŭlta blua, ruĝa kaj purpura.
a: ligilo, al: vizitita {koloro: #fff; }
a: ŝvebado, a: aktiva {koloro: # 000; }
Mi ankaŭ ŝatas doni iom da pli da atento ŝanĝante la fonkoloron.
a: ŝvebu {background-color: #fff; }
Se vi ŝatus pli da ekzemploj de vertikalaj menuoj, konsultu la liston sube.
- Styled Vertikala Menuo
- Baza Vertikala Menuo Ŝablona
- Styled Vertikala Menuo kun Vi Ĉi tie
- Baza Vertikala Menuo Ŝablona kun Vi Ĉi tie
Horizontala Navigado Menuo
Krei horizontalajn navigadajn menuojn estas iomete pli malfacilaj ol vertikalaj menuoj, ĉar vi devas kompensi la fakton, ke HTML-listoj preferas montri vertikale. Kiel kun la horizontala menuo, unue kreu vian navigotan menuon :
Por krei horizontalan menuon, funkciu same kiel vi faris kun la vertikala menuo. Komencu kun la ekstera kaj laboru. Kiel mi volas, ke mia navigado komenciĝu en la maldekstra angulo, mi starigas ĝin kun 0 maldekstra rando kaj kompletigo, kaj mi flosas ĝin maldekstre. Vi ankaŭ devus kutimi agordi la larĝecon por ke via menuo ne prenu pli aŭ malpli spacon ol vi intencas. Por horizontalaj menuoj, ĉi tio estas kutime la plena larĝo de la dezajno. Mi ankaŭ aldonis fonkoloron al la tuta listo por faciligi ĝin legi.
ul # navigado {
flosas: maldekstre;
rando: 0;
Plenigado: 0;
larĝa: 100%;
fonkoloro: # 039;
}
Sed la sekreta al la horizontala navigado-menuo estas en la listo-artikoloj. Lertaĵoj estas kutime blokaj elementoj, kio signifas, ke ili havos novan linion metitan antaŭ kaj post ĉiu. Ŝanĝante la ekranon de bloko al inline, vi devigas la listajn elementojn aliĝi laŭ unu horizontale.
ul # navigation li {display: inline; }
Mi traktis la ligojn ĝuste kiel mi traktis ilin en la vertikala navigado-menuo, kun la samaj koloroj kaj tekstaj ornamoj. Mi aldonis supran limon por apartigi la butonojn, kiam ili translokiĝis. La sola afero mi forigis estis la ekrano: bloko; Kiel tio metos la liniojn enen kaj detruos la horizontalan menuon.
ul # navigado li a {
teksto-dekoracio: neniu;
kompletigado: .25em 1em;
limo-fundo: solida 1px # 39f;
limo-supro: solida 1px # 39f;
limo-dekstra: solida 1px # 39f;
}
a: ligilo, al: vizitita {koloro: #fff; }
ul # navigation li a: ŝvebu {
fonkoloro: #fff;
koloro: # 000;
}
Vi trovas ĉi tie informon pri situo
Alia aspekto de HTML estas la uzanto. Se vi volas modifi vian menuon por indiki la nunan lokon de viaj uzantoj, simple uzu ĉi tiun ID por difini malsaman fonkoloron aŭ alian stilon. Movu, ke ID atribuas al la ĝusta menuo en aliaj paĝoj por ke la nuna paĝo ĉiam estas reliefigita.
ul # navigation li # youarehere a {background-color: # 09f; }
Se vi metas ĉi tiujn stilojn kune sur via paĝo, vi povas krei horizontalan aŭ vertikalajn stanglokojn, kiuj funkcias kun via retejo, sed rapide malŝarĝas kaj tre facilas ĝisdatigi en la estonteco. Uzanta XHTML + CSS turnas viajn listojn en tre potencan ilon por dezajno.
Se vi ŝatus pli da ekzemploj de horizontalaj menuoj, konsultu la jenajn.
- Styled Horizontala Menuo
- Baza Horizontala Menuo Ŝablona
- Styled Horizontala Menuo kun Vi Ĉi tie
- Baza Horizontala Menuo Ŝablona kun Vi Ĉi tie