CSS menú vertical: facelo só

Algúns webmasters non quere gastar tempo a desenvolver a partir de elementos simples arranhão que xa existen. Eles cren que non hai ningún punto en desperdiçar seu tempo en algo que foi alí. De feito, para aqueles que están só dominar HTML e CSS, é importante facer-se unha morea de cousas para ter unha boa comprensión do seu traballo. Isto aplícase ao menú. Crear un menú CSS verticais. El estará baseado só en HTML e CSS, sen o uso de JavaScript e jQuery. Cada menú é unha lista de ligazóns que levan a páxinas web.

pasos básicos

Para crear un simple menú vertical CSS, son necesarios os seguintes pasos:

1. En primeiro lugar, determinar unha lista de ligazóns (usando o código HTML), da cal o menú. Dálles un nome, por exemplo, son as seguintes:

1. Home.
2. Nosa historia.
3. Guía.
4. Servizos.
5. Contactos.

2. A continuación, Styling conexións como quere coa axuda CSS.

Escribir o código HTML, manter en arquivo my_Vmenu.html e ver como vai ollar no navegador:

Esta é a base (esqueleto) do noso menú. # 1, # 2, etc. debe ser substituído por referencia. Vexa como queda nun navegador. A imaxe que non vai gusta. Agora, temos que comezar a describir os elementos de estilo, para facer unha completa menús CSS verticais.

inscrición estilos

Crear un my_Vmenu.css arquivo, que definir todo o que quere mellorar o aspecto dun elemento tan importante do sitio web. Aquí está o código, a introdución de que vai revitalizar os menús CSS verticais. Lo e escribir o novo ficheiro, e entón imos dar un ollo o significado das principais liñas que se dan.

Descrición detallada estilo utilizada

Agora, imos considerar en detalle os nosos menús CSS verticais:

list-style-type permite eliminar da lista de marcadores. Ao definir "0" para a marxe e padding eliminar a cobertura extra na lista. Como se pode ver a partir do código HTML, o noso menú é unha lista, e os estilos definidos usando CSS.

ul # my_Vmenu - o estilo xeral de toda a lista.

ul # my_Vmenu lin un - os enlaces de estilo entre o lin tag.

ul # my_Vmenu li a: hover - unha descrición do tipo baixo consideración de elementos de menú nun momento en que paira sobre as persoas.

ul # my_Vmenu lin un palmo - descrición do texto (menú de títulos).

Lembre que os arquivos my_Vmenu.css my_Vmenu.html e debe ser preservada no mesmo directorio. Con todo, poden ser localizados en carpetas diferentes, pero, a continuación, é importante rexistrar o camiño do ficheiro my_Vmenu.html para my_Vmenu.css. Teña coidado, porque os recén chegados a este problema moitas veces.

Estilo debe ser conectado entre as etiquetas de cabeza nun ficheiro HTML. menu_1.png e menu_2.png - esta é a imaxe para o elemento de menú imaxe no estado normal e hover.

É mellor gardar as imaxes nunha carpeta separada para imaxes, nomealo my_images pero logo axuste o código CSS. Escribir onde estas imaxes móstranse, están neste directorio: URL (my_images / menu_1.png) e url (my_images / menu_2.png).

No resto das propiedades descritas no código CSS, para entender facilmente. Eles definen o aspecto do noso menú. É doado entender que o ancho e alto de elementos especificados para os mesmos elementos en estado normal, e cando pasa o rato sobre eles. Tamaño da fonte 18px, estofado especifica o recúo dos lados distintos dos nomes de lugares. visualización permite que estableza a unidade de visualización para definir o ancho e estofado.

Noso menú vertical

Como verás, os menús CSS verticais para crear facilmente. Baseándose nos datos de coñecemento que será capaz de facelo bonito e atractivo para os visitantes do seu sitio web! Utilice a súa imaxinación, e, a continuación, un menú elegante para complementar o seu sitio.