Fertikale CSS menu: it dwaan it sels

Guon webmasters net wolle tiid trochbringe ûntwikkeljen hielendal opnij yn ienfâldige eleminten dy't al bestean. Se leauwe dat der gjin punt yn fergrieme jim tiid op eat dat hat lang west dêr. Yn feite, foar dyjingen, dy't krekt behearskjen HTML en CSS, is it wichtich om dysels in protte dingen om in goed ynsjoch fan harren wurk. Dat jildt foar it menu. Meitsje in fertikale CSS menu. It sil wêze basearre allinnich op HTML en CSS, sûnder it brûken fan Javascript en JQuery. Elts menu is in list mei keppelings dy 't liede ta siden fan de site.

basic stappen

Om meitsjen in ienfâldige fertikale menu CSS, jo moatte de neikommende stappen:

1. Yn it foarste plak, bepale in list fan keppelings (brûkende koade HTML), wêrfan it menu sil wêze. Jou harren in namme, bygelyks, binne lykas folget:

1. Home.
2. Us skiednis.
3. Guide.
4. Tsjinsten.
5. Kontakten.

2. Dan Styling keppelings as jo wolle mei de help fan de CSS.

Wy skriuwe de HTML koade, hâlden yn my_Vmenu.html triem en sjen hoe't it sil sjen yn 'e browser:

Dit is de basis (bonkerak) fan ús menu. # 1, # 2, ensfh moatte wurde ferfongen troch referinsje. Sjoch hoe't it liket yn in blêder. De foto dy't jo sille net leuk. No moatte wy begjinne te beskriuwe de eleminten fan styl, om in folslein fertikale CSS menu.

beskriuwing styles

Triem oanmeitsje my_Vmenu.css, dy't set alles jo wolle ferbetterje de ferskining fan sa'n wichtich elemint fan de site. Hjir is de koade, it ynfieren fan dat sil revitalize de fertikale CSS menu. It en skriuw it nije triem, en dan wy nimme in tichter sjoch de betsjutting fan 'e wichtichste rigels dy't jûn.

Wiidweidige beskriuwing brûkt stylblêd

No beskôgje de details fan ús CSS vertical menu:

list-style-type kinne jo fuortsmite de list mei stiften. Troch it fêststellen fan "0" oant de marzje en padding ferwiderje de ekstra padding yn 'e list. Sa't bliken docht út de HTML-koade, ús menu is in list, en de stilen wurde definiearre mei help CSS.

ul # my_Vmenu - de totale styl fan de hiele list.

ul # my_Vmenu li a - styl keppelings tusken de tag li.

ul # my_Vmenu li a: Hover - in beskriuwing fan it type yn behanneling fan menu items op in tiid doe't men hinget boppe minsken.

ul # my_Vmenu li in span - tekst omskriuwing (titel menu).

Tink der om dat files my_Vmenu.css my_Vmenu.html en moatte wurde bewarre yn deselde triemtafel. Lykwols, hja kin leit yn ferskate mappen, mar dan is it wichtich om te registrearjen yn my_Vmenu.html triem Paad nei my_Vmenu.css. Wês foarsichtich, omdat de nijkommers oan dit probleem faak.

Styl moat wurde ferbûn tusken de holle tags yn in html-triem. menu_1.png en menu_2.png - dit is de foto foar de foto menu item yn de normale steat en Hover.

It is better om te bewarjen de bylden yn in apart map foar ôfbyldings, it mar my_images, mar dan Pas de CSS koade. Skriuwe wêr't dizze bylden binne te sjen, se binne yn dizze map: url (my_images / menu_1.png) en url (my_images / menu_2.png).

Yn de rest fan 'e eigenskippen beskreaun yn de CSS koade, te ferstean maklik. Se beskiede hokker uterlik fan ús menu. It is maklik om te merken dat de breedte en hichte fan items opjûn foar deselde items yn 'e normale steat, en as jo de mûs yn de mûs boppe harren. Lettertype grutte 18px, padding spesifisearret de ynspringing út ferskillende kanten fan 'e plaknammen. skerm lit jo de werjefte ienheid om de breedte en padding.

Us fertikale menu

Sa't jo sjen kinne, de fertikale CSS menu te meitsjen maklik. Oan de basis fan gegevens fan 'e kennis silst wêze kinne om it moai en oantreklik foar besikers oan jo web site! Brûk dyn ferbylding, en dan Stylfolle menu te oanfolje dyn site.