Transiciones a Elementos, css navigation menu

Uno de los usos principales de las transiciones y efectos de CSS es en los elementos básicos de cualquier pagina de Intenet, las barras de menu, los iconos  y demás elementos.

Este es el codigo HTML para crear un css navigation menu

<nav>
		<ul role=navigation>
			<li><a href="index.html" accesskey=1 >Inicio</a></li>
			<li><a href="producto.html" acesskey=2 >Productos</a></li>
			<li><a href="contacto.html" acesskey=3 >Contacto</a></li>
		</ul>
	</nav>

 

El atributo accesskey especifica una tecla de acceso directo para activar / enfocar un elemento.

La primera vez que yo me tope con un menu y quería hacerlo horizontal tal como se ve en las paginas de internet, créanme que sufrí muchísimo, y  no quiero que les pase a ustedes, así que se los explicare como lo entendí,  lo explicare simplemente con una linea de CSS que convierte los elementos de la navegación LI en

nav li {display: inline;}

 

Si asi de fácil era, créanme que yo pase muchas horas buscando como hacerlo, claro esto fue hace mas de una decada.

Una barra de Navegación enchulada con CSS3

nav
Barra enchulada.

Intentaremos enchular una barra de navegación utilizando CSS,  poniendo en pacto lo que hemos visto en post anteriores, agregando sombras y efectos.

<style>
	nav{ background: url(images/fondo1.jpg) no-repeat; padding: 1em 0;}
	nav a{text-decoration: none; color: white; padding: 1em;
	font-family: Futura, Arial, sans-serif;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.6);}
	nav li {display: inline;}

</style>
<body>
	<nav>
		<ul role=navigation>
			<li><a href="index.html" accesskey=1 >Inicio</a></li>
			<li><a href="producto.html" acesskey=2 >Productos</a></li>
			<li><a href="contacto.html" acesskey=3 >Contacto</a></li>
		</ul>
	</nav>
</body>

Ahora que les parece si lo hacemos con un poco mas de transiciones para darle un toque un poco mas dinamico a nuestra barra de navegación.

Nav 1

 

Ahora buscaremos la forma de darle un efecto de que cada una de las pestañas que estamos viendo se vena unidas o mas bien a manera de pestañas de un archivo, una detrás de otra sin espacio, es lo logramos dandole un margen negativo a la izquierda, así como un efecto de selección con el mouseOver.

ul[role=navigation]{
		background: #000; padding-top: 3.2rem; padding-bottom: 1rem; overflow: hidden; margin-top: 0;
	}
	ul[role=navigation] li{
		display:inline; font-family: Futura, Arial, sans-serif; text-transform:uppercase; margin-left: -.5rem;
	}
	ul[role=navigation] li a{
		position: relative; top:0;
		transition: 0.2s all linear;
		text-decoration: none; color: #fff;
		padding: 0.8rem 1.2rem 2rem 1.2rem;
		border: 1px solid #777; border-radius: 5px 5px 0 0;
		background: linear-gradient(to bottom, #dcf891, #776c54);
		box-shadow: 0 0 15px rgba(0,0,0,0.5);
		letter-spacing: 0.15rem; text-shadow: 0 1px 0 #000;
	}
	ul[role=navigation] li a:hover, ul [role=navigation] li a:focus {
		top: -0.6em;
	}

Crear un boton con CSS con sus animaciones, y efectos cool.

<style>
.myButton {
	-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
	-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:17px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>

Este seria el Resultado

Boton

Volver arriba