He usado el siguiente código jQuery para detener el menú desplegable que sale del encabezado. y funciona bien en la versión LTR normal.
pero quiero una solución para la versión RTL. ¿Cómo puedo hacerlo?
jQuery
$('.primary-menu .dropdown-menu').each(function() { var menu = $('#header .header-row').offset(); var dropdown = $(this).parent().offset(); var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#header .header-row').outerWidth()); if (i > 0) { $(this).css('margin-left', '-' + (i) + 'px'); } });HTML
<header id="header"> <div class="container"> <div class="header-row"> <div class="header-column justify-content-start"> <div class="logo me-3"> ..... </div> <!-- Primary Navigation ============================== --> <nav class="primary-menu navbar navbar-expand-lg"> <div id="header-nav" class="collapse navbar-collapse"> <ul class="navbar-nav me-auto"> <li><a href="#">Link</a></li> <li><a href="#">Link 2</a></li> <li class="dropdown dropdown-mega"> <a class="dropdown-toggle" href="#">Pages</a> <ul class="dropdown-menu"> <li> <div class="dropdown-mega-content"> ........ </div> </li> </ul> </li> </ul> </div> </nav> <!-- Primary Navigation end --> </div> </div> </div>He intentado debajo de algo, pero esto no funciona.
$('.primary-menu .dropdown-menu').each(function() { var menu = $('#header .header-row').offset(); var dropdown = $(this).parent().offset(); var i = (dropdown.right + $(this).outerWidth()) - (menu.right + $('#header .header-row').outerWidth()); if (i > 0) { $(this).css('margin-right', '-' + (i) + 'px'); } });El desplazamiento a la derecha es: window's width - ( element left offset + element outer width)
Entonces, he encontrado la solución final:
$('.primary-menu .dropdown-menu').each(function() { var menu = $('#header .header-row').offset(); var dropdown = $(this).parent().offset(); var rightMenu = ($(window).width() - (menu.left + $('#header .header-row').outerWidth())); var rightDropdown = ($(window).width() - (dropdown.left + $(this).parent().outerWidth())); var i = (rightDropdown + $(this).outerWidth()) - (rightMenu + $('#header .header-row').outerWidth()); if (i > 0) { $(this).css('margin-right', '-' + (i) + 'px'); } });