Side Menus For ASP.NET Webpage

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