Buscar Más buscado

Menú Vertical Desplegable con CSS y JavaScript - Sobre el css y las dos imagenes

2 - Sobre el css y las dos imagenes

Artículo creado por Balú. Extraido de: http://www.baluart.net/tema2/diseno-web/pagina18
11 de Agosto de 2006
< anterior | 1 2 3 4 | siguiente >

Una vez creado el documento del contenido de nuestro menú vertical, debemos elaborar el código para poder darle forma de menú a nuestra lista, para ello crearemos un archivo css, al que llamaremos "menu.css", y en él escribiremos el código necesario para que nuestro menú pueda ser visto en distintos navegadores.

body {
 background-color: #ffffff;
 font-family: Arial, Helvetica, sans-serif;
 margin: 100px 0 3em 0;
 padding: 0;
 font-size: 16px;
 font-weight: bolder;
}
#menunav {
 margin: 0;
 padding:0;
}
#menunav li {
 list-style-type: none;
 margin: 0;
 padding: 0;
 background-image:  url(img/debajo_btn.jpg);
 /* background-repeat: repeat-x; */
 border-bottom: 1px solid #0074E3;
 background-color: #0074E3;
}
#menunav ul {
 border-top: 1px solid #eeeeee;
 margin: 0;
 padding: 0;
 z-index: 10000;
}
#menunav ul li {
 border-left: 1px solid #FFFFFF;
 border-bottom: 1px solid #333333;
}
#menunav a {
 display: block;
 text-decoration: none;
 background-color: transparent;
 padding: 4px 12px 4px 10px;
 color: #ffffff;
 border-top: 1px solid #0061BD;
 border-right: 1px solid #0061BD;
 border-bottom: 0;
 border-left: 4px solid #0061BD;
 line-height:1;
}
/*controla la botonera */
#menunav a:hover, #menunav a:active, #menunav a:focus,
#menunav .menuon, #menunav .menuon:hover,
#menunav .menuon:active {
 color: #333333;
 background-color: #0061BD;
 letter-spacing: 0.01px;
 border-top: 1px solid #0061BD;
 border-right: 1px solid #0061BD;
 border-left: 4px solid #0061BD;
 background-image:  url(img/encima_btn.jpg);
 background-repeat: repeat-x;
}
#menunav .menumark, #menunav .menumark:hover {
 font-weight: bold;
}
/*Controlan los links y la imagen de flecha */
/*the normal trigger link */
#menunav .menutrg, #menunav .menutrg:hover, #menunav .menutrg:active {
 background-image:  url(img/flecha.gif);
 background-repeat: no-repeat;
 background-position: right center;
}
#menunav .menutrg:hover {
 background-position: right center;
 background-image:  url(img/encima_btn.jpg);
 background-repeat: repeat-x;
}
/*controla el desplazamiento y alcance de los submenus */
#menunav .menuhide {
 left: -9000px;
 border: 0;
}
#menunav .menushow {
 left: auto;
 z-index: 20000;
}
/*modifica el menu madre */
#sidebar {
 position: absolute;
 top: 150px;
 left: 10px;
 width: 11em;
 font-size: 0.85em; 
}

< anterior | 1 2 3 4 | siguiente >

Opinar
5 opiniones

Ya caí en cuenta

Para eso es el href, listo entendí todo....
Super excelente

Muy bien explicado... pero y ahora cómo hago para programar lo que va a hacer cada opción... jajajaja bueno trabajeré en eso!!!! Mil gracias
Excelente

Qué mas puedo decir.. gracia por ayudar a las personas desorientadas
Muy vacano.

Muy vacano me gusto mucho este menu, ademas que lo necesitaba para un proyecto. Gracias.
Valoración muy negativa.

Incompleto, viene de otra página, los enlaces no funcionan.

Artículos relacionados con 'Menú Vertical Desplegable con CSS y JavaScript'

Menú Vertical Desplegable con CSS y JavaScript
Este es un excelente efecto que le podemos dar a nuestros menús desplegables, les explicamos... Más »
Menú Horizontal Desplegable con efecto de Tranparencia
Hace unos días vimos como a partir de una lista creamos un Menú desplegable vertical,... Más »

Anuncios Google

Autor y licencia de 'Menú Vertical Desplegable con CSS y JavaScript'


Artículo de Balú. Extraido de: http://www.baluart.net/tema2/diseno-web/pagina18 CopyLeft
Esta obra está bajo una licencia de Creative Commons
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.