How to Use Twitter Bootstrap to Create Responsive Menu in ASP.NET

In this tutorial, we will create collapsing responsive navigation bar using ASP.NET menu control and Twitter Bootstrap. Let’s start with the default view of ASP.NET Menu control as follows:

11

In the picture above, we will change the default of ASP.NET Menu into responsive using Twitter Bootstrap.

Step 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

Step 2

Add bootstrap CSS files in the page:

hfl-new-banner

Step 3

As example, we liked to fix top navigation bar, so we assign “navbar navbar-fixed-top” to menu control css class:

CssClass=”navbar navbar-fixed-top”

Step 4

For list, use nav class to list:

StaticMenuStyle-CssClass= “nav”

Step 5

For active item, use activeclass

StaticSelectedStyle-CssClass=”active”

Step 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:

Step 7

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.

Step 8

ASP.NET Menu creates its own styles and classes which creates problem in Bootstrap working. So, we remove some styles using jQuery:

To add down arrow for sub-menu indication:

Step 9

There is no mouseover event for mobile and onclick of ASP.NET menu causes postback. To avoid postback and remove click handler:

Now on clicking parent menu item, sub menu will be displayed!

Here is the overall script structure:

And here is the ouput:

responsive-menu2

ASP.NET 4.6 Hosting with HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. They deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. They have customers from around the globe, spread across every continent. They have served the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

awards-03.pngHostForLIFE.eu is Microsoft No #1 Recommended Windows and ASP.NET Hosting in European Continent. Our service is ranked the highest top #1 spot in several European countries, such as: Germany, Italy, Netherlands, France, Belgium, United Kingdom, Sweden, Finland, Switzerland and many top European countries.

HostForLIFE.eu Hosting is the first host to offer its customer all the new features of the ASP.NET 4.6 Hosting. You can simply deploy your ASP.NET 4.6 website via their world-class Control Panel or conventional FTP tool. This ASP.NET 4.6 Hosting is part of HostForLIFE.eu service and it is provided free of charge.

Top