October 17, 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 –

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

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

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

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

#.Net#ASP.Net#jQuery#Menu#Responsive

Support us!

If you like this site please help and make click on any of these buttons!

Powered by WordPress Popup