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.
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.
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.
Now move the mouse over the left menu bar. This looks like this.
Now click on the menu item such as c#corner. This link will be redirect to the www. C-sharpcorner.com.
