Currently viewing and reading

menu usando ul y li

Posted by admin in February 2nd 2009

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

under: CSS, Diseño
Tags: CSS, html, maquetación

5 Comments Received

Trackback

Fernando

November 9th, 2009 at 20:27 | #1

Reply | Quote

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

November 10th, 2009 at 08:09 | #2

Reply | Quote

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
daniel

December 25th, 2009 at 12:14 | #3

Reply | Quote

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
admin

December 25th, 2009 at 23:42 | #4

Reply | Quote

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
avali2

March 11th, 2010 at 00:17 | #5

Reply | Quote

Inetersante me ha gustado cantidad