Vertical CSS menu: gawin sa sarili

Ang ilang mga webmaster ay hindi nais upang patagalin ang pagbuo mula sa simula simpleng elemento na umiiral na. Sila ay naniniwala na doon ay walang point sa pag-aaksaya ng iyong oras sa isang bagay na ay mahaba ang naging doon. Sa katunayan, para sa mga na lamang mastering HTML at CSS, ito ay mahalaga upang gumawa ng iyong sarili ng isang pulutong ng mga bagay na magkaroon ng isang mabuting pang-unawa ng kanilang trabaho. Ito ay sumasaklaw sa menu. Gumawa ng isang vertical CSS menu. Ito ay batay lamang sa HTML at CSS, nang walang ang paggamit ng Javascript at JQuery. Ang bawat menu ay isang listahan ng mga link na hahantong sa mga pahina ng site.

pangunahing hakbang

Upang lumikha ng isang simpleng vertical menu CSS, kailangan mo ang sumusunod na mga hakbang:

1. Una, matukoy ang isang listahan ng mga link (gamit ang code ng HTML), kung saan ang menu ay magiging. Bigyan sila ng isang pangalan, halimbawa, ay ang mga sumusunod:

1. Home.
2. Ang aming kasaysayan.
3. Gabayan.
4. Serbisyo.
5. Mga Contact.

2. Pagkatapos istilo link hangga't gusto mo sa tulong ng CSS.

Isulat namin ang HTML code, panatilihin sa my_Vmenu.html file at makita kung paano ito ay tumingin sa browser:

Ito ang batayan (skeleton) ng aming mga menu. # 1, # 2, at iba pa ay dapat mapalitan ng reference. Tingnan ang hitsura nito sa isang browser. Ang larawan ay hindi gusto. Ngayon dapat namin simulan upang ilarawan ang mga elemento ng estilo, upang makagawa ng isang kumpletong vertical CSS menu.

Paglalarawan estilo

Lumikha ng isang file my_Vmenu.css, na itinakda ang lahat ng bagay na nais mong mapabuti ang hitsura ng tulad ng isang mahalagang elemento ng site. Narito ang code, ang pagpapakilala ng kung saan ay pampalakas daw ng vertical CSS menu. Ito at isulat ang bagong file, at pagkatapos ay kami ay kumuha ng mas malapit tumingin sa kahulugan ng mga pangunahing mga linya na ibinigay.

Detalyadong paglalarawan na ginamit stylesheet

Ngayon isaalang-alang ang mga detalye ng aming CSS vertical menu:

listahan-style-type ay nagbibigay-daan sa iyo upang alisin ang mga listahan ng mga marker. Sa pamamagitan ng pagtatakda "0" sa margin at padding tanggaling ang sobrang padding sa listahan. Tulad ng maaaring makita mula sa HTML code, ang aming mga menu ay isang listahan, at ang mga estilo ay tinukoy gamit ang CSS.

ul # my_Vmenu - ang pangkalahatang estilo ng ang buong listahan.

ul # my_Vmenu li a - style na mga link sa pagitan ng mga tag li.

ul # my_Vmenu li a: hover - isang paglalarawan ng uri sa ilalim ng pagsasaalang-alang ng mga item sa menu sa isang pagkakataon kapag ang isang pumasada sa mga tao.

ul # my_Vmenu li ng isang span - text na paglalarawan (pamagat menu).

Tandaan na ang file my_Vmenu.css my_Vmenu.html at dapat hindi mapangalagaan sa parehong directory. Gayunpaman, maaari sila ay matatagpuan sa iba't ibang mga folder, ngunit pagkatapos ito ay mahalaga upang magparehistro sa my_Vmenu.html file path upang my_Vmenu.css. Mag-ingat, dahil ang mga bagong dating sa problemang ito madalas.

Estilo ay dapat na konektado sa pagitan ng head tag sa isang html-file. menu_1.png at menu_2.png - ito ay ang larawan para sa mga larawan menu item sa normal na estado at hover.

Ito ay mas mahusay na upang i-save ang mga imahe sa isang hiwalay na folder para sa mga imahe, pangalanan ito my_images, ngunit pagkatapos Ayusin ang CSS code. Isulat kung saan ang mga imahe ay ipinapakita, ang mga ito sa direktoryong ito: url (my_images / menu_1.png) at url (my_images / menu_2.png).

Sa ang magpahinga ng ang mga katangian ng inilarawan sa mga CSS code, upang maunawaan madali. Sila tukuyin ang hitsura ng aming mga menu. Ito ay madaling mapansin na ang lapad at taas ng mga item na tinukoy para sa parehong mga item sa normal na estado, at kapag pinapadaan mo ang mouse sa ibabaw ng mga ito. Sukat ng font 18px, padding tumutukoy sa indentation mula sa iba't ibang panig ng pangalan ng lugar. display hahayaan kang magtakda ng display unit upang itakda ang lapad at padding.

Ang aming mga vertical menu

Tulad ng iyong nakikita, ang vertical CSS menu upang lumikha ng madali. Sa batayan ng data ng kaalaman magagawa mong upang gawin itong maganda at kaakit-akit sa mga bisita sa iyong web site! Gamitin ang iyong imahinasyon, at pagkatapos ay isang naka-istilong menu upang makadagdag sa iyong site.