In my project utilizing Bootstrap and jQuery, I have implemented a multi-level menu. While everything functions correctly, there is one issue - when a menu item is placed too far to the right, its sub-menus extend beyond the page and become unreadable (as shown in the screenshot captured from jsFiddle):
https://i.sstatic.net/cQgFj.png
I am seeking a solution to detect if a submenu extends beyond the page limit when it is opened. If this occurs, is there a way for the submenu to be positioned on the opposite side of its parent element?
Presently, my code looks like this:
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Code snippets shortened for brevity -->
</nav>
CSS:
.dropdown-menu>li>a:hover{
background-color:rgba(216,216,216,1);
<!-- Additional CSS styles listed in the original text are omitted here -->
}
JS:
$(document).ready(function(){
$('a[data-toggle=dropdown]').on('click', function(e){
//$(this).next('ul').show();
//console.log('click');
e.stopPropagation();
e.preventDefault();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
if($('.dropdown-menu').hasClass('open')){
console.log('visible');
}
});
For further exploration and testing, you can access the fiddle here: https://jsfiddle.net/311mcf23/
Any assistance or insights on resolving this issue would be greatly appreciated.