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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.
corrígeme pero en el titulo del articulo no pones que SIN css????
ResponderEliminarEso decia, como se hace un menu Horizontal sin css???
ResponderEliminar