Nada es para Siempre. mientras exísta noción del tiempo. Diego Flórez
Bien otra vez me encuentro por aquí blogueando. Esta vez les traigo la forma más sencilla de hacer un menu horizontal de un solo nivel con CSS. ¿A que me refiero con eso de "un solo nivel"?. Sencillo es un menu simple sin sub-menus.
Manos a la obra, primero espero darme a entender con este post, pues luego iremos ampliando nuestros conocimientos para hacer menús más llamativos y por ende se debe de tener todo claro desde un inicio.
como es de saber la principal funcion de las etiquetas <ul> </ul>. Es presentar una lista de elementos de este tipo: 
El codigo html que da como resultado la imagen anterior es el siguiente
miPrimerMenuCSS.html
<html>
<head>
<title>Mi Primer Menu con CSS</title>
</head>
<body>
<ul>
<li><a href="#">uno</a></li>
<li><a href="#">dos</a></li>
<li><a href="#">tres</a></li>
</ul>
</body>
</html>
Como pueden ver hemos utilizado las etiquetas de listas pues nos vamos a basar en estas para hacer nuestro menu Horizontal con CSS. Pero ¿Por qué utilizar listas para hacer un menu en Html?. Sencillo, primero que todo hay que reconocer que en el menu van a ir diferentes enlaces, por lo tanto es una "lista" de enlaces. Mediante CSS procedemos a cambiar la parte visual de estas, entonces empezamos:
miPrimerMenuCSS.css
#miPrimerMenuCSS {
list-style:none;
margin:0;
padding:0;
}
#miPrimerMenuCSS li {
margin:5px;
padding:5px;
border:1px solid #8b008b;
float:left;
}
Ahora solo queda agregar la ruta exacta de nuestro css en la cabecera de nuestra pagina html y luego asignarel el id "miPrimerMenuCSS" a la etiqueta ul y listo.
<html>
<head>
<title>Mi Primer Menu con CSS</title>
<link href="miPrimerMenuCSS.css" media="screen" rel="StyleSheet" type="text/css">
</head>
<body>
<ul id = "miPrimerMenuCSS">
<li><a href="#">uno</a></li>
<li><a href="#">dos</a></li>
<li><a href="#">tres</a></li>
</ul>
</body>
</html>
Dando como resultado final la siguiente imagen:
...
Solo queda decirles que hagan la prueba copien y peguen cada codigo en una carpeta de su agrado Espero les guste. Si les quedan dudas acerca del funcionamiento y de que significa cada cosa en las reglas CSS y demás porfavor Comentenlas!.
Espero les sirva.
0 comentarios:
Publicar un comentario