menu usando ul y li

por | Feb 2, 2009 | CSS, Diseño | 8 Comentarios

En este tutorial voy a explicar como crear un menu para nuestra página web usando unicamente las etiquetas ul y li

Estructura del la lista ul li

Nuestro código html es muy sencillo únicamente hay que crear un listado (ul) y agregar los items del listado que sería cada li y todo esto dentro de un div al cual llamaremos menu

1
2
3
4
5
6
7
8
<div id="menu">
<ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>

Dándole forma al UL con estilos

Si vemos sólo el html veremos un menu vertical bastante alicaido, ahora vamos a hacer que la hoja de estilos se encargue de darle forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
body {
    color: #333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
}
#menu {
    margin:auto;
    padding-left:20px;
    padding-top:5px;   
    height:25px;
    width:320px;
    background-image:url(nav_bg.png);
}
#menu ul{
    list-style:none; /* Eliminamos los bullets */
    margin:0px; /* Quitamos los margenes */
    padding:0px; /* Quitamos el padding */
}
#menu ul li {
    float:left; /* Hacemos que el menu se muestre horizontal */
    padding-left:10px;
    padding-right:10px;
    border-right:1px solid #FFFFFF;
}
#menu ul li a{
    text-decoration:none;
    color:#CCCCCC;
    font-weight:bold;
}
#menu ul li a:hover{
    color:#FFFFFF;
}

Si revisamos el código CSS, vemos que poco a poco defino el fondo, la foma en que mostrarán los items, le aplico colores a los links y va tomando forma nuestro menu.
Si estás buscando un menu con submenus, y menus desplegables, revisa este tutorial

Otros post sobre maquetación CSS

8 Comentarios

  1. usuario
    usuario el noviembre 9, 2009 a las 8:27 pm

    Barbaro esta buscado el formato mediante css y divs para reemplazar las tablas para una web en asp net

  2. Miguel Manchego
    Miguel Manchego el noviembre 10, 2009 a las 8:09 am

    Puedes ver un tutorial de como maquetar con DIVs aqui el uso de CSS es exactamente igual ya sea que uses PHP, html, JSP, ASP o cualquier otra yerba

  3. usuario
    usuario el diciembre 25, 2009 a las 12:14 pm

    hola genial, una pregunta como puedo hacer que la url cubra todo el li?

    es decir si tengo:

    Lalala

    ahi el link solo esta en el lalala y qusiera que este en todo el li.
    ya eh probado con css with 100% en «ul a»
    pero no resulta agradeceria mucho que me ayudaran 😀

  4. Miguel Manchego
    Miguel Manchego el diciembre 25, 2009 a las 11:42 pm

    Para hacer eso no debes aplicarle ancho al LI, al «ul a» debes ponerle display:block y asignarle el padding que le corresponda para que ocupe todo el li

  5. usuario
    usuario el marzo 11, 2010 a las 12:17 am

    Inetersante me ha gustado cantidad

  6. usuario
    usuario el septiembre 19, 2011 a las 4:50 pm

    Gracias por el aporte, esta interesante…

  7. usuario
    usuario el septiembre 20, 2011 a las 6:51 pm

    hola amigo, muy bueno tu tutorial; pero no pude arregalr mi problema.
    la verdad esque tengo un blog que tiene la plantilla de paper craft, y esta me permite tener solo cuatro botones como menus, por mas que dentro de mi lista hayga mas de 4, quisiera poder agregarle mas botones desde el editor html y si es posible que mis menu sea despegable, espero me puedas responder, muchas gracias desde ya por tomarte la molestia de leer mi pregunta.

  8. usuario
    usuario el noviembre 15, 2011 a las 7:59 am

    Hola, podrías indicar como poder centrar el texto en el CSS?… Es que al poner «text-align: center;» en cualquiera, me genera 2 filas una encima de otra…
    Gracias