[Error]  Problema con Menus Desplegables
* URL del foro: www.thefantasys.com * Versión del foro: 1.6 * Actualización: No Hola! He hecho unos menus desplegables con Jquery html y CSS, y v...


Hola!

He hecho unos menus desplegables con Jquery html y CSS, y va todo perfecto y todo, el problema es que cuando abro un menu, al abrir otro el anterior no se cierra, dejando asi todos los menus abiertos.

Me gustaria saber como puedo hacer para que al abrir un menu el anterior o cualquier otro abierto se cierre. Os copio mi codigo:

CSS:
Código:
/* Reset */
ul, li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

/* Style */
ul {
    list-style: url(none) none;
        padding: 2px;
}
ul li {
    display: inline;
    float: left;
    position: relative;
    margin: 0;
    padding: 2px;
}
ul li.mtitle {
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
        width: 140px;
        cursor: pointer;
}
ul li ul {
    position: absolute;
    display: none;
    background: #FFFFFF;
    padding: 0px;
    border: 1px solid #000;
        width: 140px;
}
ul li ul li {
    display: list-item;
    float: none;
    margin: 0;
    padding: 2px;
}
ul li ul li a {
    font-size: 12px;
    color: #000000 !important;
    text-align: center;
}

ul li ul li.categoria2 {
    background: url(/images/problack/panel_bg.png);
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
}

JS:
Código:
script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Muestra y oculta los menues
        $('ul li:has(ul)').click(function(e) {
             $(this).find('ul').toggle();
           });
        });
</script>

HTML:
Código:
<ul>
   <li class="mtitle"><b>Perfil</b> <img src="/images/tri-down2.gif" style="margin-left: 2px;" />
      <ul>
         <li class="categoria2"><Strong>Panel de Control</Strong></li>  
         <li><a href="$settings[bburl]/usercp.php">Panel de control</a></li>
         <li class="categoria2"><Strong>Mensajes Privados</Strong></li>
         <li><a href="$settings[bburl]/private.php?action=send">Redactar mensaje</a></li>
         <li><a href="$settings[bburl]/private.php?fid=1">Bandeja de Entrada</a></li>
         <li class="categoria2"><Strong>Tu Perfil</Strong></li>
         <li><a href="$settings[bburl]/usercp.php?action=profile">Editar tu perfil</a></li>
         <li><a href="$settings[bburl]/usercp.php?action=avatar">Cambiar Avatar</a></li>
         <li><a href="$settings[bburl]/usercp.php?action=editsig">Cambiar Firma</a></li>
         <li><a href="$settings[bburl]/usercp.php?action=options">Preferencias</a></li>
         <li class="categoria2"><Strong>Miscelanea</Strong></li>
         <li><a href="$settings[bburl]/usercp.php?action=pendingrequests">Invitaciones pendientes</a></li>
         <li><a href="$settings[bburl]/misc.php?action=buddypopup">Lista de Amigos</a></li>
         <li><a href="{$profile_link}">Ver tu perfil</a></li>
      </ul>
   </li>
   <li class="mtitle"><b>The Fantasys</b> <img src="/images/tri-down2.gif" style="margin-left: 2px;" />
      <ul>
         <li class="categoria2"><Strong>The Fantasys</Strong></li>  
         <li><a href="$settings[bburl]/portal.php">Portal</a></li>
         <li><a href="$settings[bburl]/index.php">Foro</a></li>
         <li class="categoria2"><Strong>Dentro del Foro</Strong></li>
         <li><a href="$settings[bburl]/memberlist.php">Lista de miembros</a></li>
         <li><a href="$settings[bburl]/online.php">Quien esta en Linea</a></li>
         <li><a href="$settings[bburl]/showteam.php">Staff The Fantasys</a></li>
         <li class="categoria2"><Strong>Nuevos Posts</Strong></li>
         <li><a href="$settings[bburl]/search.php?action=getdaily">Mensajes de Hoy</a></li>
         <li><a href="$settings[bburl]/misc.php?action=buddypopup">Nuevos Mensajes</a></li>
         <li><a href="$settings[bburl]/search.php">Buscar en Temas</a></li>
         <li class="categoria2"><Strong>Calendario</Strong></li>
         <li><a href="$settings[bburl]/calendar.php">Calendario</a></li>
      </ul>
   </li>
   <li class="mtitle"><b>Descarga Directa</b> <img src="/images/tri-down2.gif" style="margin-left: 2px;" />
      <ul>
         <li class="categoria2"><Strong>Hentai</Strong></li>  
         <li><a href="$settings[bburl]/forum-15.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-16.html">Anime</a></li>
         <li class="categoria2"><Strong>Yuri</Strong></li>
         <li><a href="$settings[bburl]/forum-8.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-9.html">Anime</a></li>
         <li class="categoria2"><Strong>Yaoi</Strong></li>
         <li><a href="$settings[bburl]/forum-5.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-6.html">Anime</a></li>
         <li class="categoria2"><Strong>Lolicon</Strong></li>
         <li><a href="$settings[bburl]/forum-2.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-3.html">Anime</a></li
      </ul>
  </li>
</ul>

Muchas gracias por la ayuda >.<
No veo el menu en tu foro... :S

Y eso supongo que habría que modificar el js, pero yo no sé javascript. Sad
(29 Dec, 2010, 10:17 am)abdonroda escribió: No veo el menu en tu foro... :S

Y eso supongo que habría que modificar el js, pero yo no sé javascript. Sad

el menu esta habilitado solo para los registrados, sino era mucho follon poner todo lo del usercp y todo con if $usser_is_logged y demas.

Y si hay que modificar el JS pero al igual que tu yo se lo justo xD por eso pido a un alma caritativa que me ayude u.u
Ese JS lo deberias de poder poner inline.... ahorita ando voy de salida y sorry si no puedo dar mejor soporte en este preciso momento.

Intenta poner ese JS en el header_welcomeblock_member y header_welcomeblock_admin, abajo de la seccion del menu.
Código:
<script type="text/javascript">
$(document).ready(function() {
    // Muestra y oculta los menues
        $('ul li:has(ul)').click(function(e) {
             $(this).find('ul').toggle();
           });
        });
</script>

El otro te recomendaria que lo pusieras en la plantilla de headerinclude:
Código:
<script type="text/javascript" src="jquery.js"></script>
Just donde estan los otros scripts....

Respalda el codigo de las 2 plantillas de member_welcomeblock_ por si estaba modificado.
eso no me ayuda en nada SergioM

solo has cambiado la posicion del JS, pero eso no responde a lo que yo busco.

Lo que hay que hacer es modificar el JS que yo he escrito de tal manera que cuando haces click fuera del li:has('ul') este se cierre.

Gracias de todas formas
Ok si mal entendi, esperame ando haciendo el jQuery....

EDIT: Listo...
HTML:
Código:
<ul class="menu1p">
   <li class="mtitle"><b>Perfil</b> <img src="/images/tri-down2.gif" style="margin-left: 2px;" />
      <ul class="menu2s">
         <li class="categoria2"><Strong>Panel de Control</Strong></li>  
         <li><a href="$settings[bburl]/usercp.php">Panel de control</a></li>
         <li class="categoria2"><Strong>Mensajes Privados</Strong></li>
         <li><a href="$settings[bburl]/private.php?action=send">Redactar mensaje</a></li>
         <li><a href="$settings[bburl]/private.php?fid=1">Bandeja de Entrada</a></li>
         <li class="categoria2"><Strong>Tu Perfil</Strong></li>
         <li><a href="$settings[bburl]/usercp.php?action=profile">Editar tu perfil</a></li>
         <li><a href="$settings[bburl]/usercp.php?action=avatar">Cambiar Avatar</a></li>
         <li><a href="$settings[bburl]/usercp.php?action=editsig">Cambiar Firma</a></li>
         <li><a href="$settings[bburl]/usercp.php?action=options">Preferencias</a></li>
         <li class="categoria2"><Strong>Miscelanea</Strong></li>
         <li><a href="$settings[bburl]/usercp.php?action=pendingrequests">Invitaciones pendientes</a></li>
         <li><a href="$settings[bburl]/misc.php?action=buddypopup">Lista de Amigos</a></li>
         <li><a href="{$profile_link}">Ver tu perfil</a></li>
      </ul>
   </li>
   <li class="mtitle"><b>The Fantasys</b> <img src="/images/tri-down2.gif" style="margin-left: 2px;" />
      <ul class="menu2s">
         <li class="categoria2"><Strong>The Fantasys</Strong></li>  
         <li><a href="$settings[bburl]/portal.php">Portal</a></li>
         <li><a href="$settings[bburl]/index.php">Foro</a></li>
         <li class="categoria2"><Strong>Dentro del Foro</Strong></li>
         <li><a href="$settings[bburl]/memberlist.php">Lista de miembros</a></li>
         <li><a href="$settings[bburl]/online.php">Quien esta en Linea</a></li>
         <li><a href="$settings[bburl]/showteam.php">Staff The Fantasys</a></li>
         <li class="categoria2"><Strong>Nuevos Posts</Strong></li>
         <li><a href="$settings[bburl]/search.php?action=getdaily">Mensajes de Hoy</a></li>
         <li><a href="$settings[bburl]/misc.php?action=buddypopup">Nuevos Mensajes</a></li>
         <li><a href="$settings[bburl]/search.php">Buscar en Temas</a></li>
         <li class="categoria2"><Strong>Calendario</Strong></li>
         <li><a href="$settings[bburl]/calendar.php">Calendario</a></li>
      </ul>
   </li>
   <li class="mtitle"><b>Descarga Directa</b> <img src="/images/tri-down2.gif" style="margin-left: 2px;" />
      <ul class="menu2s">
         <li class="categoria2"><Strong>Hentai</Strong></li>  
         <li><a href="$settings[bburl]/forum-15.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-16.html">Anime</a></li>
         <li class="categoria2"><Strong>Yuri</Strong></li>
         <li><a href="$settings[bburl]/forum-8.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-9.html">Anime</a></li>
         <li class="categoria2"><Strong>Yaoi</Strong></li>
         <li><a href="$settings[bburl]/forum-5.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-6.html">Anime</a></li>
         <li class="categoria2"><Strong>Lolicon</Strong></li>
         <li><a href="$settings[bburl]/forum-2.html">Manga</a></li>
         <li><a href="$settings[bburl]/forum-3.html">Anime</a></li>
      </ul>
  </li>
</ul>

CSS (adicional al que tienes, sugeriria antes del tuyo):
Código:
ul.menu1p {
    list-style: none;
}
ul.menu1p li {
    float: left;
    margin: 0;
    position: relative;
}
ul.menu1p li a{
    padding: 0px;
    display: block;
    text-decoration: none;
    float: left;
}
ul.menu1p li ul.menu2s {
    list-style: none;
    position: absolute;
    left: 0;
    top: 20px;
    margin: 0;
    padding: 0;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #111;
}
ul.menu1p li ul.menu2s li{
    margin: 0;
    padding: 0;
    clear: both;
    width: 170px;
}
html ul.menu1p li ul.menu2s li a {
    float: left;
    width: 145px;
    padding-left: 20px;
}

JS:
Código:
$(document).ready(function (){
$("ul.menu1p li").click(function() {
    $(this).find("ul.menu2s").show();
    $(this).hover(
        function() { },
        function() {
            $(this).find("ul.menu2s").hide();
        });
    });
});
disculpame Sergio pero es tarde hoy ya 2:28 AM xD

permiteme modificarlo mañana y te cuento vale?

gracias por el esfuerzo
Vale, pero me dices Wink
Va perfecto! justo lo que necesitaba

Muchas gracias Sergio te debo una grande >.<

PD: Cierra tema ya si quieres Smile
Gusto que te funcione y lamento el mal entendimiento Smile

Saludos.

Paso a cerrar el tema.
Última modificación: 30 Dec, 2010, 10:08 am por atorrante.