JavaScript - <ayuda> Solapamiento de imágenes en JavaScript

   
Vista:
Imágen de perfil de Jordi

<ayuda> Solapamiento de imágenes en JavaScript

Publicado por Jordi (1 intervención) el 15/03/2015 23:39:44
Hola a todos/as,

Tengo una web http://www.loftdelborn.es/bienvenido.php con un menú que se activa mediante el siguiente código JavaScrit:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>

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, y 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.

Y a continuación pondré el código HTML:
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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="#">&iquest;Qu&eacute; es?</a></li>
				<li><a href="#">&iquest;C&oacute;mo es?</a></li>
				<li><a href="#">&iquest;Qu&eacute; tiene?</a></li>
					<ul class="submenu">
   <li><a href="#">Carta</a></li>
   <li><a href="#">Vinos</a></li>
   <li><a href="#">C&oacute;cteles</a></li>
					</ul>
				<li><a href="#">&iquest;D&oacute;nde est&aacute;?</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&iacute;a.<br/>Loft es un espacio que puede ser todo eso a la vez.<br/> Un vermut a media ma&ntilde;ana. Un caf&eacute; r&aacute;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&aacute;.</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>&iquest;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
			.
			.
			.

Muchas Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder