Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje15-09-2011, 21:53 (UTC)    
Título del mensaje: Crear un Menu simple

Hola amigos.
Eh estado aprendiendo a como crear un Menu css, y lo quiero compartir con ustedes

Comenzemos.
Para empezar, utilizaremos primero el Html y les explicare cada parte de Ella.

Cita:
<ul class="EstilodelMenu">
<ul class="Imagen">
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>

</ul>
</ul>

Notaran 2 Textos Marcador con diferentes colores.
El EstilodelMenu : Este texto se conectara con el Css ul.EstilodelMenu li y le dara el Estilo Separado, con sus Bordes Etc.
El Imagen : Este texto se conectara con el Css ul.Imagen li y es el que hara que aparezca la Imagen a la Izquierda.

Unavez que pegamos ese Codigo nos querada de Resultado





2- Y Ahora como para darle un poquito de Estilo, lo que haremos es Agregarle la Primera Parte de este Css
Cita:
<!-- MENU -->

ul{
margin: 0 auto;
}
ul.cool_background li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 15px;
margin: 3px;
background: url(http://cdn1.iconfinder.com/data/icons/silk2/control_play.png)1px 5px no-repeat;
}

En el css, notaremos que hay Text marcados en Color
http://cdn1.iconfinder.com/data/icons/silk2/control_play.png : Es la imagen que colocaremos ( Recomendable 16x16 )
1: Este numero dira si nosotros lo queremos Mas a la Derecha o Izquierda. EJ : Si quieres que quede al lado del Texto le Pondremos 15 seguido del PX

5: Este numero dira si nosotros lo queremos Mas Arriba o Abajo EJ : Si quieres que quede arriba del Texto le Pondremos 1 seguido del PX


* Obviamente si quitamos el Cuadro que esta por detras nos Quedara solo la imagen y el Texto


Ahora y finalmente, colocaremos la Ultima parte de Este css :

Cita:
ul{
margin: 0 auto;
padding: 0;
}
ul.cool_background li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 30px;
margin: 3px;
border: 1px solid #ff0000;
}

En este codigo, mucho no les explicare como editarlo todo, por que me parece inecesario-
30 : Es la Anchura del Recuadro que rodeara al Menu(Texto)
3: Es el Borde que rodeara al Recuadro, EJ : Si queremos que tenga un Ancho que no se enote mucho, le agregarems 0 seguido del PX-
ff0000: Es el color que tendra el Borde.
Y El resultado final seria haci :

Yo lo edite haci, ustds lo puden hacer como quieran.

Saludos
Espero que les haga Gustado.


------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui


Ultima edición por brianpwg el Mie Dic 05, 2012 8:28 pm; editado 2 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group