<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:
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:
Muchas Gracias.
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="#">¿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
. . .Muchas Gracias.
Valora esta pregunta
0