A menu that scrolls links horizontally.

See the demo from SlideScrollMenu 

Instructions
Instructions in source code.

Source
You have two options on getting the source to this script.

1. Copy the source from the textboxes below and place the code inside the body textbox in the body of your document and the code in the head textbox in the head of your document. If there are images to the script right click on the images below the textboxes and choose "save as" to get them.

2. Download the sourcecode and images in a zip file

head

<sup><style type="text/css">
body {background-color:#ffffff;}
#divMenu a {color:#999999; text-decoration:underline;}
#divMenu a:hover {color:#333333; text-decoration:underline;}

#divBg {position:absolute; z-index:10; width:2000px; left:0px; height:100px; clip:rect(0px 10px 10px 0px); visibility:hidden;}
#divMenu {position:absolute; z-index:11; left:11px; top:1px; color:#333333; font-size:13px; font-family:verdana,arial,helvetica,sans-serif; visibility:inherit;}
#divArrowLeft {position:absolute; z-index:12; width:11px; height:20px; left:0px; top:0px; visibility:inherit;}
#divArrowRight {position:absolute; z-index:12; width:11px; height:20px; top:0px; visibility:inherit;}
</style>


<script language="JavaScript" type="text/javascript">
/**********************************************************************************
SideScrollMenu
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattliand modified byMichael van Ouwerkerk
*
* Script date: 09/07/2001 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
/**************************************************************************
Variables to set.
***************************************************************************/
sLeft = 0 //The left placement of the menu
sTop = 120 //The top placement of the menu
sMenuheight = 30 //The height of the menu
sArrowwidth = 11 //Width of the arrows
sScrollspeed = 20 //Scroll speed: (in milliseconds, change this one and the next variable to change the speed)
sScrollPx = 8 //Pixels to scroll per timeout.
sScrollExtra = 15 //Extra speed to scroll onmousedown (pixels)

/**************************************************************************
Scrolling functions
***************************************************************************/
var tim = 0
var noScroll = true
function mLeft(){
if (!noScroll && oMenu.x<sArrowwidth){
oMenu.moveBy(sScrollPx,0)
tim = setTimeout("mLeft()",sScrollspeed)
}
}
function mRight(){
if (!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){
oMenu.moveBy(-sScrollPx,0)
tim = setTimeout("mRight()",sScrollspeed)
}
}
function noMove(){
clearTimeout(tim);
noScroll = true;
sScrollPx = sScrollPxOriginal;
}
/**************************************************************************
Object part
***************************************************************************/
function makeObj(obj,nest,menu){
nest = (!nest) ? "":'document.'+nest+'.';
this.elm = bw.ns4?eval(nest+"document.layers." +obj):bw.ie4?document.all[obj]:document.getElementById(obj);
this.css = bw.ns4?this.elm:this.elm.style;
this.scrollWidth = bw.ns4?this.css.document.width:this.elm.offsetWidth;
this.x = bw.ns4?this.css.left:this.elm.offsetLeft;
this.y = bw.ns4?this.css.top:this.elm.offsetTop;
this.moveBy = b_moveBy;
this.moveIt = b_moveIt;
this.clipTo = b_clipTo;
return this;
}
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){
if (x!=null){this.x=x; this.css.left=this.x+px;}
if (y!=null){this.y=y; this.css.top=this.y+px;}
}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_clipTo(t,r,b,l){
if(bw.ns4){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+"px "+r+"px "+b+"px "+l+"px)";
}
/**************************************************************************
Object part end
***************************************************************************/

/**************************************************************************
Init function. Set the placements of the objects here.
***************************************************************************/
var sScrollPxOriginal = sScrollPx;
function sideInit(){
//Width of the menu, Currently set to the width of the document.
//If you want the menu to be 500px wide for instance, just
//set the pageWidth=500 in stead.
pageWidth = (bw.ns4 || bw.ns6 || window.opera)?innerWidth:document.body.clientWidth;

//Making the objects...
oBg = new makeObj('divBg')
oMenu = new makeObj('divMenu','divBg',1)
oArrowRight = new makeObj('divArrowRight','divBg')

//Placing the menucontainer, the layer with links, and the right arrow.
oBg.moveIt(sLeft,sTop) //Main div, holds all the other divs.
oMenu.moveIt(sArrowwidth,null)
oArrowRight.css.width = sArrowwidth;
oArrowRight.moveIt(pageWidth-sArrowwidth,null)

//Setting the width and the visible area of the links.
if (!bw.ns4) oBg.css.overflow = "hidden";
if (bw.ns6) oMenu.css.position = "relative";
oBg.css.width = pageWidth+px;
oBg.clipTo(0,pageWidth,sMenuheight,0)
oBg.css.visibility = "visible";
}

//executing the init function on pageload if the browser is ok.
if (bw.bw) onload = sideInit;
</script></sup>

Body

^{<div id="divBg">
<div id="divMenu">
<nobr>
[<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>]
</nobr>
</div>
<div id="divArrowLeft"><a href="#" onmouseover="noScroll=false; mLeft()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra"><img src="arrowleft.gif" width="11" height="21" alt="" border="0"></a></div>
<div id="divArrowRight"><a href="#" onmouseover="noScroll=false; mRight()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra"><img src="arrowright.gif" width="11" height="21" alt="" border="0"></a></div>
</div>}

All the free scripts on this site may be reused as long the copyright notice is intact in the script source. If you wish to use any of the scripts without the copyright notice contact us at This e-mail address is being protected from spambots, you need JavaScript enabled to view it