Hola necesito hacer lo siguiente, he mirado en el foro pero no veo algo similar. Seguro que ya se ha tratado porque entiendo que debe de ser algo fácil, pero no consigo solucionarlo.
Tengo un menú:
Código PHP:
<div id="wrapper-menu">
<ul id="nav">
<li id="item1" class="fade"><a href="#" title="keywords for SEO">home</a></li>
<li id="item2" class="fade"><a href="#" title="keywords for SEO">services</a></li>
<li id="item3" class="fade"><a class="big-menu-launcher" href="#" title="keywords for SEO">products</a></li>
<li id="item4" class="fade"><a class="big-menu-launcher-stores" href="#" title="keywords for SEO">our stores</a></li>
<li id="item5" class="fade"><a href="#" title="keywords for SEO">contact</a></li>
</ul><!--end nav-->
Y luego un submenú oculto:
Código PHP:
<div id="big-menu-hidden">
<div id="cart">
<div id="counter-cart">
<p>0 items in</p>
<p id="btn-go-cart"><a href="" title="keywords for SEO">YOUR CART</a></p>
<span id="img-empty-cart"><img src="images/ico-empty-cart.png" alt="keyword for SEO" width="109" height="131"/></span>
</div>
</div>
<div id="product-list">
<span id="btn-close"><a class="big-menu-launcher" href="#">close</a></span>
<h2 id="li-item1" title="SEO KEYWORDS">digital<strong>cameras</strong></h2>
<ul id="list-cameras">
<li><a href="#" title="keyword for SEO">canon</a></li>
<li><a href="#" title="keyword for SEO">nikkon</a></li>
<li><a href="#" title="keyword for SEO">hasselband</a></li>
<li><a href="#" title="keyword for SEO">leica</a></li>
<li><a href="#" title="keyword for SEO">sony</a></li>
<li><a href="#" title="keyword for SEO">lomo like</a></li>
<li class="view-all"><span><a href="#" title="keywords for SEO">view all</a></span></li>
</ul>
<h2 id="li-item2" title="SEO KEYWORDS">personal<strong>computers</strong></h2>
<ul id="list-laptops">
<li><a href="#" title="keyword for SEO">apple</a></li>
<li><a href="#" title="keyword for SEO">hp</a></li>
<li><a href="#" title="keyword for SEO">sony</a></li>
<li><a href="#" title="keyword for SEO">dell</a></li>
<li><a href="#" title="keyword for SEO">acer</a></li>
<li><a href="#" title="keyword for SEO">ibm</a></li>
<li class="view-all"><span><a href="#" title="keywords for SEO">view all</a></span></li>
</ul>
<h2 id="li-item3" title="SEO KEYWORDS">smart<strong>phones</strong></h2>
<ul id="list-phones">
<li><a href="#" title="keyword for SEO">apple</a></li>
<li><a href="#" title="keyword for SEO">htc</a></li>
<li><a href="#" title="keyword for SEO">sony</a></li>
<li><a href="#" title="keyword for SEO">samsung</a></li>
<li><a href="#" title="keyword for SEO">motorola</a></li>
<li><a href="#" title="keyword for SEO">alcatel</a></li>
<li class="view-all"><span><a href="#" title="keywords for SEO">view all</a></span></li>
</ul>
</div>
</div><!--endBigMenuHidden-->
Con sus estilos:
Código PHP:
div#wrapper-menu div#big-menu-hidden{
display:none;
text-align:left;
position:absolute;
background:url(../images/back-big.menu-hidden.png) no-repeat;
font-size:12px;
width:910px;
height:244px;
margin:100px 0 0 210px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
...
Y con esta función consigo sacar para el click en Products la caja oculta que se puede volver a esconder desde el mismo botón y desde el botón cerrar de la misma. Hasta ahí funciona correctamente, mi problema es si quiero poner una segunda opción que haga la mismo.
Código PHP:
$(document).ready(function(){
$(".big-menu-launcher").click(function(){
$("#big-menu-hidden").toggle("fast");
});
});
Es decir, me gustaría que al pulsar sobre la opción stores pudiera sacar una segunda venta igual pero con info sobre las tiendas. El problema es que con esa función así planteada tengo el problema del overlaping entre ellas. Me gustaría que si una está visible o activa al pulsar sobre la segunda la primera se cerrara, de modo que nunca estuvieran las dos al mismo tiempo.
Espero haberme explicado bien que lo veo un poco enrevesado.
En cualquier caso, muchas gracias!!!
