banner
hace 4 años
973 Views

Crear Menú Html5 y Css3

Autor:
banner

 
 
Hoy crearemos un Menú Html5 y Css3, fácilmente. El menú sera horizontal con buscador incluido. Este menú lo realizo mediante los nuevos estándares de Html5.
 

Para ello en vez de usar una lista <ul><li>, utilizaremos las nuevas etiquetas de Html5. Como son <nav> y <menu>. Estos elementos los explicaremos mejor en la sección Html5.

 

Bueno sin mas preámbulos empecemos con el ejercicio.

 

Como siempre empezaremos con el código html, en el definiremos el menú en si. Para ello cabe recordar que es un menú con los estándares de Html5, por ello el menú estará dentro de la sección <header>, como ya explicamos en el articulo estructuras Html5 de la sección Html5.

 

Una vez mencionado esto, vamos al código:



<nav id="botonera-2">
<menu>Home</menu>
<menu>Nosotros</menu>
<menu>Servicios</menu>
<menu>Contacto</menu>
<menu>Localizacion</menu>
<menu>Galeria</menu>
<input placeholder="Buscar... " type="search" name="buscar" id="buscar"/>
<input type="submit" value="Buscar" id="submit" />
</nav>

 

Como podemos ver, esta nueva manera de crear menús utiliza los nuevos estándares de Html5, como es la etiqueta <nav> que representa o agrupa los elementos del menú, y la etiqueta <menu> que representaría los elementos del menú.
 
Una vez explicado estas nuevas etiquetas insertaríamos un elementos típico de los formularios, el <input>; mediante esta etiqueta podemos realizar; la caja de texto a buscar y el botón que acciona la búsqueda. Para ello definiremos el tipo de <input> con el atributo “type”, a la caja le pondremos type=”search” y al botón type=”submit”.
 
Con esto tendríamos realizado la base de nuestro menú html5. No obstante le añadimos atributos de “name” y “id” para mas adelante poder añadirles estilos Css o alguna función PHP, etc…
 
Pasamos a el código Css:


#botonera{
position: relative;
top: 100px;
left: 23%; }
#botonera-2{
border-radius: 3px;
width: 50%;
height: 40px;
margin: 0px;
background: #ffbfbf; /* Old browsers */
background: -moz-linear-gradient(top, #ffbfbf 0%, #bc4949 56%, #ea7070 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbfbf), color- &nbsp; &nbsp; &nbsp; stop(56%,#bc4949), color-stop(100%,#ea7070)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #ffbfbf 0%,#bc4949 56%,#ea7070 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #ffbfbf 0%,#bc4949 56%,#ea7070 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffbfbf 0%,#bc4949 56%,#ea7070 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffbfbf 0%,#bc4949 56%,#ea7070 100%); /* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffbfbf', endColorstr='#ea7070',GradientType=0 ); /* IE6-9 */
}
menu{
display: inline-block;
width: 80px;
text-align: center;
margin: 0px auto;
background: none;
color: #FFF;
font: bold;
padding:10px;
}
menu:hover{
background: -moz-linear-gradient(#FFF 0%, #C4C4C4 100%);
background: linear-gradient(#FFF 0%, #DEDEDE 100%);
background: -ms-linear-gradient(#FFF 0%, #DEDEDE 100%);
background: -o-linear-gradient(#FFF 0%, #DEDEDE 100%);
background: -webkit-linear-gradient(#FFF 0%, #DEDEDE 100%);
opacity: 0.6;
-moz-opacity: 0.6;
-o-opacity: 0.6;
-webkit-opacity: 0.6;
-ms-opacity: 0.6;
border-radius: 5px;
color: red;
box-shadow: 0 0 20px #990000;
-moz-box-shadow: 0 0 20px #990000;
-ms-box-shadow: 0 0 20px #990000;
-o-box-shadow: 0 0 20px #990000;
-webkit-box-shadow: 0 0 20px #990000;
}

#buscar{
background: #fff;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
color: #999;
padding: 6px;
width: 150px;
position: relative;
display: inline-block;
margin-left: 700px;
margin-top: -36px;
vertical-align: top;
}
#buscar:focus{
box-shadow: 0 0 20px #990000;
-moz-box-shadow: 0 0 20px #990000;
-ms-box-shadow: 0 0 20px #990000;
-o-box-shadow: 0 0 20px #990000;
-webkit-box-shadow: 0 0 20px #990000;
text-decoration: none;
}
#submit{

padding: 5px;
width: 65px;
height: 30px;
margin-top: -35px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
display: inline-block;
position: absolute;
left: 45%;
border: 0px;

background: rgb(244,244,244); /* Old browsers */

background: -moz-linear-gradient(top, rgba(244,244,244,1) 0%, rgba(229,229,229,1) 47%, rgba(155,155,155,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(47%,rgba(229,229,229,1)), color-stop(100%,rgba(155,155,155,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(229,229,229,1) 47%,rgba(155,155,155,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(229,229,229,1) 47%,rgba(155,155,155,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(229,229,229,1) 47%,rgba(155,155,155,1) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(229,229,229,1) 47%,rgba(155,155,155,1) 100%); /* W3C */

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#9b9b9b',GradientType=0 ); /* IE6-9 */
vertical-align: top;
}
#submit:hover{
background: rgb(155,155,155); /* Old browsers */
background: -moz-linear-gradient(top, rgba(155,155,155,1) 0%, rgba(229,229,229,1) 53%, rgba(244,244,244,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(155,155,155,1)), color-stop(53%,rgba(229,229,229,1)), color-stop(100%,rgba(244,244,244,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(155,155,155,1) 0%,rgba(229,229,229,1) 53%,rgba(244,244,244,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(155,155,155,1) 0%,rgba(229,229,229,1) 53%,rgba(244,244,244,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(155,155,155,1) 0%,rgba(229,229,229,1) 53%,rgba(244,244,244,1) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(155,155,155,1) 0%,rgba(229,229,229,1) 53%,rgba(244,244,244,1) 100%); /* W3C */

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#9b9b9b', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
}

Bueno como podemos ver no utilizo nada raro, solamente me limito a darle unas dimensiones al menú, con un fondo degradado y sombreado, utilizo bordes y distinto degradado cuando se activa el botón.
 
Para aplicar estos estilos simplemente ponemos el atributo “name” o “id” seguido de {…} y dentro los estilos correspondientes.
 

Una vez explicado esto, solo os queda practicar, ya que con la practica realizareis diseños Css mas dinámicoselaborados

 

A practicar !!!

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Desarrollo Web · Html5
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon