Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje17-10-2008, 22:40 (UTC)    
Título del mensaje: [Menu horizontal 3 Css] menu con botones modificables

Lo primero es lo primero: creamos el menú con 1 <div>, 1 <ul> y varios <li>

Simbologia
#: Url del enlace
-*-: Nombre del enlace

Cita:
<div id="menu">
<ul>
<li><a href="#">-*-</a></li>
<li><a href="#">-*-</a></li>
<li><a href="#">-*-</a></li>
<li><a href="#">-*-</a></li>
</ul>
</div>


Le vamos a dar color y forma a esto. Agregando estilo al #menu:

Cita:
#menu ul {
padding: 0px;
margin: 0px;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}


y el punto clave: horizontalizando a través de display: inline;

Código:
#menu ul li {
display: inline;
}


Hasta aquí, nada fuera de lo común. Nos falta agregar algo bonito para que se vea bien en un rollover, algo simple. Un cambio de color:

Cita:
#menu ul li a:link, #menu ul li a:visited {
background-color: #333;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}

#menu ul li a:hover, #menu ul li a:active{
color: #F30;
background-color: #CCC;
height: 20px
}


Ver resultado parcial>>

Nuestro menú básico horizontal está hecho y funciona de maravilla. Ahora agreguémosle un rollover con imagen de fondo (background-image en vez de background-color) y que las instancias estén en un mismo gif:

Gif del a:link y a:hover



Url de esta imagen
Cita:
http://www.csslab.cl/ejemplos/fondo_menu.gif


Solamente reemplazaremos donde antes habíamos seteado los parámetros relacionados con el fondo (background-image):

Cita:
#menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}


Ver resultado Final>>

El código CSS completo es :

Cita:

<-Menu wedmasterayuda->
body {
padding: 0px;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
#menu ul li {
display: inline;
}
#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}


Como les quedo el codigo...
______________







Mensaje18-10-2008, 20:20 (UTC)    
Título del mensaje:

Exelente tutorial, buen aporte.

salu2.

______________
LO MAXIMO EN SMILEYS PARA MSN
Mensaje18-10-2008, 21:02 (UTC)    
Título del mensaje:

Gracias..........Me parece conveniente k lo pasen a la Css
______________







Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group