Scribd
Cargar
76 vistas2 páginas

Estilo CSS para Menú Horizontal

Este documento describe cómo aplicar estilos CSS a un menú horizontal. Primero se elimina el padding predeterminado de la lista mediante la identificación #button. Luego, la lista se dispone en línea mediante display: inline en #button li. Finalmente, se aplican estilos como fuentes, colores y efectos hover a los enlaces de la lista mediante #button li a y #button li a:hover.

Cargado por

heydy kerl
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
76 vistas2 páginas

Estilo CSS para Menú Horizontal

Este documento describe cómo aplicar estilos CSS a un menú horizontal. Primero se elimina el padding predeterminado de la lista mediante la identificación #button. Luego, la lista se dispone en línea mediante display: inline en #button li. Finalmente, se aplican estilos como fuentes, colores y efectos hover a los enlaces de la lista mediante #button li a y #button li a:hover.

Cargado por

heydy kerl
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Código CSS

Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS Se
llamará “button”:

1 #button {
2 padding: 0;
3 }

El código anteriormente expuesto eliminará el padding que pueda haber por defecto
en la lista de elementos.

Como vamos a crear un menú horizontal, la lista deberá ser horizontal, así que
diremos que se dispongan en línea (display: inline):

1 #button li {
2 display: inline;
3 }

Nos quedará algo parecido a esto:

Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a
nuestro gusto, claro está):
1
#button li a {
2
font-family: Arial;
3 font-size:11px;
4 text-decoration: none;
5 float:left;
6 padding: 10px;
background-color: #2175bc;
7 color: #fff;
8 }
9

Y el menú va quedando de esta manera:


Vamos a aplicar un efecto :hover al mover el ratón encima de un elemento de la lista
(menú). Nótese la diferencia de padding, margin y color de fondo que mostraremos:
1 #button li a:hover {
2 background-color: #2586d7;
3 margin-top:-2px;
4 padding-bottom:12px;
}
5

El efecto sería este:

También podría gustarte