Tengo una web http://www.loftdelborn.es/bienvenido.php con un menú que se activa mediante el siguiente código JavaScript:
<script type="text/javascript"> $(document).ready(function() { $('#header a:first').hover(function() { $(".submenu").fadeOut(700) }).bind("click", function() { $("#filosofia").fadeIn(700).siblings(".conta").hide(); }); $('#header a:eq(1)').hover(function() { $(".submenu").fadeOut(700) }).bind("click", function() { $("#comoes").fadeIn(700).siblings(".conta").hide(); }); $('#header a:eq(2)').hover(function() { $(".submenu").fadeIn(700) }); $(".submenu").bind("click", function() { $("#cartas").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); }); $('#header a:last').hover(function() { $(".submenu").fadeOut(700) }).bind("click", function() { $("#direccion").fadeIn(700).siblings(".conta").hide(); }); }); </script>
Y a continuación pondré el código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="all, index, follow" /> <title>Loft del Born</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.cycle2.min.js"></script> <link type="text/css" href="css/styles.css" rel="stylesheet" media="screen" /> </head> <body> <div class="cont"> <ul id="header"> <li><a href="#">¿Qué es?</a></li> <li><a href="#">¿Cómo es?</a></li> <li><a href="#">¿Qué tiene?</a></li> <ul class="submenu"> <li><a href="#">Carta</a></li> <li><a href="#">Vinos</a></li> <li><a href="#">Cócteles</a></li> </ul> <li><a href="#">¿Dónde está?</a></li> </ul> </div> <a id="social" href="#"><span>EL<br/> SALONCITO</span><br/><span>DEL</span><br/>LOFT<br/>DEL<br/>BORN</a> <div class="conta" id="filosofia"> <p>Loft se define por lo que no es. <br/>No es un bar de copas. No es un restaurante. <br/>Tampoco es una coctelería. <br/>Loft es un espacio que puede ser todo eso a la vez. <br/> Un vermut a media mañana. Un café rápido en la barra. Un tapeo para comer. Un trozo de tarta a la hora de la merienda. <br/>Una cena con un buen vino o una buena copa en sofá.</p> <br/> <p>Un espacio que no se acaba. Que se llena de momentos y que se disfruta diferente cada vez. Todo eso puede ser Loft.</p> <br/> <p>¿Te apetece entrar?</p> </div> <div class="conta" id="comoes"> <div class="cycle-slideshow"> <img src="img/Como-es/1.jpg" /> <img src="img/Como-es/2.jpg" /> <img src="img/Como-es/3.jpg" /> <img src="img/Como-es/4.jpg" /> <img src="img/Como-es/5.jpg" /> </div> </div> <div class="conta" id="cartas"> <ul class="cycle-slideshow" data-cycle-slides="li"> <li><img src="img/Cartas/Carta-Castellano/1.jpg"></li> <li><img src="img/Cartas/Carta-Castellano/2.jpg"></li> <li><img src="img/Cartas/Carta-Castellano/3.jpg"></li> <li><img src="img/Cartas/Carta-Castellano/4.jpg"></li> <li><img src="img/Cartas/Carta-Castellano/5.jpg"></li> <li><img src="img/Cartas/Carta-Castellano/6.jpg"></li> <li><img src="img/Cartas/Carta-Castellano/7.jpg"></li> <li><img src="img/Cartas/Carta-Castellano/8.jpg"></li> </ul> </div> <div class="conta" id="cartas"> <ul class="cycle-slideshow" data-cycle-slides="li"> <li><img src="img/Vinos/Vinos-Castellano/1.jpg"></li> <li><img src="img/Vinos/Vinos-Castellano/2.jpg"></li> <li><img src="img/Vinos/Vinos-Castellano/3.jpg"></li> </ul> </div> <div class="conta" id="cartas"> <ul class="cycle-slideshow" data-cycle-slides="li"> <li><img src="img/Cocteles/Cocteles-Castellano/1.jpg"></li> <li><img src="img/Cocteles/Cocteles-Castellano/2.jpg"></li> <li><img src="img/Cocteles/Cocteles-Castellano/3.jpg"></li> <li><img src="img/Cocteles/Cocteles-Castellano/4.jpg"></li> </ul> </div> <div class="conta" id="direccion"> </div> <script type="text/javascript"> $(document).ready(function() { // Código JavaScript anteriormente mencionado } </script> </body> </html>
Si entráis en la web, podréis observar al intentáis entrar en uno de los tres submenús, del item "padre" ¿Qué tiene? > carta, vinos, cócteles, apreciaréis que no sucede nada. Lo que necesito es poder hacer que se presenten igual que con los demás items de menú.
Y además, si se cambia de manera rápida del item ¿Cómo es? al de ¿Qué tiene?, y de manera repetitiva (es decir, del item A al item B y luego al A y más de lo mismo), podréis daros cuenta que las imágenes se superponen, cosa que empleando el mismo sistema con distintos items de menú, no sucede.
Muchas gracias de antemano.
Respuestas
Las dos cosas raras que veo en el código que nos has puesto son las siguientes:
1. En el código HTML defines tres elementos diferentes con el mismo atributo id. No deberías hacerlo porque se considera un error en la sintaxis HTML y además, es posible que se creen problemas con el código JavaScript que utilice ese atributo id:
<div class="conta" id="cartas"> <ul class="cycle-slideshow" data-cycle-slides="li"> <!-- cartas --> </ul> </div> <div class="conta" id="cartas"> <ul class="cycle-slideshow" data-cycle-slides="li"> <!-- vinos --> </ul> </div> <div class="conta" id="cartas"> <ul class="cycle-slideshow" data-cycle-slides="li"> <!-- cócteles --> </ul> </div>
2. En el código JavaScript, no defines el evento click para cada elemento del submenú sino para todo el submenú entero:
$(".submenu").bind("click", function() { // ... });
@javiereguiluz
He cambiado los id para que no se repitiera el id="cartas", y luego he añadido dos líneas en la parte de la función clic() del submenú, pero no funciona, me pasa lo mismo.
¿Alguna solución al respecto? Muchísimas gracias! =)
NUEVO CÓDIGO:
<div class="conta" id="cartas"> <!-- <-ID IGUAL --> <ul class="cycle-slideshow" data-cycle-slides="li"> . . . </ul> </div> <div class="conta" id="vinos"> <!-- <-ID CAMBIADA DE cartas A vinos--> <ul class="cycle-slideshow" data-cycle-slides="li"> . . . </ul> </div> <div class="conta" id="cocteles"> <!-- <-ID CAMBIADA DE cartas A cocteles--> <ul class="cycle-slideshow" data-cycle-slides="li"> . . . </ul> </div>
$(".submenu").bind("click", function(){ $("#cartas").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); $("#vinos").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); // <-- nuevo $("#cocteles").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); // <-- nuevo });
@cossmous
PERDÓN POR EL ANTERIOR MENSAJE, HE PUESTO MAL LAS ETIQUETAS PARA EL CÓDIGO.
He cambiado los ID para que no se repitiera el ID Cartas, y luego he añadido dos líneas en la parte de la función clic del submenú, pero no funciona, me pasa lo mismo.
¿Alguna solución al respecto? Muchísimas gracias! =)
NUEVO CÓDIGO:
<div class="conta" id="cartas"> <!-- <-ID IGUAL --> <ul class="cycle-slideshow" data-cycle-slides="li"> . . . </ul> </div> <div class="conta" id="vinos"> <!-- <-ID CAMBIADA DE cartas A vinos--> <ul class="cycle-slideshow" data-cycle-slides="li"> . . . </ul> </div> <div class="conta" id="cocteles"> <!-- <-ID CAMBIADA DE cartas A cocteles--> <ul class="cycle-slideshow" data-cycle-slides="li"> . . . </ul> </div>
$(".submenu").bind("click", function(){ $("#cartas").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); new -> $("#vinos").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); new -> $("#cocteles").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); });
@cossmous
Lo que he puesto de // <-- nuevo solo es para indicar las nuevas líneas que he añadido. En el código que hay en la web, no está.
@cossmous
Siendo sincero, todavía no entiendo completamente el comportamiento que esperas del submenú. En tu código estás diciendo: cuando se pinche en cualquier parte del submenú, se muestran las tres subseccionse seguidas y sin permitir al usuario pasar de una sección a otra.
Pero leyendo tu primer mensaje pensaba que querías que al pinchar en cada uno de los tres elementos del submenú se mostrara solamente su sección, ignorando las otras dos. Así que dinos por favor cuál es el comportamiento deseado del submenú y así te podremos ayudar con el código JavaScript.
@javiereguiluz
De acuerdo, ya lo he solucionado; Simplemente he cambiado los id's repetidos y luego he creado tres eventos, en principio ahora funcionan pero, no consigo hacer que si el cursor está encima de lo que esté presentando, se pause la transición que hay entre imágenes...
Código Solucionado:
/* $(".submenu").bind("click", function(){ $("#cartas").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide(); }); */ $('#submenu a:first').click(function(){ $("#cartas").fadeIn(700).siblings(".conta").hide(); }); $('#submenu a:eq(1)').click(function(){ $("#vinos").fadeIn(700).siblings(".conta").hide(); }); $('#submenu a:eq(2)').click(function(){ $("#cocteles").fadeIn(700).siblings(".conta").hide(); });
He quitado los atributos childre y cycle aunque no sé si esto servía para algo, de todos modos funciona, aunque no se si eso tiene algo que ver en que funcione mejor o qué...
@cossmous
@javiereguiluz, respondiendo a tu muy agradecida respuesta/pregunta:
Lo que se pretende conseguir es que al pinchar en cada uno de los submenús, presente unas imágenes u otras, dependiendo de las que se le hayan asignado en cada ID-(en la parte de código HTML).
Con el código que podrás observar justo encima de esta respuesta, verás que lo he conseguido declarando tres eventos para cada uno de los submenús. Aunque los otros atributos (los que hay en la parte /comentada/), no sé muy bien para que los usaban; he probado a ponerlos, pero me dan error...
Espero haber podido responder con más exactitud, pido disculpas por si he causado algún mal entendido.
Muchas gracias, un saludo.
@cossmous