Mitsangana CSS menu: manao izany ny tenanao

Ny webmasters sasany tsy te-handany fotoana fampandrosoana avy rangotra, ratra kely singa tsotra izay efa misy. Mino izy ireo fa tsy misy antony nandany ny fotoana amin'ny zavatra izay efa ela no tao. Raha ny marina, ho an'ireo izay vao HTML sy CSS mahafehy, zava-dehibe ny manao ny tenanao be dia be ny zavatra mba manana fahalalana tsara ny asany. Izany dia mihatra amin'ny sakafo. Mamorona mitsangana CSS karazan-tsakafo. Ho mifototra afa-tsy amin'ny HTML sy CSS, tsy misy ny fampiasana Javascript sy JQuery. Sakafo tsirairay ny lisitry ny rohy izay mitarika ho amin'ny pejy ao amin'ny tranonkala.

fototra dingana

Mba hamorona tsotra mitsangana tsakafo CSS, dia mila dingana manaraka ireto:

1. Voalohany, mamaritra ny lisitry ny rohy (mampiasa fehezan-dalàna HTML), izay ny sakafo ho. Omeo ireo anarana, ohatra, dia toy izao manaraka izao:

1. Home.
2. Ny tantara.
3. Hitari-dalana.
4. Services.
5. Fifandraisana.

2. Dia Styling rohy araka izay irinao noho ny fanampian'ny CSS.

Manoratra ny HTML fehezan-dalàna, foana amin'ny my_Vmenu.html rakitra ary jereo ny fomba dia hijery eo amin'ny navigateur:

Izany no fototra (taolana) ny sakafo. # 1, # 2, sns Tokony ho soloina ny boky. Jereo ny fomba mijery ao amin'ny navigateur. Ny sary dia tsy mba tahaka. Ankehitriny dia tsy maintsy manomboka hamaritana ny singa ny fomba fanoratra, mba ho tanteraka mitsangana CSS karazan-tsakafo.

Description fomba

Mamorona rakitra my_Vmenu.css, izay nametraka ny zavatra rehetra tianao ny hanatsara ny endriky ny singa manan-danja toy izany ny toerana. Ity ilay fehezan-dalàna, ny fampidirana ny izay hahavelom-bolo indray ny mitsangana CSS karazan-tsakafo. Izany ary soraty ny rakitra vaovao, ary avy eo Ho isika handinika ny hevitry ny tena tsipika izay nomena.

Nampiasa tsipiriany DESCRIPTION stylesheet

Diniho anefa ny antsipiriany ny CSS mijidina menu:

lisitra fomba-karazana mamela anao hanaisotra ny lisitry ny marika. Amin'ny alalan'ny fametrahana "0" amin'ny sisiny sy ny padding padding manala ny fanampiny ao amin'ny lisitra. Araka ny hita avy amin'ny HTML fehezan-dalàna, ny sakafo dia lisitra, ary ny fomba mampiasa CSS dia voafaritra.

ul # my_Vmenu - ny ankapobeny fomba lisitra iray manontolo.

ul # my_Vmenu Li iray - fomba rohy eo amin'ny tenifototra Li.

ul # my_Vmenu Li a: miaraka amin - ny famaritana ny karazana eo ambany fandinihana ny zavatra sakafo amin'ny fotoana iray ny olona hovers.

ul # my_Vmenu Li irain-jehy - lahatsoratra famaritana (lohateny sakafo).

Tadidio fa my_Vmenu.css my_Vmenu.html antontan-taratasy sy ny tsy maintsy ho voatahiry ao amin'ny lahatahiry iray ihany. Na izany aza, dia mety ho hita ao amin'ny lahatahiry samy hafa, kanefa dia zava-dehibe ny fisoratana anarana ao amin'ny rakitra my_Vmenu.html lalana mankany amin'ny my_Vmenu.css. Mitandrema, satria vao tonga any ity olana ity matetika.

Style dia tsy maintsy mifandray eo amin'ny lohany amin'ny HTML Tags-rakitra. menu_1.png sy menu_2.png - izany no sary ny sary sakafo zavatra ao amin'ny ara-dalàna sy ny miaraka amin fanjakana.

Tsara ny afa-tsy ny sary ao amin'ny fampirimana misaraka ho an'ny sary, anarana izany my_images, fa avy eo Amboary ny CSS fehezan-dalàna. Soraty izay naseho ireo sary ireo, dia ao amin'ny lahatahiry ity: URL (my_images / menu_1.png) sy ny URL (my_images / menu_2.png).

Ao ny sisa ny fananana voalaza ao amin'ny fehezan-dalàna CSS, mba hahatakatra mora foana. Izy ireo mamaritra ny endriky ny sakafo. Mora ny mahita fa ny sakany sy ny haavony ny zavatra voalaza fa iray ihany no zavatra tao amin'ny fanjakana ara-dalàna, ary raha miaraka amin ny totozy eo amboniny. Font habeny 18px, padding mamaritra ny Fikinifinifin'ny andininy avy amin'ny lafiny tompon-tany anarana. Asehoy ny mamela anao nametraka ny fampisehoana sampana mba hametraka ny sakany sy ny padding.

Ny mitsangana sakafo

Araka ny hitanao, ny CSS mitsangana mba hamoronana karazan-tsakafo mora foana. Eo amin'ny fototry ny angon-drakitra fahalalana ianareo dia ho afaka ny hanao izany tsara tarehy sy tsara tarehy ny mpitsidika ny tranonkala toerana! Ampiasao ny saina, ary avy eo ny stylish sakafo mba hameno ny toerana.