Access the jsfiddle for more information. Have a look at these questions:
In my dropdown menu, I have included a search box and multiple sub-menus. However, the search box only filters the first dropdown menu and does not work with the sub-menus. How can I make the search box filter all sub-menus and display their parent as shown in this image? https://i.sstatic.net/oloNY.jpg
How can I add a scroll bar to my dropdown menu? I tried using
overflow: autoin CSS but it made my dropdown submenu invisible like in this picture. https://i.sstatic.net/Y9NLi.jpgIs there a way to keep the dropdown submenus always on top, aligned with their respective parents? Thank you very much for your help. I am currently using bootstrap 3.3.5.
Here is the HTML code:
<nav class="navbar navbar-default navbar-fixed-top">
<!-- 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"gt;
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
... (omitted for brevity)
...
And the equivalent CSS code:
... (CSS code omitted for brevity)Lastly, don't forget the JavaScript component:
$("#search-criteria").on("keyup", function () {
var g = $(this).val().toLowerCase();
$(".menu").each(function () {
var s = $(this).text().toLowerCase();
$(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
});