Side Menus For ASP.NET Webpage

Introduction

In this article we will see various kinds of menus for our ASP.Net application. Generally all of you have an ideas about ASP.Net menu control and your own menu created using hyperlinks. In this article we will see various menus like accordion style menu, basic sliding menu, advance sliding menu.

In any kind of application the main thing is designing the menu. For creating menus either we use hyperlinks by providing different styles or our ASP.Net menu control. In this article I'll show you other kinds of menus which can be hidden from our UI part. In this article we will see three different menus created using JavaScript and CSS these are as follows.

1. Accordion Style Menu.
   

2. Simple Sliding Menu.
   

3. Advance Hidden Menu.

Accordion Style Menu

All of you are familiar with the accordion control of ASP.Net Ajax. In this menu style we will build the same like accordion control menu. I found these script over my search and I would like to share with you. So let's start to create Accordion Menu for you ASP.Net application.

Step 1:

Download the attachment from the article which contains one scripts folder copy same folder in your web root having three .js files 1) accordion.js 2) ssm.js and 3)ssmItems.js. These all files contains the JavaScript code to provide the different menus out of this for Accordion style menu we will use accordion.js file.

Step 2:

Create a new web site and add one new page to your application. We will create three different pages for three different menu styles.

Step 3:

Write down two script tags in your page head tag like below.

<script type="text/javascript" src="Scripts/ddaccordion.js">  
</script>

<script type="text/javascript">

    //Initialize Arrow Side Menu:
    ddaccordion.init({
        headerclass: "menuheaders", //Shared CSS class name of headers group
        contentclass: "menucontents", //Shared CSS class name of contents group
        revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
        mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
        collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
        defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
        onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
        oninit: function (expandedindices) { //custom code to run when headers have initalized do nothing
        },
        onopenclose: function (header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
            //do nothing
        }
    })
</script>

In the above code we have two scripts; one to refer to our accordion.js file and another one for providing the CSS and other properties to our menu. In the second script we refer to the CSS styles but which are not present so create the CSS as below in the head tag of your page.

<style type="text/css">

.arrowsidemenu{
            width: 180px; /*width of menu*/
            border-style: solid solid none solid;
            border-color: #94AA74;
            border-size: 1px;
            border-width: 1px;
}          
.arrowsidemenu div a{ /*header bar links*/
            font: bold 12px Verdana, Arial, Helvetica, sans-serif;
            display: block;
            background: transparent url(arrowgreen.gif) 100% 0;
  height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            padding: 4px 0 4px 10px;
            line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            text-decoration: none;
}           
.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
            color: #26370A;
}
.arrowsidemenu div a:hover{
            background-position: 100% -32px;
}

.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
            color: #6F3700;}            
.arrowsidemenu div.selected a{ /*header that's currently selected*/
            color: blue;
            background-position: 100% -64px !important;
}

.arrowsidemenu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;}
.arrowsidemenu ul li{
            border-bottom: 1px solid #a1c67b;}

.arrowsidemenu ul li a{ /*sub menu links*/
            display: block;
            font: normal 12px Verdana, Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: black;
            padding: 5px 0;
            padding-left: 10px;
            border-left: 10px double #a1c67b;
}
.arrowsidemenu ul li a:hover{
            background: #d5e5c1;}

</style>

Step 4:

We now have created everything; now it's time to create our menu items so create your menu items like given below.

<div class="arrowsidemenu">

<div><a href="http://www.c-sharpcorner.com" title="Home">Home</a></div>
<div class="menuheaders"><a href="#" title="CSS">C-Ssharpcorner</a></div>
            <ul class="menucontents">
            <li><a href="http://www.c-sharpcorner.com/Videos">Videos</a></li>
            <li><a href="http://www.c-sharpcorner.com/Media/ContactUs.aspx">Advertise</a></li>
            <li><a href="http://www.c-sharpcorner.com/Exam/Default.aspx">Certification</a></li>
            <li><a href="http://www.c-sharpcorner.com/Downloads/">Downloads</a></li>
            <li><a href="http://www.c-sharpcorner.com/Blogs/">Blogs</a></li>
            <li><a href="http://www.c-sharpcorner.com/Interviews/">Interviews</a></li>
            <li><a href="http://www.c-sharpcorner.com/Jobs/">Jobs</a></li>
            </ul>
<div><a href="http://www.c-sharpcorner.com/Forums/" title="Forums">Forums</a></div>
<div class="menuheaders"><a href="#" title="JavaScript">Dot Net Heaven</a></div>
            <ul class="menucontents">
            <li><a href="http://www.dbtalks.com/">Db Talk</a></li>
            <li><a href="http://www.interviewcorner.com/">InterView Corner</a></li>
            </ul>
<div><a href="http://www.longhorncorner.com/" title="Tools">Logn Horn Corner</a></div>

</div>

In the above code you can easily understand we have created a head item and under the head item we have sub items. Run your application and see the result as below click on C-sharpcorner which will open sub links in accordion style.

 

Simple Sliding Menu

In this menu style we will hide the our menu div and when the mouse over on that div we will show the content of menus. This menu contains a simple design, you can apply your own style on it.

Step 1:

Add a new page to your application and paste this style in the head tag of your page.

<style type="text/css">
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
background-color:#F2F2F2;
layer-background-color:#F2F2F2;
font:bold 12px Verdana;
line-height:20px;}

you can change this style as you want.

Step 2:

For creating this menu we are creating the div dynamically when our body loads with JavaScript. So just paste the following script in your body tag and replace the menu items as per your requirements.

<script language="javascript">

    var slidemenu_width = '160px' //specify width of menu (in pixels)
    var slidemenu_reveal = '12px' //specify amount that menu should protrude initially
    var slidemenu_top = '170px'   //specify vertical offset of menu on page
    var ns4 = document.layers ? 1 : 0
    var ie4 = document.all
    var ns6 = document.getElementById && !document.all ? 1 : 0
    if (ie4 || ns6)
        document.write('<div id="slidemenubar2" style="left:' + ((parseInt(slidemenu_width) - parseInt(slidemenu_reveal)) * -1) + 'px; top:' + slidemenu_top + '; width:' + slidemenu_width + '" onMouseover="pull()" onMouseout="draw()">')
    else if (ns4) {
        document.write('<style>\n#slidemenubar{\nwidth:' + slidemenu_width + ';}\n<\/style>\n')
        document.write('<layer id="slidemenubar" left=0 top=' + slidemenu_top + ' width=' + slidemenu_width + ' onMouseover="pull()" onMouseout="draw()" visibility=hide>')
    }
    var sitems = new Array()   
    //siteitems[x]=["Item Text", "Optional URL associated with text"]

    sitems[0] = ["<big><font face='Arial'>Slid In Menu Items</font></big>", ""]
    sitems[1] = ["C-Sharp Home", "http://www.c-sharpcorner.com/"]
    sitems[2] = ["Videos", "http://www.c-sharpcorner.com/Videos/"]
    sitems[3] = ["Advertise", "http://www.c-sharpcorner.com/Media/ContactUs.aspx"]
    sitems[4] = ["Certification", "http://www.c-sharpcorner.com/Exam/Default.aspx"]
    sitems[5] = ["Downloads", "http://www.c-sharpcorner.com/Downloads/"]
    sitems[6] = ["Blogs", "http://www.c-sharpcorner.com/Blogs/"]
    sitems[7] = ["InterViews", "http://www.c-sharpcorner.com/Interviews/"]
    sitems[8] = ["Jobs", "http://www.c-sharpcorner.com/Jobs/"]
    sitems[9] = ["Forums", "http://www.c-sharpcorner.com/Forums/"]
    sitems[10] = ["Dotnet Heaven", "http://www.dotnetheaven.com/"]
    //If you want the links to load in another frame/window, specify name of target (ie: target="_new")
    var target = ""

    if (ie4 || ns4 || ns6) {
        for (i = 0; i < sitems.length; i++) {
            if (sitems[i][1])
                document.write('<a href="' + sitems[i][1] + '" target="' + target + '">')
            document.write(sitems[i][0])
            if (sitems[i][1])
                document.write('</a>')
            document.write('<br>\n')
        }
    }
    function regenerate() {
        window.location.reload()
    }
    function regenerate2() {
        if (ns4) {
            document.slidemenubar.left = ((parseInt(slidemenu_width) - parseInt(slidemenu_reveal)) * -1)
            document.slidemenubar.visibility = "show"
            setTimeout("window.onresize=regenerate", 400)
        }
    }
    window.onload = regenerate2
    rightboundary = 0
    leftboundary = (parseInt(slidemenu_width) - parseInt(slidemenu_reveal)) * -1

    if (ie4 || ns6) {
        document.write('</div>')
        themenu = (ns6) ? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
    }
    else if (ns4) {
        document.write('</layer>')
        themenu = document.layers.slidemenubar
    }
    function pull() {
        if (window.drawit)
            clearInterval(drawit)
        pullit = setInterval("pullengine()", 10)
    }
    function draw() {
        clearInterval(pullit)
        drawit = setInterval("drawengine()", 10)
    }
    function pullengine() {
        if ((ie4 || ns6) && parseInt(themenu.left) < rightboundary)
            themenu.left = parseInt(themenu.left) + 10 + "px"
        else if (ns4 && themenu.left < rightboundary)
            themenu.left += 10
        else if (window.pullit) {
            themenu.left = 0
            clearInterval(pullit)
        }
    }
    function drawengine() {
        if ((ie4 || ns6) && parseInt(themenu.left) > leftboundary)
            themenu.left = parseInt(themenu.left) - 10 + "px"
        else if (ns4 && themenu.left > leftboundary)
            themenu.left -= 10
        else if (window.drawit) {
            themenu.left = leftboundary
            clearInterval(drawit)
        }
    }
</script>

In the above script you can see on startup we have declared the height, width and other features for the dynamic menu div then using the document.write method we wrote the div tag and below that we are creating the hyperlink using simple <a href/> as our menu items. Replace the items as you require.

Step 2:

Run your application and see the result menu is hiding on left side and when we mouse over it will come along with our items on the page this menu style has only one caption on the top.

Sliding Menu With Two Side Captions

In this menu style we will see the same sliding menu as above with two captions one on the top and the second on the left side. For creating this style menu we will use two JavaScript files which are present in your script folder. Out of these files one file is ssm.js which we will use to provide sliding functionality to our menu and the second one is ssmItems.js which we will use to prepare the menu items. Do not change anything in ssm.js file but in ssmItems.js file you have to replace the menuitems which are present like below.

ssmItems[0] = ["<big><font face='Arial'>Slid In Menu Items</font></big>", ""]
    ssmItems[1] = ["C-Sharp Home", "http://www.c-sharpcorner.com/"]
    ssmItems[2] = ["Videos", "http://www.c-sharpcorner.com/Videos/"]
    ssmItems[3] = ["Advertise", "http://www.c-sharpcorner.com/Media/ContactUs.aspx"]
    ssmItems[4] = ["Certification", "http://www.c-sharpcorner.com/Exam/Default.aspx"]
    ssmItems[5] = ["Downloads", "http://www.c-sharpcorner.com/Downloads/"]
    ssmItems[6] = ["Blogs", "http://www.c-sharpcorner.com/Blogs/"]
    ssmItems[7] = ["InterViews", "http://www.c-sharpcorner.com/Interviews/"]
    ssmItems[8] = ["Jobs", "http://www.c-sharpcorner.com/Jobs/"]
    ssmItems[9] = ["Forums", "http://www.c-sharpcorner.com/Forums/"]
    ssmItems[10] = ["Dotnet Heaven", "http://www.dotnetheaven.com/"]

In the above script code the first item is the title to show on the top with the style and below are the items. Replace those items as per your requirement. This file i.e. ssmItems.js contains some style above the items you can change this style as you want. Now only we have to refer those two files on our web page and some style for our menu so paste the following lines in your head tag.

<style type="text/css">
A.ssmItems:link                      {color:black;text-decoration:none;}
A.ssmItems:hover       {color:black;text-decoration:none;}
A.ssmItems:active       {color:black;text-decoration:none;}
A.ssmItems:visited     {color:black;text-decoration:none;}

</style>
<script src="Scripts/ssm.js" language="javascript"></script>
<script src="Scripts/ssmItems.js" language="javascript"></script>

That's all; we have created the sliding menu with some style.

Conclusion

In this way using simple JavaScript and CSS we can create the various kind of side menus in our ASP.Net application. I hope all of you enjoyed this article.