In this tutorial, We will implement collapsing responsive navigation bar using ASP.NET menu control and Twitter Bootstrap. Lets start with the default view of ASP.NET Menu control as follows:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem Text="Home" ToolTip="Home"> </asp:MenuItem> <asp:MenuItem Text="Music" ToolTip="Music"> <asp:MenuItem Text="Classical" ToolTip="Classical" /> <asp:MenuItem Text="Rock" ToolTip="Rock" /> <asp:MenuItem Text="Jazz" ToolTip="Jazz" /> </asp:MenuItem> <asp:MenuItem Text="Movies" ToolTip="Movies"> <asp:MenuItem Text="Action" ToolTip="Action" /> <asp:MenuItem Text="Drama" ToolTip="Drama" /> <asp:MenuItem Text="Musical" ToolTip="Musical" /> </asp:MenuItem> </Items> </asp:Menu>
1. We will update the default UI using bootstrap framework as in above image. To install Bootstrap, run the following command in the Package Manager Console:
Install-Package Twitter.Bootstrap
2. Add bootstrap CSS files in the page
<link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="Content/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .nav { width:100%; padding-left:15px; } </style>
3. I like fixed top navigation bar, so we assign “navbar navbar-fixed-top” to menu control css class.
CssClass=”navbar navbar-fixed-top”
4. For list, use nav class to list
StaticMenuStyle-CssClass= “nav”
5. For active item, use activeclass
StaticSelectedStyle-CssClass=”active”
6. To display sub-menu as dynamic dropdown, we use dropdown-menu class
DynamicMenuStyle-CssClass=”dropdown-menu”
Now we get the layout as in the top image and the code looks as follows
<asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" CssClass="navbar navbar-fixed-top" StaticMenuStyle-CssClass= "nav" StaticSelectedStyle-CssClass="active" DynamicMenuStyle-CssClass="dropdown-menu" > <Items> <!-- menu items --> </Items> </asp:Menu>
Responsive Menu:
For background image and proper layout we put the menu in div (navbar > navbar-inner > container).
To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
<div class="navbar"> <div class="navbar-inner"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <!-- Everything you want hidden at 940px or less, place within here --> <div class="nav-collapse collapse"> <asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" CssClass="navbar navbar-fixed-top" StaticMenuStyle-CssClass="nav" StaticSelectedStyle-CssClass="active" DynamicMenuStyle-CssClass="dropdown-menu"> <Items> <asp:MenuItem Text="Home" ToolTip="Home"></asp:MenuItem> <asp:MenuItem Text="Music" ToolTip="Music"> <asp:MenuItem Text="Classical" ToolTip="Classical" /> <asp:MenuItem Text="Rock" ToolTip="Rock" /> <asp:MenuItem Text="Jazz" ToolTip="Jazz" /> </asp:MenuItem> <asp:MenuItem Text="Movies" ToolTip="Movies"> <asp:MenuItem Text="Action" ToolTip="Action" /> <asp:MenuItem Text="Drama" ToolTip="Drama" /> <asp:MenuItem Text="Musical" ToolTip="Musical" /> </asp:MenuItem> </Items> </asp:Menu> </div> </div> </div> </div>
ASP.NET Menu creates its own styles and classes which creates problem in Bootstrap working. So we remove some styles using jQuery.
$(".nav li,.nav li a,.nav li ul").removeAttr('style');
To add down arrow for sub-menu indication:
$(".dropdown-menu").parent().removeClass().addClass('dropdown'); $(".dropdown>a").removeClass().addClass('dropdown-toggle').append('<b class="caret"></b>').attr('data-toggle', 'dropdown');
There is no mouseover event for mobile and onclick of ASP.NET menu causes postback. To avoid postback and remove click handler:
$('.dropdown-toggle').attr('onclick', '').off('click');
Now on clicking parent menu item, sub menu will be displayed.
Here is the overall script structure:
<script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //to fix collapse mode width issue $(".nav li,.nav li a,.nav li ul").removeAttr('style'); //for dropdown menu $(".dropdown-menu").parent().removeClass().addClass('dropdown'); $(".dropdown>a").removeClass().addClass('dropdown-toggle').append('<b class="caret"></b>').attr('data-toggle', 'dropdown'); //remove default click redirect effect $('.dropdown-toggle').attr('onclick', '').off('click'); }); </script> <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
Hope, you enjoy it.
I’ve Trouble with the Bootsrap Framework. I use a css grid and wehen i try you code, then the menu bar is invisible. Any Ideas?
I was able to find good information from your blog articles.
May I know how to do the third level? How to remove the default setting for third level style of asp menu? Thank you.
May I know if I have third level of menu, what is the javascript I should write?
$(“.dropdown-menu”).parent().removeClass().addClass(‘dropdown’);
$(“.dropdown>a”).removeClass().addClass(‘dropdown-toggle’).append(‘‘).attr(‘data-toggle’, ‘dropdown’);
This is just for second level of the menu. Anyone can help?
Thank you.
When I implement this all I get is my menus disappear…any help please?
I am using Visual Studio 2015 with bootstrap 3.5
use this one https://www.aspsnippets.com/Articles/Bootstrap-Responsive-ASPNet-Menu-control-for-Mobile-Phone-Tablet-and-Desktop-display.aspx
and replace $(function () code with code given here in techbrij.com
thin it will work
How to make Sub Menus open by Click and not Mouse hovering?
mouse hover is event before click..
//Disable the default MouseOver functionality of ASP.Net Menu control.
Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
return false;
};
This is exactly what I was looking for.. but does it matter what version of ASP.NET and Bootstrap this is done on? I have Bootstrap 3.2, JQuery 1.10.2 and compiling on an old ASP.NET 2.0 project and I’m not getting the same results.
can you implement it with bootstrap 3.2
Brij, I utilized your advice to update my front page, however i didn’t get the result I was expecting.
For starters my font size are too small and my entire menu bar and the items are missing.
Below is before and after images:
Before Image:
Couldn’t paste image
After:
After Master Page:
Couldn’t paste image
– Ops Dev
<%—-%>
Register
Log in
My Profile
Hello,
!
© – Operations Service Desk Portal
$(function ()
{
//to fix collapse mode width issue
$(“.nav li,.nav li a,.nav li ul”).removeAttr(‘style’);
//for dropdown menu
$(“.dropdown-menu”).parent().removeClass().addClass(‘dropdown’);
$(“.dropdown>a”).removeClass().addClass(‘dropdown-toggle’).append(‘‘).attr(‘data-toggle’, ‘dropdown’);
//remove default click redirect effect
$(‘.dropdown-toggle’).attr(‘onclick’, ”).off(‘click’);
});
Hi, I have @randyansems:disqus problem, I’ve used the same tutorial code & mine, and Have the same problem, menu disappear, If any help available would be much appreciated…
When I implement this all I get is my menus disappear…any follow up or help available?
Hi, how to integrate the search box into the nav bar?? Thanks
Any updates to these great examples with Bootstrap 3.0?
I do not get backgrounds of menu.. The menu looks like links.