I have a multi-level menu in a project based in Bootstrap and jQuery. Everything works fine except one thing: When a menu item is placed too much on the right, it's sub-menus exceed the page and are not readable (as shown on the screenshot taken from jsFiddle):
Is there a way to detect if a submenu (when opened) exceeds the page limit, and if it does, to be placed on the other side of it's parent element?
My code so far is:
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO HERE!</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Categories</a></li>
<li><a href="#">Blog Post</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Search Engines</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Google</a>
<ul class="dropdown-menu">
<li><a href="https://adwords.google.com" target="_blank">Google Adwords</a></li>
<li><a href="https://analytics.google.com" target="_blank">Google Analytics</a></li>
<li><a href="https://www.google.com/webmaster/" target="_blank">Webmaster Tools</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">All Tags</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
CSS:
.dropdown-menu>li>a:hover{
background-color:rgba(216,216,216,1);
background-image:none;
color:#000;
}
.divider{
background-color:#fff;
}
.dropdown-submenu{
position:relative;
}
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
display:block;
content: " ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style: solid;
border-width:5px 0 5px 5px;
border-left-color: #cccccc;
margin-top:5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after{
border-left-color: #555;
}
.dropdown-submenu.pull-left{
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu{
left:100%;
margin-left:1-0px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
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');
}
});
Test fiddle here: https://jsfiddle.net/311mcf23/
Any help will be appreciated.
