17/10/2014 by Nitesh

How To Create Responsive Menu in ASP.Net

Friends,

This is Part 6 of the blog post series, “Creating Menus – Simple To Complex“. In my last post, I explained how can we create a responsive menu using HTML, CSS & jQuery. In this post, we will see how can we 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 –

The corresponding CSS to the above Menu is as below –

.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.

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”.

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.

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