Detectando Div Div.

Question

Codifiqué el menú desplegable a través de javascript (w/jQuery) y CSS. El menú desplegable funciona bien pero si el menú desplegable se encuentra en la esquina, por ejemplo, la derecha o la izquierda de la pantalla del usuario, si el usuario abre el menú desplegable, se desborda para dejar de ver el área de la ventana y provoca una barra de desplazamiento horizontal.

¿Cómo puedo dejar de desbordar?

HTML

<ul class="dropdown"> 
    <li class="headlink"> 
     <a href="javascript://">Menu</a> <img src="/static/images/mini/sort_down.png" /> 

     <ul class="arrowlist invisible"> 
      <li>Hello 1</li> 
      <li>Hello 2</li> 
      <li>Hello 3</li> 
     </ul> 
    </li> 
</ul> 

CSS

.dropdown {z-index: 1} 
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;} 
.dropdown li{} 
.dropdown a{outline:none} 
.dropdown ul{z-index:100;border:1px solid #C7C9CF;-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;behavior: url(/static/css3pie.php);background: #FFF url("/static/images/grey_fade_back.png") repeat-x scroll bottom;padding:8px;position:absolute;top:-1px;left:-4px} 
.dropdown ul li{margin:2px;white-space:nowrap} 

JS

$('.dropdown li.headlink') 
    .click(function() { 
     $(this).css('position', 'relative'); 
     $('ul', this).slideDown(100); 
    }); 

     $('.dropdown li.headlink') 
    .mouseleave(function(){ 
     var headlink = this; 
     $('ul', this).slideUp(100, function(){ 
      $(headlink).css('position', 'static'); 
     }) 
    }); 

Answer 1

he encontrado una solución:

$('.dropdown li.headlink') 
    .click(function() { 
     $(this).css('position', 'relative'); 

     if($('ul', this).width() + 10 > $(window).width() - $(this).offset().left) $('ul', this).css('left', 'auto').css('right', '-1px'); 
     else $('ul', this).css('left', '-4px').css('right', 'auto'); 

     $('ul', this).slideDown(80); 
    }); 

Answer 2

Creo que puede que tenga que almacenar en un var el HEIG Ingrese el px de su menú desplegable y verifique su desplazamiento y. Esta publicación podría orientarlo en la dirección correcta How to see if an element in offscreen Ojalá pudiera proporcionarle un código de trabajo.

Answer 3

probar este

reemplazar:

.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px} 

con

.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;position:relative} 

y reemplace

.dropdown ul { 
    z-index:100; 
    border:1px solid #C7C9CF; 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    border-radius:4px; 
    behavior:url(/static/css3pie.php); 
    background:#FFF url(/static/images/grey_fade_back.png) repeat-x scroll bottom; 
    position:absolute; 
    top:-1px; 
    left:-4px; 
    padding:8px; 
} 

con

.dropdown ul { 
    z-index:100; 
    border:1px solid #C7C9CF; 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    border-radius:4px; 
    behavior:url(/static/css3pie.php); 
    background:#FFF url(/static/images/grey_fade_back.png) repeat-x scroll bottom; 
    position:absolute; 
    left:-4px; 
    padding:8px; 
} 

creo que sirve

Answer 4

La solución general a un problema como este es que, ya sea usando CSS o JavaScript, añadir una clase al primer o último elemento del menú desplegable para que sea la alineación se corrige. En este caso específico, con el posicionamiento absoluto, cambiar la propiedad left y right debería ser suficiente.

Un ejemplo simple, cuando el menú está alineado a la derecha y el menú desplegable a la derecha sobresale de la pantalla, es agregar una clase con JavaScript que cambiará el menú del alineado al lado izquierdo del menú elemento hacia la derecha:

.dropdown ul { 
    left: 0; 
} 

.dropdown ul.last { 
    right: 0; 
    left: auto; 
} 

una simple demostración de esto se puede encontrar aquí: http://www.jsfiddle.net/yijiang/HyXuy/1/