Menús web solo con html y css
Pondremos tres ejemplos de menús web uno horizontal y dos verticales, veremos primero la parte más simple y que es igual en todos los menús que es un lista en html, nuestro ejemplo tiene tres campos, pero podrás agregar o quitar fácilmente los campos que necesites.
Este es el código de la lista en html, aquí es donde están los nombres y direcciones de las páginas de destino del menú, esto no difiere en los menús horizontales o verticales.
....................
<ul>
<li><a href="http://yohagoweb.blogspot.com">YoHagoWeb</a></li>
<li><a href="http://webmasters-principiantes.blogspot.com">Bar</a></li>
<li><a href="http://www.aassaapp.com/yohagoweb/fcyhw1.php">Contactar</a></li>
</ul>
....................
En este color la url de destino, En este color el nombre de la página de destino.
Este es un ejemplo de lista para menú de tres botones para agregar mas botones solo tiens que agregar mas lines como esta:
<li><a href="http://yohagoweb.blogspot.com">YoHagoWeb</a></li>
Ahora veremos en primer ejemplo completo para menú horizontal.
.....................
<style type="text/css">
<!--
#menu {
font-family: Arial; /* Este es el tipode letra como en todos los campos del css si eliminas esta linea funcionara con el css de tu sitio*/
font-size: 1em; /* aquí el tamaño de la tipografía */
}
#menu li {
float: left; /* Indicamos que la posición de 'li' sea adjunte siempre a la izquierda */
list-style-type: none; /* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */
}
#menu ul {
margin: 0; /* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */
padding: 0;
}
#menu a {
display: block;
text-decoration: none;
color: #881100; /* Fondo */
background: #ccc;
padding: 3px 10px 3px 10px; /* ubicaion del texto dentro del recuadro */
text-align: center;
border: 1px solid #6643ff; /* El color del recuadro */
border-width: 1px 1px 1px 0; /* Pintamos las lineas de todos los lados, excepto el izquierdo */
}
/* El primer recuadro, no tiene la linea izquierda. Aqui se la colocamos */
#menu a#primero {
border: 1px solid #6643ff;
}
#menu a:hover { /* Al pasar el ratón */
display: block;
text-decoration: none;
color: #ccc;
background: #881100;
padding: 3px 10px 3px 10px;
text-align: center;
border: 1px solid #6643ff;
/* Pintamos las lineas de todos los lados, excepto el izquierdo */
border-width: 1px 1px 1px 0;
}
-->
</style>
<div id="menu">
<ul>
<li><a href="http://yohagoweb.blogspot.com">YoHagoWeb</a></li>
<li><a href="http://webmasters-principiantes.blogspot.com">Bar</a></li>
<li><a href="http://www.aassaapp.com/yohagoweb/fcyhw1.php">Contactar</a></li>
</ul>
</div>
....................
El código anterior nos da el siguiente menú:
....................
....................
Menú vertical donde los botones se adaptan a el largo del texto:
<style type="text/css">
<!--
#menuvert2 {
font-family: Arial;
font-size: 1em;
}
#menuvert2 li {
/* Indicamos que la posición de 'li' sea adjunte siempre a la izquierda */
float: left;
/* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */
list-style-type: none;
}
/* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */
#menuvert2 ul {
margin: 0;
padding: 0;
width: 120px;
}
#menuvert2 a {
display: block;
text-decoration: none;
color: #881100;
background: #ccc;
padding: 3px 10px 3px 10px;
text-align: center;
border: 1px solid #6643ff;
/* Pintamos las lineas de todos los lados, excepto el izquierdo */
border-width: 1px 1px 1px 0;
}
/* El primer recuadro, no tiene la linea izquierda. Aqui se la colocamos */
#menu a#primero {
border: 1px solid #6643ff;
}
#menuvert2 a:hover {
display: block;
text-decoration: none;
color: #ccc;
background: #881100;
padding: 3px 10px 3px 10px;
text-align: center;
border: 1px solid #6643ff;
/* Pintamos las lineas de todos los lados, excepto el izquierdo */
border-width: 1px 1px 1px 0;
}
-->
</style>
<div id="menuvert2">
<ul>
<li><a href="http://yohagoweb.blogspot.com">YoHagoWeb</a></li>
<li><a href="http://webmasters-principiantes.blogspot.com">Bar</a></li>
<li><a href="http://www.aassaapp.com/yohagoweb/fcyhw1.php">Contactar</a></li>
</ul>
</div>
...................
..................
Menú vertical con todos los botones del mismo ancho.
<style type="text/css">
<!--
#menu2 ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
font-family: Arial;
font-size: 1em;
}
#menu2 ul li {
background-color: #ccc;
}
#menu2 ul li a {
color: #881100;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 10px 10px 10px 20px;
text-align: center;
border: 1px solid #6643ff;
}
#menu2 ul li a:hover {
color: #ccc;
background: #881100;
border-left: 10px solid #333;
color: #fff;
}
-->
</style>
<div id="menu2">
<ul>
<li><a href="http://yohagoweb.blogspot.com">YoHagoWeb</a></li>
<li><a href="http://webmasters-principiantes.blogspot.com">Bar</a></li>
<li><a href="http://www.aassaapp.com/yohagoweb/fcyhw1.php">Contactar</a></li>
</ul>
</div>
...................
.................