Doble llamada a menu con animación jQuery

[MadDunDee]

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!!!

[mayid]

Es un problema que me recuerda a lo de la facultad (logica):

VV
FV
VF
FF

Yo lo resolvería agregando el metodo "cerrar" en cada evento que tengas.

$(".big-menu-launcher").click(function(){

$("#big-menu-hidden").toggle("fast");
$("#X").close() // o como sea que se escriba el metodo

});

[MadDunDee]

claro, si solo es cuestión de lógica. Pero también de sintaxis de jQuery que es justo no lo que no sé. Ese .close que yo sepa no es un método válido.

He probado con el método .hide y funciona perfectamente pero sin pasarle ningún parámetro, que es lo que estaba haciendo mal, es decir .hide() (y con una sola d!) En cuanto termine esto que estoy haciendo me meto una empollada de una semana de jQuery para aprender al menos la sintaxis, la lógica ya es un tema más de alma de programador, así que un soludo a todos estos desde aquí!

Gracias!!

este script tonto queda finalmente así:

Código PHP:

  $(document).ready(function(){
$(".big-menu-launcher").click(function(){
$("#big-menu-hidden").toggle("fast");
$("#big-menu-hidden-stores").hide();
});
 
$(".big-menu-launcher-stores").click(function(){
$("#big-menu-hidden-stores").toggle("fast");
$("#big-menu-hidden").hide();
});
 
}); 
   

[mayid]

La vez anterior no me explayé, pero lo que quise decir es que uses el mismo metodo que usa el boton de cerrar que ya tenes. Yo lo nombre genericamente close para dar la idea.

Era esto:

que se puede volver a esconder desde el mismo botón y desde el botón cerrar de la misma

Pero claro, si solo se trata de "ocultar" entonces hide() está mas que bien. Ya lo resolviste.

[Dany_s]

¿qué pasa si agregas 10 opciones y querés que hagan ese efecto? vas a tener que agregar como 50 lineas de código que van a hacer lo mismo, te conviene hacer usando convenciones como agregando como clase de un div el id del li relacionado entonces cuando hacen click en la lista o en el enlace recuperas el id y usas eso para mostrar el div con clase que recuperaste, creo que no se entiende leyendo, por ej:

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <script type="text/javascript">
    $( function (){
        //aca argego a un div la clase visible solo para que se ejecute la funcion slideUp
        $('#contenido div:eq(0)').addClass('visible');
        $('#menu a.evento').click(function(){
            //recupero el id del enlace clickeado
            clase = $(this).attr('id');
            //Al div que tiene la clase visible lo oculto y le saco la clase visible
            $('#contenido div.visible').removeClass('visible').slideUp('slow', function (){
                //muestro el div que tenga la clase...eeeh lo que tenga la variable clase y le agrego la clase visible
                $('#contenido div.'+clase).slideDown().addClass('visible');
            });
        });
    });
    </script>
    <style>
    #contenido>div{display:none; height:100px; width:100px}
    .uno{background-color:red}
    .dos{background-color:green}
    .tres{background-color:blue}
    </style>
<body>

    <ul id="menu">
        <li><a href="#">No hace nada</a></li>
        <li><a href="#" class="evento" id="uno">Uno</a></li>
        <li><a href="#" class="evento" id="dos">Dos</a></li>
        <li><a href="#">No hace nada</a></li>
        <li><a href="#" class="evento" id="tres">Tres</a></li>
        <li><a href="#">No hace nada</a></li>
    </ul>


    <div id="contenido">
        <div class="uno">contenido link uno</div>
        <div class="dos">contenido link dos</div>
        <div class="tres">contenido link tres</div>
    </div>
</body>
</html> 

la convención en ese caso va a ser que el div se relaciona con el enlace mediante el id del link y la clase del div

otra también pero menos flexible es usando el indice pero tiene que estar relacionado y en orden todos los links con los div
link 1
link 2
link 3

contenido 1
contenido 2
contenido 3

asi cuando el click es es link con indice 2 muestro el div con indice 2

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <script type="text/javascript">
    $( function (){
        li = $('#menu li');
        $('#contenido div:eq(0)').addClass('visible');
        li.click(function(){
            indice = li.index( $(this) );
            $('#contenido div.visible').removeClass('visible').slideUp('slow', function (){
                $('#contenido div:eq('+indice+')').slideDown().addClass('visible');
            });
        });
    });
    </script>
    <style>
    #contenido>div{display:none; height:100px; width:100px}
    .rojo{background-color:red}
    .verde{background-color:green}
    .azul{background-color:blue}
    </style>
<body>

    <ul id="menu">
        <li><a href="#">Uno</a></li>
        <li><a href="#">Dos</a></li>
        <li><a href="#">Tres</a></li>
    </ul>


    <div id="contenido">
        <div class="rojo">contenido uno</div>
        <div class="verde">contenido dos</div>
        <div class="azul">contenido tres</div>
    </div>
</body>
</html>