Hacer un funcional menú horizontal es más sencillo de lo que parece. Los elementos de una lista se muestran como bloques con lo que cada elemento del listado ocupará una nueva línea. Simplemente cambiando el modo en que se muestran los items, tendremos una lista horizontal que podrá hacer las veces de menú. Para empezar abrimos el bloc de notas xD. Y acto seguido ponemos la siguiente linea la cual es la mas importante: <ul id="nav"> Ahora empezaremos a crear lo que se llamara la lista del menu y submenu (aparece cuando pasas el raton por encima) comenzando por el enlace principal (el de la portada) y terminando por menus y submenus.
Nota: para agregar una seccion poneis algo asi <li><a href="#nogo">Menu 1»</a>
Despues de lo dicho en la nota poneis los submenbus que apareceran al pasar el mouse.<li><a href="URL">Texto</a></li> y despues para cerrar la lista </ul>
</li>
La cosa es así: el <ul> es el menú en sí, cada <li> es un botón del menú y el <ul> dentro del <li> es desplegable de ese botón (cosa que no hago en este ejemplo para evitar confundiros) al igual que debes sustituir en donde dice URL por la direccion a que sera destinada el submenu o pones #nogo y en donde dice texto logicamente el texto a mostrar (cuando vayas a terminar escribes </ul> para cerrar las listas)
Entonces nuestro menu quedaria asi:
<li><a href="URL de la portada">Portada</a></li>
<li><a href="URL">Texto</a></li>
<li><a href="URL">Texto</a></li>
<li><a href="URL">Texto</a></li>
<li><a href="URL">Texto</a></li>
<li><a href="URL">Texto</a></li>
<li><a href="URL">Texto</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li> |
Ahora le aplicamos un estilo CSS al menu para que quede "guapo" xD, para eso abrimos el codigo CSS escribiendo: <style type="text/css"> y a continuacion los siguientes codigos o estilos (los puedes modificar en los colores) uno debajo del otro:
#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana,
sans-serif; border:1px solid #000; border-color:#eca #b97 #a86 #edb;
border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav table {border-collapse:collapse;}
#nav li {float:left; padding:0 20px 0 10px;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#nav li a li {float:left;}
#nav li a {display:block; float:left; color:#888; height:25px;
padding-right:5px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300; background:#fff;}
#nav a:hover {position:relative; z-index:300; text-decoration:underline;
color:#b75;}
#nav :hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
#nav a:hover ul {left:-10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#b75;}
/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:-1px;}
/* keep further levels hidden */
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;} |
Y finalmente cierras el estilo css con: </style>
Recuerda que puedes modificarlos en los colores, ancho, diferencia entre menus, etc.
Para pocisionar el menu:
<div style="position:absolute;left:(cantidad)px;top:(cantidad)px;">
codigo del menu
</div>
|
