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 |
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
Barbaro esta buscado el formato mediante css y divs para reemplazar las tablas para una web en asp net
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
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 😀
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
Inetersante me ha gustado cantidad
Gracias por el aporte, esta interesante…
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.
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