Click here to Skip to main content
15,867,141 members
Articles / Web Development / ASP.NET

How To Create Responsive Menu in ASP.NET

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
17 Oct 2014CPOL1 min read 48.9K   7   7
How to create responsive menu in ASP.NET

This is Part 6 of the blog post series, “Creating Menus – Simple To Complex“. In my last post, I explained how we can create a responsive menu using HTML, CSS & jQuery. In this post, we will see how we can create a responsive menu in ASP.NET. We will be using the “meanmenu” plugin from github to create our menu responsive. The menu will automatically resize itself as we increase/decrease browser’s width.

To start with, we have a Menu declaration as below on our master page or any of the other pages:

ASP.NET
<asp:menu ID="Menu1" runat="server" CssClass="menu">
     <items>
         <asp:menuitem NavigateUrl="#" Text="C#"></asp:menuitem>
         <asp:menuitem NavigateUrl="#" Text="VB.Net"></asp:menuitem>
         <asp:menuitem NavigateUrl="#" Text="F#"></asp:menuitem>
         <asp:menuitem NavigateUrl="#" Text="Python"></asp:menuitem>
         <asp:menuitem NavigateUrl="#" Text="Ruby"></asp:menuitem>
         <asp:menuitem NavigateUrl="#" Text="PhP"></asp:menuitem>
         <asp:menuitem NavigateUrl="#" Text="SalesForce"></asp:menuitem>
     </items>
 </asp:menu>

The corresponding CSS to the above Menu is as below:

CSS
.menu{
    margin: 0px auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
}
.menu ul li a:link, div ul li a:visited {
    display: block;
    background-color: #f1f1f1;color:#000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;
}
.menu ul li a:hover{
    background-color: #ccc;
}
.menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.menu ul li {
    float: left;
    margin-left: 5px;
}

After the above is complete, the menu will look like something below in iPhones/iPads or small devices.

responsive-menu-aspnet-1

On the ASPX or master page, we will add a reference to the jQuery, plugin’s JS file “jquery.meanmenu.js” and plugin’s CSS file “meanmenu.css”.

HTML
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.meanmenu.js"></script>
<link href="Styles/meanmenu.css" rel="stylesheet" />

Below the end of <body> tag, we call the plugin’s function on the menu selector which we want to make as responsive as below. Here, I am passing value to “meanScreenWidth” as 768 which means the responsive menu will start displaying when the browser width is less than or equal to 768px.

JavaScript
<script>
        jQuery(document).ready(function () {
            jQuery('.menu').meanmenu({
                meanScreenWidth:"768"
            });
        });
</script>

Now, after we implement the plugin on our menu, the menu will look like below in small devices.

responsive-menu-aspnet-2

You can download the complete source code for the menu here.

Hope you like this post! Keep learning and sharing! Cheers!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Rebin Infotech
India India
A passionate developer with over 10 years of experience and building my software company code by code. Experience withMS Technologies like .Net | MVC | Xamarin | Sharepoint | MS Project Server and PhP along with open source CMS Systems like Wordpress/DotNetNuke etc.

Love to debug problems and solve them. I love writing articles on my website in my spare time. Please visit my Website for more details and subscribe to get technology related tips/tricks. #SOreadytohelp

Comments and Discussions

 
QuestionResponsive ASPX menu Pin
Member 117959175-Jul-15 17:56
Member 117959175-Jul-15 17:56 
QuestionResponsive Menu Pin
Member 117959174-Jul-15 19:12
Member 117959174-Jul-15 19:12 
AnswerRe: Responsive Menu Pin
Nitesh Kejriwal5-Jul-15 22:46
professionalNitesh Kejriwal5-Jul-15 22:46 
QuestionNeed Help Create Responsive Menu in ASP.Net Pin
sada.ansian7-Nov-14 19:03
sada.ansian7-Nov-14 19:03 
AnswerRe: Need Help Create Responsive Menu in ASP.Net Pin
Nitesh Kejriwal7-Nov-14 19:15
professionalNitesh Kejriwal7-Nov-14 19:15 
Are your sub menus looking good in desktops? Can you please share a screenshot of what are you seeing in smartphones?
Nitesh K Luharuka
Consultant
http://www.niteshluharuka.com

GeneralRe: Need Help Create Responsive Menu in ASP.Net Pin
sada.ansian8-Nov-14 22:57
sada.ansian8-Nov-14 22:57 
GeneralRe: Need Help Create Responsive Menu in ASP.Net Pin
Nitesh Kejriwal8-Nov-14 23:04
professionalNitesh Kejriwal8-Nov-14 23:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.