CSS bertikala menu: egiten bakarrik

webmasters Batzuk nahi ez denbora hori dagoeneko existitzen hutsetik elementu sinple batetik garatzen. ez dagoela aspaldi han zerbait zure denbora alferrik galtzen puntua ez da uste dute. Izan ere, bakarra zara HTML eta CSS masterizazioa dutenentzat, garrantzitsua da zuk zeuk egin gauza asko beren lana ulermen ona izatea. Hau menu aplikatzen. Sortu CSS bertikala menuak. It oinarrituko da soilik HTML eta CSS gainean, Javascript eta JQuery erabili gabe. menu bakoitzak gunearen orrietan eramango duten loturen zerrenda bat da.

oinarrizko urrats

sinple bat sortzeko bertikala menu CSS, behar duzun urrats hauek:

1. Lehenik eta behin, zehaztu estekak (kodea HTML erabiliz), eta horietatik menu izango zerrenda. Eman izena, adibidez honako hauek dira,:

1. Hasiera.
2. Gure historia.
3. Gida.
4. Zerbitzuak.
5. Kontaktuak.

2. Ondoren loturak Sorozabal nahi bezala CSS laguntzarekin duzu.

idazten dugu HTML kodea, my_Vmenu.html fitxategian gorde eta ikusi nola egingo nabigatzailean itxura:

Hau oinarria (hezurdura) gure menuaren da. # 1, # 2, etc. ordezkatu behar erreferentzia. Ikusi nola itxura nabigatzaile bat da. Irudian ez zaizu gustatzen. Orain style elementu deskribatzeko, a bertikala CSS menuak osoa egiten hasteko behar dugu.

Description estiloak

Sortu fitxategia my_Vmenu.css, eta horrek Gunean elementu garrantzitsua, hala nola itxura hobetu nahi duzun guztia ezarri. Hemen kodea, sarrera horietatik bertikal CSS menuak biziberritu egingo da. fitxategi berria, eta idatzi, eta ondoren hartu dugu bat hurbilago dagoela ematen dira ildo nagusiak esanahia begiratu.

XEHATUA DESCRIPTION erabilitako estilo-

Orain kontuan hartu gure CSS menu bertikala xehetasunak:

Zerrenda-style-mota ahalbidetzen markatzaileak zerrendan kendu duzu. "0" ezartzen marjina eta betegarria izateko By kendu Zerrendako estra betegarria. HTML kode bertatik ikus daitekeen bezala, gure menu zerrenda bat da, eta estiloak CSS erabiliz definitzen dira.

ul # my_Vmenu - zerrenda osoa estilo orokorra.

ul # my_Vmenu li bat - Etiketa li arteko estilo loturak.

ul # my_Vmenu li a: hover - menu elementu Aztertutako motaren deskribapena garai batean pasatzen pertsona baino bat.

ul # my_Vmenu li span a - testu deskribapen (izenburua menua).

Gogoratu my_Vmenu.css my_Vmenu.html fitxategiak eta direktorio berean kontserbatu beharko da. Hala ere, karpetak ezberdinak izango dira kokatzen daiteke, baina gero, garrantzitsua da my_Vmenu.html fitxategia my_Vmenu.css bidea ere erregistratu. Kontuz ibili, arazo horri Montoia delako askotan.

Style egon burua html-fitxategi batean etiketa artean konektatuta egon behar du. menu_1.png eta menu_2.png - honek irudi menuan egoera normal eta pasatzean elementua irudi da.

Hobe da irudiak gordetzeko aparteko karpeta batean irudiak, izen hura my_images, baina gero Egokitu CSS-kodea. Idatzi non irudi horiek agertzen dira, dira direktorio honetan dute: url (my_images / menu_1.png) eta URL (my_images / menu_2.png).

CSS kodea azaldutako ezaugarriak gainerako, erraz ulertzeko. Gure menu itxura definitzen dute. Erraza da zabalera eta altuera elementu hori egoera normal batean elementu bera zehaztu nabarituko, eta noiz pasatzean sagua horien gainetik. Letra-tamaina 18px, padding toponimoak alboetan desberdinetako koska zehazten du. pantaila aukera ematen dizu pantaila unitate ezartzeko aukera zabalera eta betegarria ezartzeko.

Gure menu bertikala

Ikusten duzun bezala, bertikala CSS menuak erraz sortzeko. ezagutza datuak oinarri hartuta ederra da eta zure web gunean bisitari erakargarria egiteko gai izango duzu! Erabili zure irudimena, eta, ondoren, menu dotorea zure gunea osatzeko.