lunes, 12 de noviembre de 2012

Crear un simple menú con CSS3 y HTML5

En esta entrada voy a mostrar como generar un simple pero vistoso menú utilizando únicamente código CSS3 y HTML5.

Para hacer este menú utilizo una lista y modifico su apariencia usando el CSS3, cabe destacar que para este ejemplo usé el CSS embebido en la misma página y no en un archivo aparte, esto para que puedas copiar y pegar el código, lo guardes como html y lo ejecutes en tu navegador para ver el resultado final. Bien, sin, más aquí les dejo  el código.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Menú vertical usando CSS3 y HTML5'</title>
<style type="text/css">
<!--
#menu {
border: 1px solid #6643ff;
/* Pintamos las lineas de todos los lados, excepto el inferior, ya que cada
'li' ya trae el borde inferior */
border-width: 1px 1px 0 1px;
/* Determina la anchura del menu */
width: 150px;
font-family: Arial;
font-size: 0.8em;
}
/* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
/* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */
list-style-type: none;
/* En cada li, pintamos la linea inferior */
border-bottom: 1px solid #6643ff;
}
#menu a {
display: block;
text-decoration: none;
color: #6643ff;
background: #f0edff;
padding: 3px 6px 3px 6px;
}
#menu a:hover {
background: #d6ccff;
}
-->
</style>
</head>
<body>
<h1 style="font-size:1em">Menu vertical con estilos utilizando 'ul' y 'li'</h1>
<div id="menu">
<ul>
<li><a href="#">Cursos</a></li>
<li><a href="#">Temas</a></li>
<li><a href="#">Codigo</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</div>
<br />
</body>
</html>

Esto es todo por ahora y nos leemos luego!!!!

No hay comentarios:

Publicar un comentario