Ago 04
Menu deslizable
Este es un efecto de sombra exelente de un menu sencillo hecho con javascript y las librerias del JQuery, en donde logramos un efecto de movimiento de una sobra para enfocar una sección.
Paso 1: El HTML
Dado que la mayoría de los desarrolladores creen que la interfaz de usuario una lista desordenada (ul) representa la correcta estructura semántica de un menú / barra Navbar, vamos a comenzar por escribir precisamente eso.
1 2 3 4 5 6 | <ul class="lavaLamp"> <li><a href="#">Home</a></li> <li> <a href="#"> Inicio </ a> </ li> <li><a href="#">Plant a tree</a></li> <li> <a href="#"> Planta un árbol </ a> </ li> <li><a href="#">Travel</a></li> <li> <a href="#"> Viajes </ a> </ li> <li><a href="#">Ride an elephant</a></li> <li> <a href="#"> paseo un elefante </ a> </ li> </ul> </ ul> |
Paso 2 : El Css
Puede esta css de muchas maneras diferentes lograr su propio menú personalizado. La siguiente hoja de estilo no es más que una posibilidad.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | / * Estilos para la totalidad del menú LavaLamp * /
.lavaLamp { . lavaLamp (
position: relative; posición: pariente;
height: 29px; width: 421px; altura: 29px; ancho: 421px;
background: url("../image/bg.gif") no-repeat top; fondo: url ("../ imagen / bg.gif ") no-repeat top;
padding: 15px; margin: 10px 0; padding: 15px; margin: 10px 0;
overflow: hidden; desbordamiento: oculto;
} )
/* Force the list to flow horizontally */ / * Fuerza de la lista para el flujo horizontal * /
.lavaLamp li { . lavaLamp li (
float: left; flotador: izquierda;
list-style: none; lista de estilo: ninguno;
} )
/* Represents the background of the highlighted menu-item. / * Representa el fondo del menú resaltado. */ * /
.lavaLamp li.back { . lavaLamp li.back (
background: url("../image/lava.gif") no-repeat right -30px; fondo: url ("../ imagen / lava.gif ") no se repita la derecha 30px;
width: 9px; height: 30px; anchura: 9PX; altura: 30px;
z-index: 8; z-index: 8;
position: absolute; position: absolute;
} )
.lavaLamp li.back .left { . lavaLamp li.back. izquierda (
background: url("../image/lava.gif") no-repeat top left; fondo: url ("../ imagen / lava.gif ") de no repetir parte superior izquierda;
height: 30px; altura: 30px;
margin-right: 9px; margen derecha: 9PX;
} )
/* Styles for each menu-item. / * Estilos para cada menú. */ * /
.lavaLamp li a { . lavaLamp una li (
position: relative; overflow: hidden; posición: pariente; desbordamiento: oculto;
text-decoration: none; text-decoration: none;
text-transform: uppercase; texto-transformar: mayúsculas;
font: bold 14px arial; font: 14px Arial negrita;
color: #fff; outline: none; color: # fff; esbozo: ninguno;
text-align: center; alinear texto: centro;
height: 30px; top: 7px; altura: 30px; arriba: 7px;
z-index: 10; letter-spacing: 0; z-index: 10; carta de espaciamiento: 0;
float: left; display: block; flotador: izquierda; pantalla: bloque;
margin: auto 10px; margin: 10px auto;
} ) |
Paso 3: El Javascript
Este JavaScript lo colocaras en el Head
1 2 3 4 5 6 7 8 | <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.js"> </ script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"> </ script> <!-- Optional --> <! - Opcional -> <script type="text/javascript" src="path/to/jquery.easing.js"></script> <script type="text/javascript" src="path/to/jquery.easing.js"> </ script> <script type="text/javascript"> <script type="text/javascript"> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); $ (function () ($ ( ". lavaLamp"). lavaLamp ((fx: "backout", velocidad: 700 })}); </script> </ script> |
y listo tenemos nuestro menu en css.
Para descargar:
Librerias JQuery
Plugin Facil
LavaLamp Plugin
Compartir
