Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I finally got the following to work:</p> <pre><code>function adjustSubMenus() { var menus = $('#navbar').find('.subMenu'); menus.each(function(){ $(this).css("left",""); adjustSingleMenu($(this)) } ); } function adjustSingleMenu(element) { element.show(); var thisMenuWidth = element.outerWidth(); var thisMenuPos = element.offset(); var diff = (thisMenuWidth + thisMenuPos.left) - window.outerWidth; if(diff &gt; 0) { element.css("left", function() { return thisMenuPos.left - diff; }); } element.hide(); } $('body').ready(function() { $(window).resize(adjustSubMenus()); if(window.outerWidth &lt;= 720) { $('html').mousedown(function() { $('#navbar').find('.subMenu').each(function(index) { if($(this).is(":visible") ) { $(this).css("left",""); $(this).hide(); } } ); }); $('#navbar').mousedown(function(event) { event.stopPropagation(); }); $('.dropdown').mousedown(function() { var ele = $(this).find('.subMenu'); $('#navbar').find('.subMenu').each(function(index) { if(!$(this).is(ele) &amp;&amp; $(this).is(":visible") ) { $(this).css("left",""); $(this).hide(); } } ); if(ele.is(":visible")) { ele.css("left",""); ele.hide(); } else { adjustSingleMenu(ele); ele.show(); } }); } else { $('.dropdown').hover( function() { $(this).find('.subMenu').stop(true,true).slideDown("fast"); }, function() { $(this).find('.subMenu').stop(true,true).hide(); } ); } }); </code></pre> <p>The only minor caveat is that if you have a menu open as you change the orientation of the phone, the menu may appear off the screen. Closing and reopening the menu will fix this issue. Everything else works perfectly.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload