0

Similar to: How to Display Selected Item in Bootstrap Button Dropdown Title

I have a two-level bootstrap menu. I would like when a item is selected and navigated to, that that the drop down list from where the item is, to be always be displayed. Here is my cut down version of the code:

<ul class="menu-system">
<li class="active">
<a href="#">Location</a>
</li>
<li class="dropdown">
    <a href="#" class="dropdown-toggle menu-item" data-toggle="dropdown"> Top level Option 1</a>
    <ul class="dropdown-menu">
        <li><a href="#"> Option 1</a></li>
        <li><a href="#"> Option 2</a></li>
        <li><a href="#"> Option 3</a></li>
        <li><a href="#"> Option 4</a></li>
    </ul>
</li>

Example: When the Top level Option 1> Option 1 page is active I would like to show the drop down menu. What it does at the moment is only display the top level menu. Since its a bootstrap drop down it will shown by default which is the correct way a drop down menu should work. Not sure if I can make it be shown dynamically. This should always been shown regardless if a user clicks off it or anything else on that page.

I am working in an ASP.NET application. I'm not sure that is has to do with the active tag, or if I have to write some javascript/jquery code to get the current page and display the appropriate drop down menu.

Any help greatly appreciated.

JSFiddle: jsfiddle.net/yZ8C6

Community
  • 1
  • 1
dannmate
  • 106
  • 3
  • 12
  • Can you create a http://jsfiddle.net of your problem? It will make it easier to work on... – Beno Aug 01 '13 at 06:00
  • http://jsfiddle.net/yZ8C6/ - The CSS is just a default one, not the actual CSS on my site. But the functionality is the same. – dannmate Aug 01 '13 at 06:12

1 Answers1

1

Right, I'll preface this by saying that I couldn't get it to work properly in jsfiddle because it doesn't reload the page when the named links are clicked however, I believe this should help

$('.dropdown-menu li a').each(function() {
    if($(location).attr('href').indexOf($(this).attr('href')) > 0) {
         $('.dropdown-menu').show();
    } 
});

So what we're doing here is checking the link href on each list item and checking if it is contained within the page link. If any of them are matched, the dropdown will be set to show. Since bootstrap uses visibility and show() uses display:block, the show() should override the visibility: hidden when you stop hovering

See how you go - you might need to modify it slightly for your own purpose

http://jsfiddle.net/yZ8C6/1/

You can get the fiddle to work if you click one of the links then reload the output frame only

Beno
  • 4,633
  • 1
  • 27
  • 26
  • Will give it a go today, your answer seems very logical but I will have to tweak it a little bit like you said. – dannmate Aug 01 '13 at 22:57
  • What is the point of the else statement to se the visibility to visible? I have an issue where I have multiple drop down menus in my menu and I have successfully coded to show each one individually based on your code :). But I still want the functionality of the menu when you click the another drop down menu, the fixed one that we just shown should disappear and the other one should show accordingly only on menu clicks. Because at the moment they are overlapping each other. – dannmate Aug 02 '13 at 00:39
  • You are right - there is no point. I'll edit the answer. I had it in there originally but forgot to take it out – Beno Aug 02 '13 at 00:41
  • Any light you could shed on the issue that I said would be great. – dannmate Aug 02 '13 at 00:43
  • Sorry, can you create another jsfiddle based on where you are at? – Beno Aug 02 '13 at 00:50
  • Yes sorry - It obv wont work in jsfiddle because it doesnt reload, but you will definitely understand the issue with the comments in code. http://jsfiddle.net/yZ8C6/2/. The code will actually work without the jquery.each function. – dannmate Aug 02 '13 at 01:03
  • cleaner way of doing the same thing with your approach - http://jsfiddle.net/yZ8C6/4/ – dannmate Aug 02 '13 at 01:11
  • you could add this in when loading the page: `$('.menu-2').css({ 'z-index' : -100});` it will send the persistant menu to the back so all the others will display on top of it. The only other problem I see is if you have the first menu open, you can get to the second menu at all. Have you thought about that scenario? http://jsfiddle.net/yZ8C6/5/ – Beno Aug 02 '13 at 01:19
  • I figured it out, I just used show(); and hide(); appropriately for each menu item click. Thanks for your help, +repped etc. – dannmate Aug 02 '13 at 01:30