Rêberê gav a pêngavê
Dibe ku navnîşa navîgasyon ya navîn li ser jorînek an rûpelekî vertical veşartî ye, ew tenê hêj lîstek e. Dema ku navîgasyonê malperê damezirandin, pir caran hêsan e ku ji bîr nekin ku navnîşê navnîşê tenê tenê grûpek zelalkirî ye. Lê eger hûn navnîşa XHTML + CSS bikar bînin, hûn dikarin peldanka ku biçûk bikin (XHTML) û hêsantir bike (CSS).
Getting Started
Ji bo destnîşankirina lîsteya navîgasyonê çêbikin, divê hûn lîsteya karanîna bikar bînin.
Ew dikare lîsteyek unorganized standard be ku navîgasyon lêgerîn hatiye naskirin:
Heke hûn li nêzîkî HTML-ê bibînin, hûn ê dizanin ku girêdana "Home" di heman demê de we nasnameya we heye. Ew ê ji bo ku hûn ji bo xwendevanên xwe yên heyî yên nasnameyê pêşniyaz dike ku hûn çêbikin. Heke ku hûn nexwest ku vî rengî cûreyek vîzyonê li ser malpera we heye, hûn dikarin agahdariyê bibin. Heke hûn biryar da ku paşê cûda zêde bikin, hûn ê kodê kêmtir bikin ku hûn malpera xwe amade bikin.
Bêyî ti CSS-stiling , ev XHTML menu lîsteyek unorganized standard dihêle. Li gulebar hene û lîsteya tiştên hûrgelan hindik in. Ji ber ku ez bi karûbarên cîhanê re kar dikim, piraniya gerok dê nayên girêdan (girêdan û rengê zêrîn) nayên girêdan. Heke hûn di HTML-ê de li ser malpera xwe binihêrin, navîgasyonê we wê weha bibînin:
- Xane
- Berhemên
- Xizmet
- Paqij bûn
Ev pir bargiran e û wekî peldanka mûçik nîne. Lê bi tenê çend çend şêweyên CSS-ê de lîsteyê zêde kirin, hûn dikarin li sîteyê çêbikin ku ji we re serbilind dike.
Peldanka Navîgasyonê
Peldanka navîgasyon ya pirr hêsan e ku ji bo nivîsandinê ye, ji ber ku ew di heman demê de lîsteya normal ya xwe nîşan dide: hilkişîn û jêr.
Pirtûka lîsteyan pirtirkêmtirîn rûpelekê nîşan bide.
Dema ku ez menus hilbijêrim, Ez dixwazim li derveyî kar û xebatê bikim. Bi vî awayî, ez wateyê ku ez yekem tehlikê / # navîgasyon lêbigere û paşê li elementên din û paşê ve girêdayî, pêşî hûn ji çarçoveya menuê binivîse. Ew ê wê piştrast dike ku heke pirtûkên dirêj dirêj e, ew ê nehêleya hilbijêran li ser hilweşînin an jî rêbaza horizontal.
ul # navîgasyon {width: 12em; }
Gava ku ez dora çarçoveya xwe dorînim, ez dikarim bi lîsteyan re lîstin. Ev ji min re destnîşan dike ku tiştên tiştên ku (ji bo guftûgoyan vebigire), rengên paşnav, sînor, pîvanên teknîkî, û margins.
ul # navîgasyon li {
list-style: none;
background-color: # 039;
border-top: solid 1px # 039;
text-align: left;
margin: 0;
}
Dema ku hûn basikên ji bo pirtûkên lîsteya lîsteyê diaxivin, hûn dikarin çawa lîsteyê li qada kozê çawa dibînin. Yekem yekem UL # navîgasyon LI A û paşê A: girêdan, A: Serdan, A: hover, û A: çalak (eger hûn dixwazin). Ji bo girêdanên min, ez dixwazim girêdan elementên blokek (ne ji hêla pêşnivîsa standardî). Ev hêz ji wan re tev li cîhê LI LI -ya xwe bigirin û ew di heman parçeyê de jî tevlihev dikin, ku ew hêsantir wekî pirtûka menuê hêsan dike. Wekî ku bişkojkên bêtir bişkojkên min re bibînin.
Lê bê guman, sêwirîna we dikare bibe cûda.
ul # navîgasyon lêgerîn {
display: block;
text-decoration: none;
padding: .25em;
border-bottom: solid 1px # 39f;
sînor-rast: solid 1px # 39f;
}
Têbigere ku bi dabeşkirina blokê: block; li ser girêdan, tevahiya qutikê ya menuê dişkîne, ne tenê nameyên. Ev ji bo mecbûrî jî baş e. Heke ku hûn dixwazin ji yên ji rengê reş, sor û sorûrek cuda cuda bibin ku hûn girêdanên rengan (girêdan, serdan, hover û çalak) saz bikin.
a: girêdan, a: serdana {reng: #fff; }
a: hover, a: active {color: # 000; }
Ez jî dixwazim bila hover dewletê da ku hûn rengê rengê rengê biguherînin.
a: hover {background-color: #fff; }
Ger hûn nimûneyên bêhtir yên vertical dixwaze bixwazin, lîsteya jêrîn bistînin.
- Mîhengên Vertical a Styled
- Şablon Şablonên bingehîn a vertical
- Peldanka Vertical ya ku hûn li vir têne
- Tika ye Muxalefeta bingehîn a Vertical
Menu Navigation Horizontal
Vebijêrîna navîgasyonên hêsantir yên hêsantir ji hêla navîgasyonên vertical ve têne zehmet ine nebe ji ber ku hûn guman dikin ku lîsteyên HTML-ê dixwazin pêşvebirin. Wekî ku bi menûra horizontal, pêşî lîsteya navîgasyonê ya navîgasyonê biafirîne:
Ji bo afirandina menueke horizontal, wekî heman ku hûn bi menuyê vertical re dixebite. Bi derveyî derveyî û kar bixebitin. Ji ber ku ez dixwazim navîgasyonê li korê çepê dest pê bikim, min bi wê xistiye çepê 0 û çepê xistim, û ez ew çepê çep. Divê hûn jî di habitkirina çarçoveyê da ku hûn navnîşa we ne ku hûn ji armanca xwe kêmtir an jî kêm cih nade. Ji bo meniyonên horizontal, ew bi gelemperî temamî ya temamî ye. Min jî rengek rengek bi tevahî lîstek zêde kir ku ji bo hêsan bixwînin.
ul # navîgasyon {
float: çep;
margin: 0;
padding: 0;
width: 100%;
background-color: # 039;
}
Lê veşartî ya pêşeka navîgasyonê ya horîzontal di lîsteya navnîşan de ye. Pirtûka lîsteyan bi gelemperî hêmanên blok têne, ew tê wateya ku ew dê her û her yek ji nû ve girêdayî ye. Bi veguherîna pêşniyarê ji bloka barkirina navîn, hûn hûrgelên lîsteya hûrgelan bikin ku bila paşê bi hev vekirî bi hev re hevdir bikin.
ul # navîgasyon lêgerînê {display: inline; }
Min girêdanên bi tevahî mîna ku ez di nav menuê navîgasyonê de tedawî dikim, bi heman rengî û meseleyên teknolojî. Min li ser sînorê herî bilind da ku gava ku ew li ser hûrbekirî bişkînin. Tenê tiştek ku min jêbirin, nîşanî bû: block; wekî ku dê nû nûjen bişînin û li pêşeka menuê hilweşînin.
ul # navîgasyon lêgerîn {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
sînor-rast: solid 1px # 39f;
}
a: girêdan, a: serdana {reng: #fff; }
ul # navîgasyon lêgerîn: hover {
background-color: #fff;
rengê # 000
}
Tu Agahdariya Cihê Cihê Cihê Agahdarî
Pêvek din HTML ye ku nasnameya we ya we ye. Heke hûn dixwazin ku menuê xwe biguherînin ku bikarhênerên heyî yên nîşanî nîşan bide, bi tenê vê nasnameyê bikar bînin ku rengek rengê rengê cuda binivîse. Bihêle ku ew nasnameyê li ser pirtûkên din ên rastîn ve li ser rûpelê da ku her rûpel her tim her xuya dike.
ul # navîgasyon lêgerîn {tu-rengê {reng-reng: # 09f; }
Heke hûn van şêweyên li ser rûpelê bi hev re binivîsînin, hûn dikarin ku barê malperê karê xwe ya horizontal an jî vertical biafirînin, lê zûtirîn bilezînin û pir hêsan e ku hê di pêşerojê de nûjen bikin. XHTML + CSS bi karanîna lîsteyên xwe ji bo amûrek hêzek bihêz dike.
Heke hûn dixwazin mînakên din ên horizontal dixwazin, li ser vê yekê bipirsin.
- Menu menuek Styled Horizontal
- Şablon Template A Basic Horizontal
- Mîhengek Horizontal ya ku Tu li vir e
- Bi Vebijêrk A Basic Horizontal With You Here