En este post vamos a crear un menú horizontal en el que los botones sean circulares y tengan algún efecto. Para tal caso usaremos HTML 5 y CSS 3.
El código del html es muy corto, sólo usaremos el siguiente:
<nav><ul class="circulos"> <li><a href="http://www.google.com"><span>Google</span></a></li> <li><a href="#"><span>Informacion</span></a></li> <li><a href="#"><span>Servicios</span></a></li> <li><a href="#"><span>Contacto</span></a></li> </ul></nav>
Hasta aquí en la página sólo aparecerá una lista de links vertical, lo interesante es aplicar la hoja de estilos, la dividiremos en algunas partes:
ul.circulos {
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font: bold 14px arial;
}
ul.circulos li {
display: inline;
margin: 0;
padding: 0;
}
Aquí definimos la clase círculos con la etiqueta <ul> y le damos un tamaño de ancho del 100% de la página. Un margen del 20% y una alineación centrada. Lógicamente todo esto se puede modificar, el ancho puede ser de 600px si quieren, la alineación puede ser a la derecha o izquierda, todo eso se puede modificar sabiendo un poco de inglés o usando el autocompletador de Dreamweaver.
Luego se define otra vez la clase círculos pero ahora con la etiqueta <ul> y <li>, Aquí es donde se aplica el efecto para que el menú se vea horizontal, con display:inline; la lista aparece lineal.
Ahora, definimos la etiqueta <a>
ul.circulos li a {
display: inline-block;
text-decoration: none;
color:#060;
background:#999;
padding: 5px;
width:120px;
height:120px;
-o-border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-ms-border-radius: 200px;
border-radius: 200px;
}
Aquí es obvio lo que significa cada línea, solo podemos recalcar que aquí es donde se establece el tamaño de los botones con wisth y height. Como el propósito es hacer botones circulares, entonces los dos tamaños deben ser iguales.
Para dar el efecto circular, usamos border-radious, aplicando un 200px; se redondea todo el borde, en el código tenemos la opción para el navegador mozilla, IE, y otros, para que sea compatible con más navegadores.
ul.circulos a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.circulos a:hover {
background:#00F;
}
En éstas últimas líneas de código, se define span y hover.
Hover sirve para el efecto al pasar el cursor sobre el botón, en este caso solo cambiará el color del fondo.
Aquí vuelvo a colocar los códigos completos, incluyendo el de todo el HTML para que lo prueben en su computadora, aunque es obvio, guarden el html con extensión .html y el CSS con extensión .css
Código HTML:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Empezando con html5</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <header> <h1>Creando menú circular</h1>
<h2>Tutorial creado por Masterhacks</h2> </header> <nav><ul class="circulos"> <li><a href="http://www.google.com"><span>Google</span></a></li> <li><a href="#"><span>Informacion</span></a></li> <li><a href="#"><span>Servicios</span></a></li> <li><a href="#"><span>Contacto</span></a></li> </ul></nav> <br /> <br /> <section> <article>Aquí podemos poner cualquier texto</article> </section> <br /> <aside>Texto no importante</aside> <br /> <br /> <footer>Derechos reservados</footer> </body> </html>
Código CSS:
@charset "utf-8"; /* CSS Document */
ul.circulos {
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font: bold 14px arial;
}
ul.circulos li {
display: inline;
margin: 0;
padding: 0;
}
ul.circulos li a {
display: inline-block;
text-decoration: none;
color:#060;
background:#999;
padding: 5px;
width:120px;
height:120px;
-o-border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-ms-border-radius: 200px;
border-radius: 200px;
}
ul.circulos a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.circulos a:hover {
background:#00F;
}
