Como crea un menú horizontal y vertical sin css
En primer lugar hay que crear un menú HTML usando la lista desordenada:
|
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
|
Luego hay que crear un nuevo fichero CSS y adjuntarlo a la página HTML:
|
<link href="style.css" rel="stylesheet" type="text/css" />
|
También puede utilizar los estilos en línea (inline).
|
<style type="text/css">
...here goes your CSS styles...
</style>
|
Como resultado debe obtener el siguiente código HTML:
|
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</body>
</html>
|
La lista desordenada tiene sus propios estilos, así que sin los cambios adicionales obtiene un menú vertical.
Para obtener el menú horizontal es necesario hacer algunos cambios en HTML y CSS.
En primer lugar hay que añadir un nuevo clase a la lista, reemplace <ul> con <ul class="horizontal">
Ahora en el fichero CSS vamos a crear el menú horizontal. La lista desordenada tiene valores de margen y relleno (margin and padding) asignados por defecto. Tenemos que limpiar ellos:
|
ul.horizontal{
margin:0;
padding:0;
}
|
Luego haga los cambios para que sus elementos de la lista se muestren de manera horizontal:
ul.horizontal li{
display:block;
float:left;
padding:0 10px;
}
|
Hemos añadido el valor de relleno horizontal (padding) a los elementos de la lista para que luego no se peguen unas a otras. Ahora su menú está listo, asigne enlaces, añada un poco de colores y fondo y ya.
