Fomba fitarihan-dalana
Na ny sehatra fanovozan-tsarimihetsika dia tsipika marindrano eo an-tampony na ambony laharana miloko eo ambany, fa mbola lisitra fotsiny. Rehefa mamorona tranonkala, dia mora ny manadino fa ny sari-dàlana misy navigara dia vondron'olona mifanakaiky fotsiny. Raha toa ka mampiasa ny XHTML + CSS ny navigateur ianao, dia afaka mamorona menus izay kely fandefasana (XHTML) ary mora atao (CSS).
Hanomboka
Mba hanombohana ny famolavolana lisitra ho an'ny navigation, mila mampiasa lisitra ianao.
Mety ho lisitra tsy misy fepetra tsy voamarina izay fantatra amin'ny anarana hoe navigation:
Raha mijery akaiky ny HTML ianao, dia ho hitanao fa ny rohy "Home" koa dia manana ny ID misy anao. Izany dia mamela anao hamorona menio izay mamaritra ny toerana misy azy ho an'ny mpamaky anao. Na dia tsy mikasa ny hanananao io karazam-potoana hita maso io ao amin'ny tranokalanao amin'izao fotoana izao, dia azonao atao ny mampiditra izany fampahalalana izany. Raha manapa-kevitra ny hampiditra ilay tononkalo any aoriana ianao, dia tsy hisy fametahana kah!
Tsy misy lisitra CSS , ity horonam-peo XHTML ity dia mitovy amin'ny lisitra tsy misy lisitra. Misy bala ary ny lisitry ny lisitra dia somary manindrona. Satria mampiasa rohy mpizara solonanarana aho , ny ankamaroan'ny navigateur dia tsy hampiseho ny rohy fa azo henoina (ambany sy manga). Raha ampidirinao ao amin'ny pejy web ianao ao amin'ny HTML voalaza etsy ambony, dia toy izao ny fijerinao:
- Home
- Products
- Services
- Mifandraisa aminay
Tena mampihomehy izany ary tsy mijery tahaka ny sakafo. Nefa miaraka amin'ny CSS sasany vitsivitsy fanampiny ao amin'ny lisitra, afaka mamorona menio izay mampirehareha anao.
Fitaovam-panadiovana mitsangana
Ny menokan'ny navigatika dia mora mora ny manoratra, toy ny lisitra mahazatra: miakatra sy midina.
Ny lisitry ny lisitra dia mampiseho ny pejy avoakany.
Rehefa manomana menus aho, tiako ny manomboka any ivelany ary miasa amin'izany. Amin'izay dia midika fa manomboka maka ny alàlan'ny U # navigation aho ary avy eo mivezivezy amin'ny elany ary avy eo ny rohy, sns. Noho izany, Voalohany ianao dia mamaritra ny sakan'ny menio. Izany dia ahazoana antoka fa na dia efa ela ireo endriky ny sakafo aza, dia tsy hanosika ny ambin'ny amboaram-peo izy ireo na hamoaka horonam-peo marindrano.
ul #navigation {width: 12em; }
Raha vao azoko ny sehatra malalaka dia afaka milalao miaraka amin'ireo lisitra aho. Izany dia mamela ahy mametraka zavatra toy ny (miala amin'ny bala), loko afara, sisintany, alim-bolana, ary margins.
ul #navigation [
lisitry ny lisitra: tsy misy;
background-color: # 039;
border-top: solid 1px # 039;
text-align: left;
margin: 0;
}
Raha vao nametraka ny fototra ho an'ireo lisitra ianao dia afaka manomboka milalao miaraka amin'ny fomba fijerin'ny sakafo ao amin'ny faritra rohy. Fomba voalohany ny UL # navigation LI A ary avy eo ny A: rohy, A: nitsidika, A: hover, ary A: active (raha tianao izany). Ho an'ireo rohy, tiako ny mampifandray ny singa iray block (fa tsy ny aterineto). Izany dia manosika azy ireo handray ny sehatr'ilay LI manontolo - ary mihetsika toy ny fehintsoratra izy ireo, izay mahatonga azy ireo ho mora kokoa amin'ny fanoratana ny bokotra menu. Ny zavatra hafa ataoko foana dia esorina ny fanilo (lahatsoratra-decoration: none;), satria izany no mahatonga ireo bokotra ho toy ny bokotra ho ahy.
Mazava ho azy fa mety ho hafa ny endrikao.
ul #
show: block;
text-decoration: tsy misy;
padding: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Mariho fa amin'ny fampiratiana: block; Asio eo amin'ny rohy, ny boaty manontolo amin'ny item menu dia azo kitihana, fa tsy ny litera ihany. Tsara ihany koa izany ho azo ampiasaina. Ataovy azo antoka ny mametraka ny lokon'ny rohy (rohy, fitsidihana, hoverana ary mavitrika) raha tianao ho hafa izy ireo amin'ny manga, mena ary volomparasy.
a: rohy, a: nitsidika {loko: #fff; }
a: hover, a: active {loko: # 000; }
Tiako ihany koa ny hanome lanja bebe kokoa ny fanjakana hover rehefa manova ny loko afara.
a: hover {background-color: #fff; }
Raha te hanana ohatra maromaro momba ny menus vertika ianao, dia jereo ny lisitra etsy ambany.
- A Styled Vertical Menu
- Fotodrafitrasam-pehezina fototra
- Misy sakafo miavaka miaraka aminao eto
- Misy endritsoratra miavaka miaraka aminao eto
Horonantsary navigateur horonan-tsary
Ny famoronana menus navigation horita dia somary sarotra kokoa noho ny menus navigateur avoakan-dalana satria tsy maintsy mamerina ny lisitry ny lisitry HTML raha tianao hijerena tsara. Tahaka ny amin'ny menus horizontaly, dia manorata aloha ny lisitry ny sari-tany navigation :
Mba hamoronana menio miavaka, dia ataovy toy ny nataonao tamin'ny menio mipetaka. Manomboka amin'ny ivelany ary miasa. Koa satria tiako ny hanombohana ny baiko hiantsoana havia havia, dia apetrako amin'ny marika 0 sy havaozina ny habe, ary averiko any ankavia izany. Tokony hiditra amin'ny fahazarana amin'ny fametrahana ny sakany koa ianao mba tsy hahalalanao ny habetsaky ny habeny raha oharina aminao. Ho an'ireo menus horonantsary, dia matetika ny habaka feno ny famolavolana. Nampiany loko hafa koa ny lisitra iray manontolo mba hahamora kokoa ny famakiana.
ul #navigation #
float: havia;
margin: 0;
padding: 0;
width: 100%;
background-color: # 039;
}
Saingy ny tsiambaratelon'ny menabatra amin'ny horita horita dia ao anatin'ny lisitry ny lisitra. Ny lisitry ny lisitra dia manakatona ny singa fototra, izay midika fa hanana ny laharana vaovao izy ireo alohan'ny aorian'ny tsirairay. Amin'ny famindrana ny fampisehoana avy amin'ny sakana mankany amin'ny famaritana, ianao dia manery ny lisitry ny singa mba hifanelanelana eo amin'ny sehatra maromaro.
ul #navigation [adiresy: inline; }
Noraisiko ny rohy toy ny nataoko tamin'ny menan'ny fiaramanidina avo lenta, miaraka amin'ny loko sy ny famolavolana lahatsoratra. Nanampy sisin-tany iray aho mba hamaritana ireo bokotra rehefa miparitaka izy ireo. Ny hany zavatra nesoriko dia ny fampiratiana: block; toy izany dia hametraka indray ireo rindran-damina ary hamotika ny menu horizontaly.
ul #
text-decoration: tsy misy;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
sisin-tany: solid 1px # 39f;
border-right: solid 1px # 39f;
}
a: rohy, a: nitsidika {loko: #fff; }
Zavatra tsy ampy / fanononana X-SAMPA tsy ampy,
background-color: #fff;
loko: # 000;
}
Eto ny toerana misy anao eto
Ny lafiny iray amin'ny HTML dia ny famantarana misy anao. Raha te hanova ny menuo ianao mba hanondroana ny toerana misy ny mpampiasa anao, ampiasao tsotra ity ID ity mba hamaritana loko hafa misy loko hafa na fomba hafa. Asio mari-pamantarana io eo amin'ny sehatra fisoratana maromaro ao amin'ny pejy hafa mba hahafantarana foana ny pejy misy ankehitriny.
ny # navigation li # youarehere a {background-color: # 09f; }
Raha apetrakao ao amin'ny pejinao ireo fepetra ireo, dia azonao atao ny manamboara sehatra menamena na rojom-barotra izay miasa miaraka amin'ny tranonkalanao fa maika haingana ary azo hamaivanina amin'ny ho avy. Amin'ny fampiasana XHTML + CSS dia mamadika ny lisitra ho fitaovana mahery vaika ho an'ny famolavolana.
Raha te hanana ohatra maromaro amin'ny menus horizontal ianao, dia manorata ireto manaraka ireto.
- Horonantsary horonan-tsary milamina
- Horonan-tsarimihetsika fototra Horizontal
- Misy sakafo milamina misy anao miaraka aminao eto
- Horonan-tsarimihetsika fototra miaraka aminao no eto