A petición de un usuario subimos este tutorial de cómo realizar un menú sencillo con HTML5 y CSS3 utilizando degradados, sombras, transiciones y bordes redondeados, lo subimos algo tarde pero ¡mas vale tarde que nunca!.
Estructura básica del menú en HTML
En HTML5 tenemos una etiqueta de navegación para nuestro documento “NAV” dentro de NAV podemos incluir enlaces, listas o cualquier cosa para navegación del sitio, pero nosotros vamos utilizar listas que son mas fáciles de utilizar.
<nav> <ul> <li><a title="Opcion 1" href="#">Opción 1</a></li> <li><a title="Opcion 2" href="#">Opción 2</a></li> <li><a title="Opcion 3" href="#">Opción 3</a></li> <li><a title="Opcion 4" href="#">Opción 4</a></li> <li><a title="Opcion 5" href="#">Opción 5</a></li> </ul> </nav>
Cada elemento de la lista será un enlace, con esto podremos manejar como se nos antoje los enlaces, con CSS3 vamos a darle el estilo magnifico que nos proporciona.
Aplicando estilos con CSS3 al menú de navegación
Vamos a darle estilos básicos a nuestro menú para empezar a darle código CSS3. Primero a darle un fondo al cuerpo:
body{
background:#3CF;
}
A la etiqueta NAV le damos borde redondeado con un radio de 10px , degradado de blanco a gris, padding de 10px y un ancho de 950px.
nav{
/*Bordes redondeados*/
-webkit-border-radius:10px;/*Para chrome y Safari*/
-moz-border-radius:10px;/*Para Firefox*/
-o-border-radius:10px;/*Para Opera*/
border-radius:10px;/*El estandar por defecto*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/
/*Degradados*/
background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/
background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/
background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
overflow:hidden;
padding:10px;
width:950px;
}
Nota: Aun CSS3 no esta terminado por lo cual utilizamos las extensiones propietarias para cada navegador.
Recordemos que NAV es un contenedor para la lista, así que ahora pasamos a dar estilo a la etiqueta de UL que contiene las listas, vamos a anular el estilo de lista, darle márgenes laterales de 10px y anular el padding.
nav ul{
list-style:none;
margin:0 10px 0 10px;
padding:0;
}
Ahora a los elementos de la lista LI hacemos que floten a la izquierda para una vista horizontal y le damos un margen derecho de 10px para darle separación con bordes redondeados de 5px de radio, tipo de fuente, tamaño de 16px, centrado y sombras para el texto.
nav ul li{
/*Bordes redondeados*/
-webkit-border-radius:5px;/*Chrome y Safari*/
-moz-border-radius:5px;/*Firefox*/
-o-border-radius:5px;/*Opera*/
border-radius:5px;/*Estandar por defecto*/
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:10px;
text-align:center;
/*Sombras para texto, los mismos parametros que box-shadow*/
text-shadow: 0px 1px 0px #FFF;
}
Al pasar el puntero sobre el elemento LI se activara el evento HOVER cambiando el fondo de este. En los degradados tenemos diferentes maneras de aplicarlo para cada navegador, en este caso para el estándar por defecto, Opera y Firefox es igual, para Chrome y Safari es diferente pero con las mismas propiedades. De tipo linear, empezamos por la parte alta hacia debajo de blanco a gris claro, con la sombra tenemos los parámetros eje X, eje Y, enfoque y color.
nav ul li:hover{
/*Degradado de fondo*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
/*Sombras*/
-webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/
-moz-box-shadow: 1px -1px 0px #999;/*Firefox*/
-o-box-shadow: 1px -1px 0px #999;/*Opera*/
box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/
border:1px solid #E3E3E3;
}
Cada elemento LI es también un contenedor, en este caso de enlaces, a estos enlaces le daremos color gris y que sean bloques con padding de 10px, quitaremos la decoración de los enlaces. Las transiciones en CSS3 tienen diferentes parámetros, esta vez utilizamos el tiempo de 0.4 segundos, el efecto linear y aplicable a todas las propiedades básicas, ancho , color, margen, etc.
nav ul li a{
color:#999;
display:block;
padding:10px;
text-decoration:none;
/*Transiciones*/
-webkit-transition: 0.4s linear all;
-moz-transition: 0.4s linear all;
-o-transition: 0.4s linear all;
transition: 0.4s linear all;
}
La transición esta vez se activara al pasar el puntero, el evento HOVER de CSS que cambiara de color gris el texto a negro, esto es sobre la etiqueta A de enlace.
nav ul li a:hover {
color:#000;
}
Para ver el ejemplo
y cuales hacks me recomiendan para que las versiones de IE puedan reconocer etiquetas html5?
Hola que tal, existen muchas maneras de hacerlo, una que utilizamos es, Modernizr una libreria de Javascript que se incluye en tu sitio web y list o con HTML5 Enabling Script que funciona igual.
Hola me parece interesante solo que hay que revisar la compatibilidad con los navegadores viejitos, este es el mayor problema de html5 y css3.
Actualmente es imposible hacer un sitio con estas caracteristicas de html5 y css3, que sea crossbrowser y que sea css valido, sin embargo se puede revisar las poblicaciones de los navegadores para ver la definición y atravez de esto hacerlo lo mas compatible posible(en ocaciones se utilizan hacks css, como para el IE6< en su manejo de cajas), por ejemplo en el caso de los gradientes del codigo:
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/ /*Degradados*/ background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/ background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/ background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/Quedaria mejor si le add compatibilidad con navegadores viejitos:
/* definicion de un gradiente(vertical) crossbrowser */ background: #FFFFFF; /* 1ro un color de fondo fijo */ background-repeat: repeat-x; /* imagen repeat en x, el gradiente sera vertical */ /* para el caso de las implementacion motor webkit webkit(konqueror, arora, safari) */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC)); background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC); /* mozilla firefox y compatibles con el motor gecko */ background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC); /* opera */ background-image: -o-linear-gradient(top, #FFFFFF, #CCCCCC); /* microchaft IE */ background-image: -ms-linear-gradient(top, #FFFFFF, #CCCCCC); /* microchaft IE<7(No estoy seguro de la ver, pero es antiguos), revisar q el gradiente es del tipo 0 lo cual indica q sera vertical, del tipo 1 es horizontal */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0 ); /* CSS3 revisar borrador w3c */ background-image: linear-gradient(top, #FFFFFF, #CCCCCC);Es un poco mas largo el código pero mas amigable/compatible con los navegadores.
Saludos y chido post!!
Claro, por ahora existe el uso de las extensiones propietarias para CSS y filtros o Hacks, pero tenemos herramientas o librerías que ayudan como Modernizr o HTML5 Shiv, entre muchas mas, es cuestión de ver cual prefieren, pero el uso de HTML5 y CSS3 lo deben de hacer desde ya, IE6 esta muerto y 7 empieza a agonizar.
Sí aveces pasamos mucho tiempo dando soporte a antiguos navegadores y nos olvidamos de los de las nuevas tendencias como por ejemplo dar soporte a dispositivos moviles.
Sugiero mucho dar soporte a navegadores antiguos en función de sus estadísticas de visitas, si es un porcentaje insignificante para IE6 o 7, no vale la pena el esfuerzo.
Veo que el menú de la pagina HTML5 (no del ejemplo) recarga todo el contenido cuando seleccionas algún elemento, existe forma de cargar la pagina usando un div contenedor con CSS3 o java cual en tu opinión seria mas rápido
Es algo que no aconsejo mucho tranadose de un sitio web de contenido, si hablamos de aplicaciones yo usaria JQuery y Ajax ya que al hacer click en una opción enviamos una petición al servidor y con Ajax actualizamos el contenido de un div con los datos de respuesta que nos regresa el servidor, que en este caso seria el contenido del sitio web, CSS3 recuerda que es para estilos.
Estimados, todo eso, lo del css y lo de HTML lo pongo todo dentro del mismo archivo? Soy un novato, gracias!
Hola Ignacio, el CSS puede ir de 2 maneras, en el mismo archivo lo pones dentro de las etiquetas
o en un archivo CSS separado y en el archivo html u otro tipo pones el .
Hola ! jo si ese es un tutorial basico, como seria hacer algo complicado con Html5 ?? :s vaya creo que mi ilusion de aprender Html5 ya se esfumo !! porque eso parece tan complicado ! claro lo digo por mi al que el Css parece el fantasma del opera !! 🙁
Hola, no te desanimes, en realidad no es nada complicado, es cuestión de que practiques, después de todo te emocionaras, animo.
He estado viendo todos los tutoriales de esta web meparecen muy buenos, y me gustaria preguntar cual es la forma de conectarme con una base de datos en html5 para obtener contenido; sera atraves de javascrip ( node js )? , o es nesesario usar un lenguaje como php o jsp (imprimiendo las etiquetas de html5). de ser php u jsp cual es mejor . Gracias.
HTML5 no tiene manera de conectarse a la base de datos, recuerda que eso lo hace un lenguaje del lado del servidor (PHP, Node.JS, Ruby, Python, entre otros) y esta puede ser MySQL, Mongo DB, Maria DB, Oracle entre otros gestores, HTML5 es el simple maquetado de tu sitio con etiquetas.
Gracias por la respuesta. de ser php o jsp cual me recomiendas.
Si apenas vas a aprender un lenguaje del lado del servidor, Python o Ruby, si ya conoces PHP basico o lo dominas, pues usa PHP, aun que Python o Ruby ultimamente son los favoritos por ser los nuevos y existen menos desarrolladores en estos.
Hola, muy buen articulo, podrías despejarme una duda en cuanto a compartir este menú en las 20 paginas de mi sitio web, ya que seria muy tedioso crear el menú en cada una de mis paginas.. gracias antemano
Bueno, ese no es problema, esto regularmente se hace en base a plantillas para tu sitio, donde el header es cargado del lado del servidor y en este header esta el menu solo 1 vez escrito.
Cuando tenemos una web ya con este menú terminado… ¿Cómo podemos hacer para que ahora cada elemento html se cargue sin tener que hacer copias del contenido para cada html?
No sé si me explico pero no encuentro nada por internet y no sé si podrás ayudarme. Por ejemplo esta web cuando pinchas en Tutoriales se vuelve a cargar la página pero está claro que no has tenido que copiar cada menú y sección para que al pulsar ahí vuelva a aparecer esto. ¿Podrías hacer algún mini tutorial con esto? Se que es algo como que se crea un esqueleto del html y dentro alguna etiqueta que enlace el contenido de cada sección pero no se como se hace.