Menú en HTML5 y CSS3

Menú en HTML5 y CSS3

Como decía antes en otro mini-tutorial de menú en html5 y css3 estos menú están cada vez más de moda ya que se están utilizando mas y mas por una inmensa cantidad de público en lo que es el desarrollo web, La verdad que el caso no es para menos Los menú en css3 son más elegantes y ligeros que los que podíamos hacer en versiones anteriores.

Ver el menu:
Menu en HTML5 y CSS3

En este sitio web también hemos tratado el tema creo que ampliamente por eso te recomiendo que le des un vistazo al  siguientes temas. Menú con HTML5 y CSS3
 

Este menú en html5 y css3 va a consistir en crear una barra de menú horizontal que lo podemos implementar en cualquier sitio web que queramos y por supuesto puedes hacerle las modificaciones que desees porque es creado por mi y es 100% libre para que le saques el máximo provecho.

Que necesito para crear un menú en HTML5 y CSS3

Simple para crear un menú en html5 y css3 lo que necesitas es un editor de código hasta el simple notepad de Windows te puede funcionar a la perfección y si encuentras que los términos usados aquí no lo entiendes entonces te remitimos al curso de HTML5 y CSS3 donde podrás aprender a manejar HTML5 y CSS3 de una forma fácil y rápida.

Es compatible este menú en HTML5 y CSS3 con el Internet Explorer.

Como te decía antes en otro tutorial de menú en html5 y css3 esta es una buena pregunta para los que no entienden bien el uso de estas nuevas tecnologías y son amante a este navegador. Lamento decirles que en versiones anteriores a Internet Explorer 9 este menú con html5 y css3 no va a poder ser visualizado, pero después lo podrás ver en todos los demás navegadores sin problemas.

Bueno ya me dejo de tanto blablabla y empezamos a crear nuestro Menú en HTML5 y CSS3 solo les voy a colocar el código del documento HTML5 y El código CSS3, Esta más que simple el código y entendible pero en caso que no entiendan algo solo tienen que hacerme sus preguntas o si necesitan alguna ayuda con un tema parecido o que tenga que ver como programación web saben que estoy aquí para ayudarle.
Index.html

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Menu en HTML5 y CSS3</title>
</head>
<body>
<header><h1>Menu en HTML5 y CSS3</header>
    <section>
        <menu>Link1</menu>
        <menu>Link2</menu>
        <menu>Link3</menu>
        <menu>Link4</menu>
        <menu>Link5</menu>
    </section>
</body>
</html>

Ahora vamos a colocar el archivo CSS3 que contiene el código que mordeara el código HTML5 para darle la apariencia que nosotros queramos.
Style.css

<style>
*{margin:0px;padding:0px;}
header{
text-align:center;
width:90%; 
}
section{
width:80%;
min-height:30px;
margin:10px auto;
border:solid 1px #DADADA;
border-radius:3px;
padding:0px;
background:#DADADA; 
background:-moz-linear-gradient(#dadada 0%, #fff 100%);
background:-webkit-linear-gradient(#CCC 0%, #fff 100%);
background:-ms-linear-gradient(#CCC 0%, #fff 100%);
background:-o-linear-gradient(#CCC 0%, #fff 100%);
}
menu{
display:inline-block; 
background:#dadada;
margin:0px;
width:10%;
color:#666;
text-align:center;
padding:10px;
cursor:pointer;
background:-moz-linear-gradient(#dadada 0%, #fff 100%);
background:-webkit-linear-gradient(#CCC 0%, #fff 100%);
background:-ms-linear-gradient(#CCC 0%, #fff 100%);
background:-o-linear-gradient(#CCC 0%, #fff 100%);
border-right:solid 1px #dadada;
}
menu:hover{
 background:#dadada;
 background:-moz-linear-gradient(#d2d2d2 0%, #f6f6f6 100%);
 background:-webkit-linear-gradient(#d2d2d2 0%, #f6f6f6 100%);
 background:-ms-linear-gradient(#d2d2d2 0%, #f6f6f6 100%);
 background:-o-linear-gradient(#d2d2d2 0%, #f6f6f6 100%);
 border-left:solid 1px #dadada;
 border-right:solid 1px #dadada;
 color:#06F;
 text-shadow:0 0 15px #fff;
 }
</style>

Bueno amigos eso es todo, como les mencione antes modifíquenlo cámbienle el color el degradado en fin modifíquenlo a su gusto que no hay ningún problema y si necesitan ayuda o alguna consulta sobre programación web recuerden que aquí estoy para ayudarle.

Ver el menu:
Menu en HTML5 y CSS3

Un cordial saludo y hasta una próxima entrada…

 

menú en html5,menú con html5,menú en html5,menú con html5,

Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada.