The first step is to add the following code between
<style>
Body{background-color: #FFFFFF}
A{color:navy; Text-decoration:none}
A:hover{color:red}
A:visited:{color: #808080}
Td{font-family:arial,helvetica; font-size:10pt}
#divBg {position:absolute; z-index:10; width:200; left:0; height:100; Clip:rect (0,10,10,0)}
#divMenu {position:absolute; left:15; top:6; Font-weight:bold}
#divArrowLeft {position:absolute; width:20; height:20; left:0; Top:9}
#divArrowRight {position:absolute; width:20; height:20; Top:9}
</style><script>
Simple Browsercheck
var n = (document.layers)? 1:0;
var ie = (document.all)? 1:0;
The height of the menu
Menuheight=22
Width of the Arrows
Arrowwidth=16
Scroll speed: (in milliseconds, change this one and "next variable to change" speed)
Scrollspeed=20
Pixels to scroll per timeout.
scrollpx=10
/**************************************************************************
scrolling functions
***************************************************************************/
var Tim;
var noscroll=true
function Mleft () {
if (!noscroll && omenu.x<arrowwidth) {
Omenu.moveby (scrollpx,0)
Tim=settimeout ("Mleft ()", scrollspeed)
}
}
function Mright () {
if (!noscroll && omenu.x>-(omenu.scrollwidth-(pagewidth))-arrowwidth) {
Omenu.moveby (-scrollpx,0)
Tim=settimeout ("Mright ()", scrollspeed)
}
}
function Nomove () {cleartimeout (Tim); Noscroll=true}
/**************************************************************************
Object part
***************************************************************************/
function Makeobj (obj,nest,num) {
Nest= (!nest)? ': ' Document. ' +nest+ '. '
This.css= (n)? Eval (nest+ ' document. ') +obj): eval (' document.all. ') +obj+ '. Style ')
This.evnt= (n)? Eval (nest+ ' document. ') +obj): eval (obj);
This.scrollwidth=n?this.css.document.width:this.evnt.offsetwidth
this.x= (n)? This.css.left:this.evnt.offsetLeft; This.y= (n)?
This.css.top:this.evnt.offsetTop;
This.moveby=b_moveby; This.moveit=b_moveit; This.showit=b_showit;this.clipto=b_clipto;
return this
}
function B_moveby (x,y) {this.x=this.x+x; this.y=this.y+y; this.css.left=this.x; This.css.top=this.y}
function B_moveit (x,y) {this.x=x; this.y=y; this.css.left=this.x; This.css.top=this.y}
function B_clipto (t,r,b,l) {
if (n) {this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip= "rect" ("+t+", "+r+", "+b+", "+l+") ";
}
function B_showit () {this.css.visibility= "visible"}
/**************************************************************************
Object Part End
***************************************************************************/
/**************************************************************************
Init function. Set the placements of the objects here.
***************************************************************************/
function Side_init () {
The width of the menu, currently set to the the document.
If you are want the menu to is 500px wide for instance, just
Set the pagewidth=500 in stead.
Pagewidth= (n)? innerwidth:document.body.offsetwidth-20;
Obg=new makeobj (' DIVBG ')
Omenu=new makeobj (' Divmenu ', ' DIVBG ')
Oarrowright=new makeobj (' divarrowright ', ' DIVBG ')
Placement
Obg.moveit (0,0)//main Div, holds all of the other divs.
Omenu.moveit (arrowwidth,6)
Oarrowright.moveit (pagewidth-arrowwidth,9)
Setting the width and the visible area of the links.
if (IE) {obg.css.width=pagewidth; obg.css.overflow= "Hidden"}
Obg.clipto (0,pagewidth,menuheight,0)
}
Executing the init function on pageload.
Onload=side_init;
</script>
Step Two: Add the following original code to <body> and </body>
<div id= "DIVBG" >
<div id= "Divmenu" >
<TABLE><TR><TD nowrap>
[<a href= "#" >link 1</a>]? [<a href= "#" >link
2</a>]? [<a href= "#" >link 3</a>]? [<a href= "#" >link
4</a>]? [<a href= "#" >link 5</a>]?
[<a href= "#" >link 6</a>]?
[<a href= "#" >link 7</a>]?
[<a href= "#" >link 8</a>]?
[<a href= "#" >link 9</a>]?
[<a href= "#" >link 10</a>]?
[<a href= "#" >link 11</a>]?
[<a href= "#" >link 12</a>]?
[<a href= "#" >link 13</a>]?
[<a href= "#" >link 14</a>]?
[<a href= "#" >link 15</a>]?
[<a href= "#" >link 16</a>]?
[<a href= "#" >link 17</a>]?
[<a href= "#" >link 18</a>]?
[<a href= "#" >link 19</a>]?
[<a href= "#" >link 20</a>]?
[<a href= "#" >link 21</a>]?
[<a href= "#" >link 22</a>]?
[<a href= "#" >link 23</a>]?
[<a href= "#" >link 24</a>]?
[<a href= "#" >link 25</a>]?
[<a href= "#" >link 26</a>]?
[<a href= "#" >link 27</a>]?
[<a href= "#" >link 28</a>]?
[<a href= "#" >link 29</a>]?
[<a href= "#" >link 30</a>]
</td></tr></table>
</div>
<div id= "Divarrowleft" ><a href= "javascript://" ></a></div>
<div id= "Divarrowright" ><a href= "javascript://" ></a></div>
</div>
