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