Como cerrar un menú flotante al salir del div

Amigos:
Existen menús como el de google, flickr entre otros, que al hacer click sobre ellos se abre el div o el <ul> que contiene el submenú, y al salir de ese submenu (o sea, al hacer click fuera de el) se cierra el div o <ul>.

Aún no logro encontrar ese efecto, ya que para abrir y cerrar el submenu, lo hago con un display='none' y 'block..

Necesito de su ayuda...

gracias, '

te da alguna pista

il:{
}

il:hover{
}

.....?

gracias jpcw, pero como se podría hacer con javascript

Dejo el código JS

Código :

function showMenu(id_menu,id_item,icon){
var my_menu = document.getElementById(id_menu);
var my_item = document.getElementById(id_item);
var my_icon=document.getElementById(icon);

if(my_menu.style.display=="none" || my_menu.style.display==""){
   my_menu.style.display="block";
   my_item.className="active";
   my_icon.src ="/images/icons/users/arrow_select.gif";
   }
   else { 
   my_menu.style.display="none";
   my_item.className="";
   my_icon.src ="/images/icons/users/arrow.gif";
   }
   
}

El HTML

Código :

<div id="margin_menu">
    <ul>
        <li>
<span id="nuevo">
<a onClick="javascript:showMenu('menu_arrow_nuevo','nuevo','arrow_nuevo')">Agregar Nuevo</a>
<img src="/images/icons/users/arrow.gif" width="18" height="15" align="top" class="arrow" name="arrow_nuevo" id="arrow_nuevo" onClick="javascript:showMenu('menu_arrow_nuevo','nuevo','arrow_nuevo')" onmouseup="javascript:swapImage(1,'arrow_nuevo')" onmouseover="javascript:swapImage(0,'arrow_nuevo')" onmouseout="javascript:swapImage(2,'arrow_nuevo')"/>
</span>
<div class="sub_menu" id="menu_arrow_nuevo">
                 <a href="addNew?q=movie" title="Pel&iacute;cula">Pel&iacute;cula</a>
                 <a href="addNew?q=artista" title="Artista Musical">Artista Musical</a>
      <hr />
                 <a href="index.html">Art&iacute;culo</a>
</div>
      </li>
</div

la función showMenu(), muestra y oculta el al hacer click sobre el, pero necesito que el menú se cierre, incluso si hago click fuera de el, o sea en el sitio web en si, tal como lo hacen los menús desplegables de google y flickr...

gracias

Quien me puede ayudar?

Gracias

Genera dos clases en CSS, una que se llame ON y otra OFF, por ejemplo. Donde la clase ON hace visible al tag y la clase OFF lo oculta.
Luego, con JS le dices que cuando el mouse este sobre "cierto tag" modifike la clase CSS de "otro tag o el mismo" (esto ya depende de ti), y cuando este fuera de "cierto tag" modifike la clase CSS a OFF para que lo oculte.

Espero lo entiendas

Gracias eseceve, pero el tema es que no necesito que esté sobre otro tag u otro objeto, solo necesito que cuando el usuario haga click fuera del menú desplegable se cierre este...

al parecer existe una función con javascript, algo así somo window.event? y no sé que mas

y si juegas con onmouseout="ocultar_vid()" con el div?

Código HTML :

<div id="submenu" onmouseout="ocultar_div()" >Sub menu</div>

y javascript algo como:

Código Javascript :

function ocultar_div() {
document.getElementById("submenu").style["display"] = "none";
}

Un menu desplegable generalmente se borra cuando quitas el mouse de encima.
¿Tienes un ejemplo de un menu como el que tú dices? no entiendo muy bien a que te refieres..

ivanfc0o

una ruta para ver algún menú sería el de flickr o el de google, (donde dice Más). Todos esos menús, al hacer click fuera de el, se cierran.

Mmm.. entiendo.
Supongo que hay que útilizar blur() y focus(). Ando apurado pero te crearé un ejemplo básico para que partas desde ahí.

html:

Código HTML :

<div id="menu">menu</div>
<div id="submenu">submenu</div>

Javascript:

Código Javascript :

var elem = document.getElementById("menu");
var elemSM = document.getElementById("submenu");
// Al hacer click en menu ejecutamos lo siguiente..
      eventoStandar(elem, "click", function(){
            elemSM.style["display"]="block"; // aparecemos el menu
            elem.focus(); // le aplicamos focus para saber que está activo
      });
eventoStandar(elem, "blur", function(){
            elemSM.style["display"]="none"; // ocultamos el submenu
      });

La función eventoStandar(elemento, evento, funcion) es la solución cross-browser para addEventListener ya que nuestro adorado IE maneja attachEvent. te dejo la funcion que yo use y más información sobre esto en este enlace:

Código Javascript :

function eventoStandar(elemento, evento, funcion) {
      if (elemento.addEventListener) {
            elemento.addEventListener(evento, funcion, false);
      } else {
            elemento.attachEvent("on" + evento, funcion);
      }
}

Espero te sirva, cualquier cosa aca andamos. Saludos.

Compadre, aún sigo sin entender
hice tal y como me lo dijiste pero aún no funciona....

De veras que aún no puedo encontrar el error...

Emm.. prueba así:

Javascript

Código Javascript :

// Ejecutamos al cargar todo los elementos
eventoStandar(window, "load", menu_desplegable);

function eventoStandar(elemento, evento, funcion) { 
      if (elemento.addEventListener) { 
            elemento.addEventListener(evento, funcion, false); 
      } else { 
            elemento.attachEvent("on" + evento, funcion); 
      } 
} 


function menu_desplegable () {
//############### CODIGO ANTERIOR
var elem = document.getElementById("menu"); 
var elemSM = document.getElementById("submenu"); 
// Al hacer click en menu ejecutamos lo siguiente.. 
      eventoStandar(elem, "click", function(){ 
            elemSM.style["display"]="block"; // aparecemos el submenu 
            elem.focus(); // le aplicamos focus para saber que está activo 
      }); 
eventoStandar(elem, "blur", function(){ 
            elemSM.style["display"]="none"; // ocultamos el submenu 
      }); 
//############### CODIGO ANTERIOR FIN
}

HTML

Código HTML :

<div id="menu">menu</div> 
<div id="submenu" style="display: none;">submenu</div>
<!-- hay que ocultar el submenu, por cierto. ## Display: none; ## -->

Sólo agregué el código que te dí en una función y la ejecuto al cargar todos los elementos con eventoStandar(window, "load", menu_desplegable);

Debería funcionarte, si no, dices y veremos que hacer, quizás hay un bug que se me escapa.

ivanfc0o
y no se oculta al hacer click fuera del div

Que pasará?

no ocurre lo que quería que hiciera....ocultarse al hacer click fuera del submenú.

Tienes razón, lo probé con opera y funciono pero ahora que lo pruebo con Firefox no anda. El asunto es que los div -al parecer- tienen un problema con onblur. Onblur es usado más que nada para elementos de formularios.

Según investigué se resuelve agregando tabindex:

Código :

<div id="menu" tabindex="-1">menu</div>  
<div id="submenu" style="display: none;">submenu</div>

Ya lo probé en firefox y funciona perfectamente.. peeeeeero, la mala noticia es que tabindex no es un atributo correcto para un div. Si encuentras otra solución más "válida" compartela aquí, realmente me interesa.

Saludos.

Oka, gracias lo probaré...

Pero los menús de google, flickr o cualquier otro que se cierre al hacer click fuera de el Usarán tabindex como último recurso?

Si encuentro algo nuevo, no dudes que lo haré....

adiazm, se me acaba de ocurrir algo..

Despues de revisar el estrujado código de Google me di cuenta que NO usa tabindex. Ni siquiera útiliza un focus(); en un div cómo estoy empeñado en hacerlo. Te dejó la solución definitiva.

el código javascript es exactamente como te lo dí, ese nos servirá:

Javascript:

Código Javascript :

// Ejecutamos al cargar todo los elementos 
eventoStandar(window, "load", menu_desplegable); 
 
function eventoStandar(elemento, evento, funcion) {  
      if (elemento.addEventListener) {  
            elemento.addEventListener(evento, funcion, false);  
      } else {  
            elemento.attachEvent("on" + evento, funcion);  
      }  
}  
 
 
function menu_desplegable () { 
//############### CODIGO ANTERIOR 
var elem = document.getElementById("menu");  
var elemSM = document.getElementById("submenu");  
// Al hacer click en menu ejecutamos lo siguiente..  
      eventoStandar(elem, "click", function(){  
            elemSM.style["display"]="block"; // aparecemos el submenu  
            elem.focus(); // le aplicamos focus para saber que está activo  
      });  
eventoStandar(elem, "blur", function(){  
            elemSM.style["display"]="none"; // ocultamos el submenu  
      });  
//############### CODIGO ANTERIOR FIN 
}

HTML:

Código HTML :

<div><a href="#" id="menu">menu</a></div>  
<div id="submenu" style="display: none;">submenu</div> 
<!-- hay que ocultar el submenu, por cierto. ## Display: none; ## --> 

La clave es agregarle el focus y el blur a una etiqueta <a> y NO al div, estuve mál desde el principio.
Aquí está un ejemplo que hice rapido.

Saludos.

ivanfc0o, te pasaste!!..está todo bien, exceptuando una cosa....cuando quiero hacer click sobre un vínculo que está en el div oculto se cierra igual el div y no deja seleccionarlo para ir a la URL.


Que haríamos en ese caso??

adiazm escribió:

re plantea tu menu!!! mira el codigo fuente de Clab y aprenderas que con Jquery y CSS podras hacer un menu que desaparece cuando te sales!

PD: F no me odies por enviar alguien a ver tu codigo!

jpcw, Lo tengo claro, pero el tema es que quiero terminar con la opción de ivanfc0o...

Me pareció muy llamativa y por eso me interesa saber si puede terminar este código

adiazm escribió:

Crap, es verdad.. pequeño detalle.

No sé de que manera lo hará google pero una manera rapida que se me ocurrio fué jugar con una variable para detectar estado y dependiendo al valor decir que hacer.

Código Javascript :

var ac = 0;

Entonces.. el nuevo código será el siguiente:

Código Javascript :

eventoStandar(window, "load", menu_desplegable);  
  
function eventoStandar(elemento, evento, funcion) {   
      if (elemento.addEventListener) {   
            elemento.addEventListener(evento, funcion, false);   
      } else {   
            elemento.attachEvent("on" + evento, funcion);   
      }   
}   

function menu_desplegable () {  
var elem = document.getElementById("menu");   
var elemSM = document.getElementById("submenu"); 
// Definimos la variable
var ac = 0;
// Despues obtenemos todos los elementos con el tag <a> del submenu
var smlinks = elemSM.getElementsByTagName("A"); // <-- Me devolvera un array
// Recorremos todos los elementos del array y le definimos 2 eventos a cada uno
// es equivalente a que le pusieramos los atributos onmousedown y onclick a cada una de las etiquetas <a>
// lo haré directo con javascript para automatizar en caso de ser muchos enlaces
for (var i=0; i<smlinks.length; i++) {
      // vas a dar click así que cambiamos el valor de ac. Más abajo sabras para que..
      eventoStandar(smlinks[i], "mousedown", function() { ac = 1;  }); 
     // Esto es un evento "Extra", ocultamos el menu después de dar click
     // Es opcional pero hará el menú más flexible en caso de que los enlaces se carguen de form asicrona
      eventoStandar(smlinks[i], "click", function() { elemSM.style["display"]="none"; });
}
      eventoStandar(elem, "click", function(){
           /* 
              las acciones que se ejecutan en este evento son fácil de entender
            */
            if(ac==1){ 
            elemSM.style["display"]="none"; 
            ac=0; elem.href="#"; 
            // elem.href="#" es para un pequeño problemita que tiene IE. algún byte extra pero no importa
            return false; 
            } else {
            elemSM.style["display"]="block"; // aparecemos el submenu
            ac=0; 
            return false;
            }
      });   
eventoStandar(elem, "blur", function(){ 
          /* 
            Aquí verificamos la variable ac:
            Si no es igual a 0 significa que se usará el submenu y no lo ocultamos.
           */ 
              if(ac==0){  
              elemSM.style["display"]="none"; // ocultamos el submenu
              } else { menu = 0; }
      });
} 

Sólo explique lo nuevo. Aquí tienes el ejemplo de como quedo.

Creo que con jquery nos ahorrariamos código pero no hay que atenerse a él.
UFFFFFFF!!

Saludos, adiazm.

ivanfc0o, te pasaste compadre!!.........

con este código, ya estamos listos para agregarlo a cualquier menú desplegable...... igual veré la posibilidad de si se puede optimizar aún mas, pero tal como está, funciona de maravilla.


Muuuuchas gracias!.

@ivanfc0o: que bien creo que deberias hacer un tip de esto, seguro te seria aceptado!

jpcw escribió:

Es buena idea, de hecho estoy trabajando en un tip pero referente a otra cosa; sólo deja lo termino y me dedicaré a perfeccionar este menú y hacerlo tip también. Es un menú realmente útil.

adiazm escribió:

you're welcome!

hey recientemente estaba trabajando sobre algo como esto, soy nuevo, aqui asi q aqui te dejo un ejemplo de como hize yo algo parecido, sin mucho codigo script, y utilizando div y estilos realmente no es dificil aqui te dejo el codigo completo
que tengo va? haber si te sirve de algo

Código :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


  

<script>

function mostrardiv() {

div = document.getElementById('flotante');

div.style.display = '';

}

function cerrar() {

div = document.getElementById('flotante');

div.style.display='none';

}

</script>


<style type="text/css">
<!--
#flotante {
   position:absolute;
   left:373px;
   top:149px;
   width:237px;
   height:300;
   z-index:1;
}
.style1 {
   font-size: 36px;
   font-weight: bold;
   color: #FFFFFF;
}
.style2 {color: #000000}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>



<a href="javascript:mostrardiv();">Mostrar Menu</a>

<div id="flotante" style="display:none;">
  <table width="244" border="0">
    <tr>
      <td width="105">&nbsp;</td>
      <td width="129"><div align="center" class="style1"><a href="javascript:cerrar();" class="style1 style2">cerrarx</a></td>
    </tr>
    <tr>
      <td height="300" colspan="2"><p>contenido</p>
      <p>contenido</p>
      <p>contenido</p>
      <p>contenido</p>
      <p>contenido</p>
      <p>contenido</p></td>
    </tr>
  </table>
</div>

</body>

</html>

gracias.....pero no es lo que buscaba....