- 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 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 >.<
(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.
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.
El otro te recomendaria que lo pusieras en la plantilla de headerinclude:
Just donde estan los otros scripts....
Respalda el codigo de las 2 plantillas de member_welcomeblock_ por si estaba modificado.
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>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
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:
CSS (adicional al que tienes, sugeriria antes del tuyo):
JS:
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();
});
});
});
