MyBB-Es.com     Comunidad en General     Papelera     (Archivo) MyBB 1.6.x     Soporte sobre temas (Estilos y plantillas) MyBB 1.6.x    

[Error] Problema con Menus Desplegables

setsuna   29 Dec, 2010, 8:46 am
#1

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:
/* 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:
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:
<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 >.<
  
nentab   29 Dec, 2010, 10:17 am
#2
No veo el menu en tu foro... :S

Y eso supongo que habría que modificar el js, pero yo no sé javascript. Sad
  
setsuna   29 Dec, 2010, 10:22 am
#3
(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
  
SergioM   29 Dec, 2010, 10:49 am
#4
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.
<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:
<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.
  
setsuna   29 Dec, 2010, 11:08 am
#5
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
  
SergioM   29 Dec, 2010, 4:22 pm
#6
Ok si mal entendi, esperame ando haciendo el jQuery....

EDIT: Listo...
HTML:
<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):
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:
$(document).ready(function (){
$("ul.menu1p li").click(function() {
	$(this).find("ul.menu2s").show();
	$(this).hover(
		function() { },
		function() {
			$(this).find("ul.menu2s").hide();
		});
	});
});
  
setsuna   29 Dec, 2010, 6:28 pm
#7
disculpame Sergio pero es tarde hoy ya 2:28 AM xD

permiteme modificarlo mañana y te cuento vale?

gracias por el esfuerzo
  
SergioM   29 Dec, 2010, 6:39 pm
#8
Vale, pero me dices Wink
  
setsuna   30 Dec, 2010, 4:09 am
#9
Va perfecto! justo lo que necesitaba

Muchas gracias Sergio te debo una grande >.<

PD: Cierra tema ya si quieres Smile
  
SergioM   30 Dec, 2010, 10:08 am
#10
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.
  
Tema anterior      Tema siguiente
  
 Contáctanos
 Equipo del foro
 MyBB-Es.com - Soporte para los Foros MyBB en Español
 Volver arriba
 Marcar foros como leídos
 Sindicación RSS
 Ayuda
Powered By MyBB, © 2002-2025 MyBB Group.
Made with by Curves UI.