Fold-Out menu in ASP. NET Using VB.NET

Here, we will see that automatically slides open from the left edge of the screen when mouse moves over it.
  • 2006
Download Files:
 

Here, we will see that automatically slides open from the left edge of the screen when mouse moves over it. This article defines the menu that is hidden in the left side bar. This will open automatically when we mouse moves over it. Moving the mouse out will cause it the bar to slide back in left edge of the screen. Menu also contains hyperlink.

Step-1

Now add a HTML page. Select a project add new items HTML page.

out1.gif
 

Now rename it with menu.htm. This will be display in the solution explorer.

This contains following html code in body section.

Language<br />

1.<a href="http://www.c-sharpcorner.com/" target="_parent">C# corner</a><br />

2.<a href="http://www.vbdotnetheaven.com" target="_parent">vb.net</a><br />

Database<br />

3.<a href="http://www.dbtalks.com" target="_parent">sql server database</a><br />

4.<a href="http://www.dbtalks.com" target="_parent">Oracle database</a><br />

 

Step-2

Now add the following css code in the head section of the page.

<style type ="text/css">

#slidemenubar, #slidemenubar2{

position:absolute;

border:1.5px solid black;

line-height:20px;

}

</style>

Step-3

Now add the following script code in the body section.

var slidemenu_height='315px'
var slidemenu_width='160px'
var slidemenu_reveal='12px'
var slidemenu_top='170px'
var slidemenu_url="menu.htm"
var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<iframe id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'; height:'+slidemenu_height+'" src="'+slidemenu_url+'"></iframe>')
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+' height='+slidemenu_height+' onMouseover="pull()" onMouseout="draw()" src="'+slidemenu_url+'" visibility=hide></layer>')
}
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>

Now run the application.

out2.gif
 

Now move the mouse over the left menu bar. This looks like this.

out3.gif
 

Now click on the menu item such as c#corner. This link will be redirect to the www. C-sharpcorner.com.

out4.gif
 

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.