Comunidad PHPeros
Lenguajes => (X)HTML => Mensaje iniciado por: nmartin021 en 19 de Julio de 2011, 11:49:38 am
-
Hola!
Bueno, no se si es exactamente "unir", pero bueno :P
Tengo un <ul> y en el tengo 4 <li> "escondidos". Cuando paso el ratón por encima de <ul>, aparecen esos <li>, paso el mouse por encima de ellos y, al sacar el mouse, no se cierran si no paso el ratón por encima (de nuevo) por <ul>. Es la función Js, que comprueba si está o no abierto el <ul> (si se ven o no los <li>) y, si está cerrado lo abre y viceversa. Lo que pasa es que quiero que al sacar el raton de los <li> también se cierre.
He probado todo esto:
- Encerrar el <ul> en un <span> y poner el onmouseout en el <span> con la función Js, pero no funciona como debe (pasas el mouse por encima del primer <li> y todo bien. Pasas el mouse cualquiera de los siguientes <li> y se cierra ._.
- Poner el onmouseout en el propio <ul>. Pero no funciona.
Por eso, busco alguna manera de "unir" esos <li> y que un onmouseout funcione para todos, como si fuera un sólo elemento.
O en su defecto, otro modo de solucionar el problema.
Saludos.
-
Prueba a meter el ul en un div, a veces los elementos inline dan esta clase de fallos.
Pero, si nos dices qué quieres hacer exacamente, a lo mejor podemos pensar una solución alternativa
-
Prueba a meter el ul en un div, a veces los elementos inline dan esta clase de fallos.
Pero, si nos dices qué quieres hacer exacamente, a lo mejor podemos pensar una solución alternativa
Ya probé metiéndolo en un div, ¿pero dónde pongo el code Js? ¿En div onmouseout?
PD: Creo que podría hacerlo creando un class con margin left y width 50px (por ejemplo). Sería un cuadrado que pondría a la izquiera y luego haría otro, lo pondría a la derecha, creo otros dos para arriba y abajo. Algo así:
(http://i.imgur.com/o9Mp8.png)
Lo explico:
El cuadrado negro es el menú (ya abierto) y sus <li>. los cuadrados azules con <a class="cuadroPosicion"></a>, que son invisibles, solo que, al pasar el mouse encima, se activa el Js. ¿Se puede hacer eso?
-
A ver, aclaremos. Quieres que la lista se abra al poner el ratón encima... ¿¡Cómo!? Si la lista está oculta. Debes usar algo que esté visible y mostrar los LIs...
Te dejo un código con jQuery, es más sencillo que manipular el DOM a mano. Aunque tendrás que incluir la libreria.
// en el head
<script type="text/javascript">
$(document).ready(function() {
$('#divlista > ul > li.visible').hover(function() {
$(this).siblings().show();
}, function() {
$(this).siblings().hide();
});
});
</script>
// html
<div id="divlista">
<ul>
<li class="visible">abre la lista</li>
<li>...</li>
...
</ul>
</div>
Algo así es lo que quieres?
-
A ver, aclaremos. Quieres que la lista se abra al poner el ratón encima... ¿¡Cómo!? Si la lista está oculta. Debes usar algo que esté visible y mostrar los LIs...
Te dejo un código con jQuery, es más sencillo que manipular el DOM a mano. Aunque tendrás que incluir la libreria.
// en el head
<script type="text/javascript">
$(document).ready(function() {
$('#divlista > ul > li.visible').hover(function() {
$(this).siblings().show();
}, function() {
$(this).siblings().hide();
});
});
</script>
// html
<div id="divlista">
<ul>
<li class="visible">abre la lista</li>
<li>...</li>
...
</ul>
</div>
Algo así es lo que quieres?
NO.
El code en Js lo tengo hecho, el problema es que al pasar el ratón por encima y se abre el menú, luego no se cierra al sacar el mouse del menú abierto, sino que hay que pasar el mouse por encima (de nuevo) del sitio en el que se abre el menú.
-
Como lo tienes puesto ahora?
-
Como lo tienes puesto ahora?
Cuando se pasa el mouse por encima y está cerrado -> se abre el menú
Se pasa el mouse por encima mientras está abierto -> se cierra
Lo que quiero es "unir" esos LI en un solo elemento para poner el onmouseout y que funcione para los 3 LI que salen mas el <a> por el que se pasa el mouse y se abre/cierra el menú.
No si me explico, si no me entiendes, haré una demo para que veas.
Saludos
PD: Aunque no me sirva, mi primer Karma + es para tu código, por el esfuerzo :D
-
Digo que me enseñes el código que tienes ahora ._.
-
Digo que me enseñes el código que tienes ahora ._.
<ul><a onmouseover="asd(0)">asdasd</a>
<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>
</ul>
Eso tengo *si
-
<ul><a onmouseover="asd(0)">asdasd</a>
<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>
</ul>
Eso tengo *si
Y el javascript...?? :/
-
Y el javascript...?? :/
function open_opciones(action){
if($('#opciones').css('display') == 'block' && action!='open')
close_opciones();
else{
$('#opciones_error').css('display','none');
$('#opciones_cargando').css('display','none');
$('.opciones_menu').addClass('here');
$('#menu_box').fadeIn('fast');
$('#title').focus();
}
}
function close_opciones(){
$('.opciones_menu').removeClass('here');
$('#menu_box').fadeOut('fast');
}
-
function open_opciones(action){
if($('#opciones').css('display') == 'block' && action!='open')
close_opciones();
else{
$('#opciones_error').css('display','none');
$('#opciones_cargando').css('display','none');
$('.opciones_menu').addClass('here');
$('#menu_box').fadeIn('fast');
$('#title').focus();
}
}
function close_opciones(){
$('.opciones_menu').removeClass('here');
$('#menu_box').fadeOut('fast');
}
Si tienes ese HTML basta con algo así:
<ul><a onmouseover="menu(this);">asdasd</a>
<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>
</ul>
Nota que con this "envío el elemento" a la función
function menu(link) {
if($(link).siblings('li').is(':hidden')) { // si los li están ocultos
$(link).siblings('li').show(); // los mostramos
// aquí maneja las clases como quieras
} else { // si los lis están visibles
$(link).siblings('li').hide(); // los ocultamos
}
}
Aunque... me suena que el HTML es otro porque ahí veo mucha clase :/
-
Si tienes ese HTML basta con algo así:
<ul><a onmouseover="menu(this);">asdasd</a>
<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>
</ul>
Nota que con this "envío el elemento" a la función
function menu(link) {
if($(link).siblings('li').is(':hidden')) { // si los li están ocultos
$(link).siblings('li').show(); // los mostramos
// aquí maneja las clases como quieras
} else { // si los lis están visibles
$(link).siblings('li').hide(); // los ocultamos
}
}
Aunque... me suena que el HTML es otro porque ahí veo mucha clase :/
-yuno!!!!!!
._.
¡Que no!
No quiero el code Js listo (que ni necesito)...
¡Simplemente necesito meter esos LI dentro de otro elemento que se muestre / oculte con mi Js actual!!!!!!
Algo asi como:
<span onmouseout="close()" onmouseover="open"><ul><li>1</li><li>2</li><li>3</li></ul></span>
PD: Las clases son estilos & IDs que, en caso de error, se muestran.
-
Are you fucking kidding me? Pues haz <ul><a>...</a><div id="qtj"><li>...</li><li>...</li></div></ul>
._. Pero es una chorrada pudiendo hacer lo que te he puesto.
-
Are you fucking kidding me? Pues haz <ul><a>...</a><div id="qtj"><li>...</li><li>...</li></div></ul>
._. Pero es una chorrada pudiendo hacer lo que te he puesto.
Que no, que yo no quiero el Js, pues ya lo tengo hecho... ._.
Lo que pasa es que hay un <a> que, cuando pasas el mouse por encima, se mustran los <li>. Pasas el mouse otra vez por encima, y se van. Lo que quiero es que cuando quites el mouse de cada uno de esos <li> que se cierre el menu, con 'onmouseoUt="close()"'
Eso quiero ._.
-
Que no, que yo no quiero el Js, pues ya lo tengo hecho... ._.
Lo que pasa es que hay un <a> que, cuando pasas el mouse por encima, se mustran los <li>. Pasas el mouse otra vez por encima, y se van. Lo que quiero es que cuando quites el mouse de cada uno de esos <li> que se cierre el menu, con 'onmouseoUt="close()"'
Eso quiero ._.
Entonces porque no le pones al <a> le pones la funcion para abrir, y a cada <li> la función de cerrar ???
-
Entonces porque no le pones al <a> le pones la funcion para abrir, y a cada <li> la función de cerrar ???
Porque cuando salga del primer <li> y vaya al otro, se cerrará D:
-
Probaste <ul><a>...</a><div id="licont"><li>...</li><li>...</li></div></ul>
Es decir, metiendo los <li> en un <div>, y poniendo al link la función de abrir, y al div la de cerrar?
-
Probaste <ul><a>...</a><div id="licont"><li>...</li><li>...</li></div></ul>
Es decir, metiendo los <li> en un <div>, y poniendo al link la función de abrir, y al div la de cerrar?
No, porque no sabía que se puede hacer lo que me acabas de decir. Ahora mismo lo pruebo y te cuento.
PD: Pasate más por la sección PHP que sino se muere ._.