Menú con JQuery y CSS
Por: el 17/julio/2010 Cat. Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 CSS, JQuery
¿Echas de menos Flash? Los efectos que se logran con este programa son irremplazables, pero ha habido que ceder un poco a favor de la funcionalidad e interactividad de la Web. En cualquier caso Flash también es código, asà que para conseguir algunos movimientos útiles también nos podemos ayudar de JavaScript, en este caso de la librerÃa JQuery.
Ejemplo 1: Menú con Desplazamiento Horizontal
HTML
Un div contenedor (#menu_hor) y otros tantos div(#menu1, #menu2 y #menu3) como elementos de menú se quiera.
CSS
Es importante que el div contenedor (#menu_hor) tenga asignada una posición relativa, de esa manera al asignarle una posición absoluta a los tres menus interiores, su posición será con respecto a este div. Otra propiedad importante sera que el desbordamiento sea oculto, para que únicamente muestre aquella parte de las imagenes que nos interesa. Sus medidas dependeran de las imagenes que se utilicen.
Para los elementos del menú, la clase que apliquemos servirá de referenencia para ejecutar los cambios con javascript. Aquà lo importante es su posicionamiento, que debe ser absoluto, y su ubicación dentro del contenedor, que dependerá de cada elemento: left:0px, left:40px y left:80px. De esa forma se muestran las leyendas situadas en el extremo izquierdo.
JQuery
La clase JavaScript necesaria para conseguir este efecto es .animate(), su sintaxis es la siguiente:
.animate( properties, [ duration ], [ easing ], [ callback ] )
y la función clave serÃa la siguiente:
$(document).ready(function(){
/* menu1 */
$("#menu1").mouseover(function(){
$(".bloque2").animate({"left": "440px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});
});
- En primer lugar nos auxiliamos de un gestor de eventos ( mouseover) que se ha asignado al div #menu1, que desencadena el resto de acciones
- La función clave, a la que se le pasan dos parámetros: la propiedad css de la capa que tiene asignada la clase bloque2 y el tiempo en el que se desea que se ejecute esta acción.
El resto del script, que puedes ver a continuación en la sección de código, es una variación de esta primera parte, combinándola como se desee que ocurran las transiciones en el resto de elementos del menú.
Ver Código(+/-)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://www.pcpolis.es/blog/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
/* menu1 */
$("#menu1").mouseover(function(){
$(".bloque2").animate({"left": "440px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});
/* menu2 */
$("#menu2").mouseover(function(){
$(".bloque2").animate({"left": "40px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});
/* menu3 */
$("#menu3").mouseover(function(){
$(".bloque3").animate({"left": "80px"}, "slow");
$(".bloque2").animate({"left": "40px"}, "slow");
});
});
</script>
<style>
img {
border:none;
}
#contenedor {
width:520px;
background-color: #999999;
height:250px;
overflow:hidden;
position:relative;
}
.bloque1 {
background-color:#757C08;
left:0px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
.bloque2 {
background-color:#6F8C94;
left:440px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
.bloque3 {
background-color:#782748;
left:480px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
</style>
</head>
<body>
<div id="contenedor">
</div>
</body>
