Categories

Plantillas Destacadas

HTML/CSS. ¿Cómo crear menú vertical y horizontal?

Chris Diaz marzo 13, 2020
Rating: 4.1. From 20 votes.
Please wait...

Este tutorial le ayudará a crear un menú vertical y horizontal en HTML usando estilos CSS. Antes de continuar asegúrese de que Usted sabe las etiquetas HTML de la lista desordenada.Además, por favor consulte el tutorial ¿cómo crear un menú en HTML?.

Ok, 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" />

Asegúrese de poner el código CSS en la etiqueta <head> de su página html.

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">
<html xmlns="http://www.w3.org/1999/xhtml">

<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.

Esta entrada fue publicada el Trabajar con CSS y etiquetada css, HTML, list, menu. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket

  • dhonthi samko

    but great post this is

    No votes yet.
    Please wait...