Yon gid etap-pa-etap
Si ou navigasyon meni se yon ranje orizontal atravè tèt la oswa yon ranje vètikal desann bò la, li la toujou jis yon lis. Lè w ap kreye Navigasyon entènèt, li souvan fasil bliye ke yon meni navigasyon se jis yon gwoup fè lwanj nan lyen yo. Men, si ou pwogram Navigasyon ou lè l sèvi avèk XHTML + CSS, ou ka kreye yon meni ki se ti download (XHTML la) ak fasil Customize (CSS la).
Pou kòmanse
Pou kòmanse desine yon lis pou navigasyon, ou bezwen sèvi ak yon lis.
Li kapab yon lis estanda san presedan ki te idantifye kòm navigasyon an:
Si ou gade byen nan HTML a, ou pral remake ke "Kay" lyen an tou te gen yon ID nan youarehere. Sa a pral pèmèt ou kreye yon meni ki idantifye kote aktyèl la pou lektè ou yo. Menm si ou pa fè plan sou gen ki kalite Replik vizyèl sou sit ou kounye a, ou ka gen ladan enfòmasyon sa yo. Si ou deside ajoute Replik la pita, ou pral gen mwens kodaj yo prepare sit ou.
San yo pa nenpòt manier CSS , meni XHTML sa a sanble yon lis estanda unordered. Gen bal ak atik yo lis yo yon ti kras akne. Paske mwen sèvi ak lyen ki gen lisans , pi navigatè pa pral montre lyen yo kòm klikabl (souliye ak nan ble). Si ou kole nan HTML ki pi wo a nan yon paj entènèt, navigasyon ou a ap gade tankou sa a:
- Kay
- Pwodwi yo
- Sèvis
- Kontakte nou
Sa a se bèl raz epi yo pa gade anpil tankou yon meni. Men, ak jis kèk estil CSS ajoute nan lis la, ou ka kreye yon meni ki fè ou fyè.
Navigasyon vètikal Menu
Yon meni navigasyon vètikal se trè fasil pou ekri paske li montre nan menm fason ak yon lis nòmal: leve, li desann.
Lis atik yo montre vètikal desann paj la.
Lè mwen meni manier, mwen renmen kòmanse nan deyò a ak travay pous By sa, mwen vle di ke mwen premye style UI # navigasyon an ak Lè sa a, deplase li nan eleman yo li yo ak Lè sa a, lyen yo, elatriye Se konsa, pou meni sa a, premye ou defini lajè a nan meni an. Sa a pral asire ke menm si atik yo meni yo long, yo pa pral pouse rès la nan Layout a sou oswa lakòz orizontal defile.
UL # Navigasyon {lajè: 12em; }}
Yon fwa mwen te gen seri a lajè, mwen ka jwe ak atik yo lis. Sa a pèmèt m 'mete bagay sa yo tankou (debarase m de bal yo), koulè background, sou fwontyè, aliyman tèks, ak marges.
Li # Navigasyon li {
lis-style: Pa gen;
background-koulè: # 039;
fwontyè-top: solid 1px # 039;
tèks aliman: bò gòch;
Marge: 0;
}}
Yon fwa ou te mete Basics yo pou atik yo lis ou ka kòmanse jwe ak ki jan meni an sanble nan zòn nan lyen. Premye style UL # Navigasyon LI A ak Lè sa a, A: lyen, A: te vizite, A: hover, ak A: aktif (si ou vle yo). Pou lyen yo, mwen renmen fè lyen yo yon eleman blòk (olye ke default la nan-liy). Sa a fòs yo pran moute espas ki la tout antye de LI-yo epi yo aji plis tankou yon paragraf, ki fè yo pi fasil style kòm bouton meni.Mwen lòt bagay mwen toujou fè se retire anba a (tèks-decoration: Pa gen;), tankou sa a fè bouton yo gade plis tankou bouton avè m '.
Men, nan kou, konsepsyon ou ta ka diferan.
Li # Navigasyon li yon {
ekspozisyon: blòk;
tèks-decoration: okenn;
padding: .25em;
fontyè-anba: solid 1px # 39f;
fwontyè-dwat: solid 1px # 39f;
}}
Avi ke ak ekspozisyon an: blòk; mete sou lyen yo, bwat la an antye nan atik la meni se klikabl, pa sèlman lèt yo. Sa a se bon pou itilite tou. Asire ou ke ou mete koulè yo lyen (lyen, te vizite, hover ak aktif) si ou vle yo yo diferan de ble a ble, wouj ak koulè wouj violèt.
yon: lyen, yon: te vizite {koulè: #fff; }}
yon: hover, yon: aktif {koulè: # 000; }}
Mwen renmen tou bay eta a hover yon ti jan pi plis atansyon pa chanje koulè a background.
yon: hover {background-koulè: # ff; }}
Si ou ta renmen plis egzanp nan meni vètikal, konsilte lis ki anba a.
- Yon manier vètikal
- Yon Modèl Debaz Vètikal Modèl
- Yon manier vètikal ak ou isit la
- Yon Modèl Debaz vètikal avèk ou isit la
Navigasyon Navigasyon Menu
Kreye meni Navigasyon orizontal yo se yon ti kras pi difisil pase meni Navigasyon vètikal paske ou gen konpanse lefèt ke HTML lis pito montre vètikal. Menm jan ak meni orizontal la, premye kreye lis meni navigasyon ou an :
Pou kreye yon meni orizontal, travay menm jan ou te fè ak meni vètikal la. Kòmanse ak deyò a ak travay pous Depi mwen vle navigasyon mwen an kòmanse nan kwen gòch la, mwen mete l 'ak 0 kite Marge ak padding, epi mwen flote l' sou bò gòch la. Ou ta dwe tou jwenn nan abitid la nan mete lajè a pou ke meni ou pa pran plis oswa mwens espas pase ou gen entansyon. Pou meni orizontal, sa a se nòmal lajè a plen nan konsepsyon an. Mwen menm mwen te ajoute yon koulè background nan lis la tout antye fè li pi fasil li.
Nan # Navigasyon {
flote: agoch;
Marge: 0;
padding: 0;
lajè: 100%;
background-koulè: # 039;
}}
Men, sekrè a nan meni an Navigasyon orizontal se nan atik yo lis. Lis atik yo nòmalman bloke eleman, ki vle di ke yo pral gen yon nouvo liy mete devan ak apre chak youn. Pa chanje ekspozisyon an soti nan blòk aliye, ou fòse eleman yo lis nan liy moute pwochen youn ak lòt orizontal.
Li # Navigasyon li {ekspozisyon: aliye; }}
Mwen trete lyen yo egzakteman menm jan mwen trete yo nan meni an navigasyon vètikal, ak koulè yo menm ak dekorasyon tèks. Mwen te ajoute yon fwontyè anlè pou définir bouton yo lè yo plane sou. Bagay la sèlman mwen retire te ekspozisyon an: blòk; menm jan sa pral mete newlines yo tounen nan epi detwi meni orizontal la.
Li # Navigasyon li yon {
tèks-decoration: okenn;
padding: .25em 1em;
fontyè-anba: solid 1px # 39f;
fontyè-top: solid 1px # 39f;
fwontyè-dwat: solid 1px # 39f;
}}
yon: lyen, yon: te vizite {koulè: #fff; }}
Li # Navigasyon li nan: hover {
background-koulè: # ff;
koulè: # 000;
}}
Ou isit la Location Enfòmasyon sou
Yon lòt aspè nan HTML se idantifyan youarehere a. Si ou vle modifye meni ou a pou montre kote aktyèl la nan itilizatè ou, tou senpleman itilize ID sa a defini yon koulè background diferan oswa style lòt. Deplase ID atribi nan atik meni ki kòrèk la sou lòt paj pou ke paj aktyèl la toujou make.
Nan # Navigasyon li # youarehere yon {background-koulè: # 09f; }}
Si ou mete estil sa yo ansanm sou paj ou, ou ka kreye yon bar meni orizontal men vètikal ki travay avèk sit ou, men se rapid nan download ak trè fasil aktyalizasyon nan lavni an. Lè l sèvi avèk XHTML + CSS vire lis ou a nan yon zouti trè pwisan pou konsepsyon.
Si ou ta renmen plis egzanp sou meni orizontal, konsilte sa ki annapre yo.
- Yon style orizontal style
- Yon Modèl Debaz Horizontal
- Yon style ki gen orizontal orizontal ak ou isit la
- Yon Modèl Debaz Horizontale avèk ou isit la