Bootstrap and ASP.NET Menus

Question

I am creating a navigation bar in my ASP.NET web application and I am using bootstrap-3.1.1 . In particular, I am trying to use my navigation tabs as shown here . I have done a lot of research on this issue, in the past I was also not successful with such a scenario. I used this link for reference as it performs a very similar task, but my application displays unexpected results. I understand that the previous Twitter link is Bootstrap, but I would believe that the behavior would be similar, if not identical.

I have an ASP menu, as shown below, which displays the items that I added in the desired way. I set StaticMenuStyle and StaticSelectedStyle with the corresponding classes. I also tried many different permutations of these classes without success.

Here is my ASP.net code:

 <asp:Menu ID="NavBar" runat="server" role="tablist" StaticSubMenuIndent="16px" RenderingMode="List" CssClass="nav nav-tabs nav-justified" Orientation="Horizontal"> <Items> <asp:MenuItem Text="Home" Value="Home" Selected="True"></asp:MenuItem> <asp:MenuItem Text="Generation" Value="Generation"></asp:MenuItem> <asp:MenuItem Text="Loads" Value="Loads"></asp:MenuItem> <asp:MenuItem Text="Tie Line Metering" Value="Tie Line Metering"></asp:MenuItem> <asp:MenuItem Text="About" Value="About"></asp:MenuItem> </Items> <StaticMenuStyle CssClass="nav nav-tabs nav-justified" /> <StaticSelectedStyle CssClass="active" /> </asp:Menu> 

I have all the <link> and <script> that were included to bootstrap, and I know this because I can create a version of the navigation menu with bare bones, and it works great. The only thing that doesn't work is the "active" tab. The short-angle code for a list without an ASP menu is as follows:

 <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="active"><a>Home</a></li> <li><a>About</a></li> </ul> 

The only thing that does not work with <asp:Menu> is that the corresponding "active" style style class does not apply to <li> elements. Instead, when the button is clicked, the 'selected' class is applied to the anchor ( <a> ) <a> in the <li> element. The specified behavior is shown here with the Home item selected. Also, when using the developer tools in chrome, I can manually add the <li> element to the "active" CSS class, and it behaves correctly.

I also have two jQuery lines that remove the erroneous class attributes in the menu that cause unwanted results that are automatically inserted by ASP. It:

 <script type="text/javascript"> $("#NavBar ul, #NavBar ul li, #NavBar ul li a").removeClass('level1 static'); $("#NavBar, #NavBar ul, #NavBar ul li").removeAttr('style'); </script> 

Sorry for the long post, but I hope I articulated my problem well.

Answer 1

I think you can do this to add the 'selected' class to the li parent:

 $('#NavBar ul li a.selected').parent().addClass('selected'); 

And remove the class 'selected' from a-element as the second line:

 $('#NavBar ul li a.selected').removeClass('selected'); 

Answer 2

I ran into the same problem and solved it as follows:

 $(function () { var menu = $('#NavBar'); // Fixes for the aspMenu so that it will work with our bootstrap implementation menu.find('ul')[0].style = ''; // clear the asp menu inline styling menu.find('ul')[0].className = menu[0].className; // The class name needs to be on the first ul element not the container div menu.find('li.static').removeClass('static'); // remove the extraneous class menu.find('li.has-popup').addClass('dropdown') // add the dropdown class to the popup menus .find('> ul').addClass('dropdown-menu').attr('style', 'display: none'); // add the appropriate class, and overwrite the extraneous inline styling // No styling is required on the container div menu[0].style = ''; menu[0].className = ''; }); 

Hope that helps :)