Assignment Post 6-Interactive Menu

The next step to our assignment is to create an interactive menu. This is created based on a code,and that code is available in the useful links folder, in the 10 IST share point website. It is called javascript menu. It is basically a code for a mouse fly in menu. The pictures below, depict this menu's function.
The steps you need to under take to complete this task are:

1.Go the the CODE section of the share point designer page.

2.Go to the website stated above in the useful links   http://www.dynamicdrive.com/dynamicindex1/slideinmenu4.htm

3.Follow the instructions on the page regarding the establishment of this interactive menu.

4.Firstly it states to copy and paste the following code into the head section of the code.<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
line-height:20px;
}
-->
</style>

5.Then you have to copy and paste the second part of the code, which is inserted right after the body tag line in the code.<script language="JavaScript1.2">

/***********************************************
* Fold-out external menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var slidemenu_height='315px' //specify height of menu (in pixels throughout)
var slidemenu_width='160px' //specify width of menu
var slidemenu_reveal='12px' //specify amount that menu should protrude initially
var slidemenu_top='170px'   //specify vertical offset of menu on page
var slidemenu_url="menu.htm" //specify path to menu file

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>

6. We are not done after this. Scroll down right at the bottom of the page, it states there that you have to then configure the menu. This is done by clicking on the hyperlink which says"menu file". This will take you to a different tab which looks like this:

7.Right on the page, and click on view source. This will open up a code in notepad. You will have to insert this code in the menu page created on sharepoint, the above codes need to be inserted in the pages where you want the menu to appear.

8. To simply change the hyperlinks and writing on this code, you will have to change the links in the code pasted itself.

9. After all of this, press preview on any page where you have inserted the code and "allow blocked content". After that you just have to fly your cursor over the menu and it will appear!