En el tutorial de esta semana vamos a crear algo muy importante hoy en día para mantener estilizada y actualizada nuestra página web.
Por eso para esta ocasión estaremos creando un menú completamente en CSS3 y HTML5, algo simple pero funcional, así que veamos:
Código HTML:
Código CSS:
ul,li,a { margin:0; padding:0; } /*Para evitar que si nos descuadre los elementos en diferentes navegadores*/
ul.menu {
width: 960px; /*El ancho*/
height: auto; /*El alto , es auto para que se adapte a la altura de los li*/
padding: 10px 0 10px 0; /*El sintaxis del padding se define según las manillas del reloj:
////////////////////////////////////////
padding: arriba derecha abajo izquierda;
///////////////////////////////////////
*/
border:1px solid #333;
box-shadow: 0 3px 1px rgba(0,0,0,.5);
background: rgb(255,255,255); /* Navegadores antiguos*/
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
border-radius: 5px; /*Border redondeados*/
overflow: hidden; /*No mostrar los elementos que se exedan*/
}
ul.menu li {
list-style:none;
float:left;
border-radius: 5px;
height:auto;
margin: 0 10px 0 10px;
width:auto;
overflow: hidden;
position: relative;
text-align:center;
padding: 5px;
transition: background 500ms linear; /*Transición que durará¡ 500microSegundos y seguirá a la misma velocidad siempre [LINEAR]! */
-webkit-transition: background 500ms linear; /*PARA WEBKIT*/
-moz-transition: background 500ms linear; /*PARA MOZ*/
-o-transition: background 500ms linear; /*PARA OPERA*/
-ms-transition: background 500ms linear; /*MS Explorer*/
}
ul.menu li:hover {
background:rgba(0,0,0,.8);
}
ul.menu li:hover a {
color:white;
}
ul.menu li a {
color: #000;
text-decoration: none; /*No decorar el Texto*/
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(51,51,51,.5);
user-select:none; /*Evitar seleccionamiento del texto*/
-webkit-user-select:none;
-moz-user-select:none;
}
