CSS menú vertical: fer-ho vostè mateix

Alguns administradors web no volen gastar temps en el desenvolupament des de zero elements simples que ja existeixen. Ells creuen que no hi ha sentit a perdre el temps en alguna cosa que ha estat durant molt de temps allà. De fet, per a aquells que estan dominant HTML i CSS, és important fer-se un munt de coses per tenir una bona comprensió del seu treball. Això s'aplica al menú. Crear una menús CSS verticals. Es basarà únicament en HTML i CSS, sense l'ús de Javascript i jQuery. Cada menú és una llista d'enllaços que condueixen a les pàgines del lloc.

passos bàsics

Per crear un senzill menú vertical CSS, són necessaris els següents passos:

1. En primer lloc, determinar una llista d'enllaços (utilitzant el codi HTML), dels quals serà el menú. donar-los un nom, per exemple, són els següents:

1. Inici.
2. La nostra història.
3. Guiï.
4. Serveis.
5. Contactes.

2. A continuació Styling enllaços com vulgui amb l'ajuda de CSS.

Escrivim el codi HTML, mantenim en arxiu my_Vmenu.html i veure com es veurà en el navegador:

Aquesta és la base (esquelet) del nostre menú. # 1, # 2, etc. ha de substituir-se per referència. Vegi com es veu en un navegador. La imatge no t'agradarà. Ara hem de començar a descriure els elements d'estil, per fer un complet menús CSS verticals.

Descripció estils

Crear un arxiu de my_Vmenu.css, que estableix tot el que desitja millorar l'aspecte d'un element tan important del lloc. Aquí està el codi, la introducció de les quals revitalitzarà els menús CSS verticals. I escriure el nou arxiu, i després anem a fer una ullada més de prop el significat de les principals línies que es donen.

Descripció detallada full d'estil utilitzat

Considerem ara els detalls del nostre menú vertical CSS:

list-style-type li permet eliminar de la llista de punts. Mitjançant l'establiment de "0" al marge i el farciment treure el encoixinat addicional en la llista. Com es pot veure en el codi HTML, el nostre menú és una llista, i els estils es defineixen mitjançant CSS.

ul # my_Vmenu - l'estil general de tota la llista.

ul # my_Vmenu li a - enllaços d'estil entre l'etiqueta li.

ul # my_Vmenu li a: hover - una descripció del tipus en consideració d'elements de menú en un moment quan un plana sobre les persones.

ul # my_Vmenu li un lapse - descripció de text (menú de títols).

Recordeu que els arxius my_Vmenu.css my_Vmenu.html i s'ha de conservar al mateix directori. No obstant això, poden estar ubicats en diferents carpetes, però llavors és important registrar-se a la ruta de l'arxiu my_Vmenu.html a my_Vmenu.css. Aneu amb compte, perquè els nouvinguts a aquest problema sovint.

L'estil ha de ser connectat entre les etiquetes del cap en un arxiu html. menu_1.png i menu_2.png - Aquesta és la imatge de l'element de menú d'imatge en l'estat normal i el vol estacionari.

És millor guardar les imatges en una carpeta separada per a les imatges, nomenar-Mis_imágenes, però després ajustar el codi CSS. Escriure on es mostren aquestes imatges, es troben en aquest directori: url (Mis_imágenes / menu_1.png) i l'URL (Mis_imágenes / menu_2.png).

A la resta de les propietats descrites en el codi CSS, per entendre fàcilment. Ells defineixen l'aparença del nostre menú. És fàcil adonar-se que l'amplada i l'alçada dels materials especificats per a aquests articles en l'estat normal, i quan es passa el ratolí sobre ells. Mida de la font 18px, farcit especifica la sagnia des de diferents costats dels noms de lloc. pantalla li permet configurar la unitat de visualització per establir l'ample i el farciment.

El nostre menú vertical

Com es pot veure, els menús CSS verticals per crear fàcilment. Sobre la base de dades de coneixement que vostè serà capaç de fer-ho bonic i atractiu per als visitants del seu lloc web! Utilitza la seva imaginació, i després un menú d'estil per complementar seu lloc.