Vertikaalne CSS menüü: teeme ise

Mõned Webmasters ei taha kulutada aega arendada nullist lihtne elemente, mis on juba olemas. Nad usuvad, et ei ole mõtet raisata oma aega millelegi, mis on pikka aega olnud seal. Tegelikult need, kes on lihtsalt juhtida HTML ja CSS, see on oluline teha ise palju asju on hea ülevaade oma töö. See kehtib menüü. Loo vertikaalne CSS menüüsid. See põhineb ainult HTML ja CSS, ilma JavaScripti ja jQuery. Iga menüü on loetelu lingid, mis viivad lehekülgedele kohas.

põhisammu

Et luua lihtsa vertikaalse menüü CSS, peate järgmisi samme:

1. Esiteks, määrata linkide loend (kasutades koodi HTML), mille menüüs on. Anna neile nime, näiteks on järgmised:

1. Home.
2. Meie ajalugu.
3. Juhend.
4. Teenused.
5. Kontaktid.

2. Siis Disain lingid kui soovite abiga CSS.

Me kirjutada HTML kood, pidage my_Vmenu.html faili ja näha, kuidas see välja näeb brauseri:

See on aluseks (skelett) meie menüüs. # 1, # 2, jne tuleks asendada viitega. Vaata, kuidas see näeb välja brauseris. Pilt, mida ei meeldi. Nüüd peab algama kirjeldada elementide stiili, teha täielik vertikaalne CSS menüüsid.

Kirjeldus stiilid

Loo fail my_Vmenu.css, mis seatud kõike, mida soovite parandada välimust nii oluline element leheküljel. Siin on kood, mille kasutuselevõttu taaselustada vertikaalne CSS menüüsid. See ja kirjutada uue faili, ja siis me võtame lähemalt vaadata tähenduses põhiharu, mis on antud.

Detailne kirjeldus kasutatakse laaditabeliga

Nüüd leiavad üksikasju meie CSS vertikaalne menüü:

list-style-type võimaldab teil eemaldada järjehoidjate nimekirja. Seades "0" kasuminormi ja polster eemaldada lisapolster nimekirja. Nagu näha HTML-koodi, meie menüüs on loetelu ja stiile on defineeritud CSS.

ul # my_Vmenu - üldine stiil kogu nimekirja.

ul # my_Vmenu li a - stiili seoseid tag li.

ul # my_Vmenu li a: hover - kirjeldus tüüp vaadeldava Menüüjaotiste ajal, mil üks hõljub üle inimestele.

ul # my_Vmenu li span - teksti kirjeldus (pealkiri menüü).

Pea meeles, et failid my_Vmenu.css my_Vmenu.html ja tuleb säilitada samas kataloogis. Kuid nad võivad asuda erinevates kaustades, kuid siis on oluline registreerida my_Vmenu.html faili tee my_Vmenu.css. Ole ettevaatlik, sest uustulnukad probleem tihti.

Style peab olema ühendatud vahel pea silte html-faili. menu_1.png ja menu_2.png - see on pilt pilt menüükoht normaalne riik ja hover.

On parem, et salvestada pildid eraldi kausta pildid, nime my_images, kuid siis Reguleerige CSS koodi. Kirjutage, kus need pildid on näidatud, et nad on selle kataloogi: url (my_images / menu_1.png) ja url (my_images / menu_2.png).

Ülejäänud omadused kirjeldatud CSS koodi, mõista lihtsalt. Nad määratlevad välimus meie menüüs. See on lihtne märgata, et laius ja kõrgus asjade määratud sama kauba tavalisse olekusse, ja kui sa viid hiire üle. Fondi suurus 18px, padding täpsustab taandus erinevatest külgedest kohanimede. kuva saab määrata kuvari seadistamiseks laius ja polster.

Meie vertikaalne menüü

Nagu näete, vertikaalne CSS menüüsid luua lihtsalt. Tuginedes andmetele teadmisi, mida saab teha see ilus ja atraktiivne külastajatele oma kodulehel! Kasuta oma kujutlusvõimet, ja siis stiilne menüü oma saidile.