This solution makes use of the script.aculo.us slider functions. All you need to do is simply create a slider and a handler (or track bar) and link the movement of that to whatever object you want to scroll through. In the example it is simply a div which could include text or images.

The colour is fully customisable using stylesheets. The only hand editing you may need to do is to the “move_up” function to to get the scroll speed working correctly for the amount of information you will be scrolling through.

All you need to do is link to the script.aculo.us libraries and use something similar to the example (source code below).

Example

Source Code (right click and “Save As”)

StyleSheet Example

If you need any help with creating this scrollbar then please get in contact.

The included javascript code will create a menu, with submenus, that use the blindsdown effect from script.aculo.us. It will also leave the menu entry for the currently viewed page expanded (if you include the same menu script on every page). Obviously to achieve the blinds effect you will have to include the script.aculo.us javascript files in the head of you html before including menu.js.

Many people seemed to have trouble with using the blinddown / blindup effect and part of the menu disappearing. This has been fixed in this version of the menu code. 

EDITING THE SUPPLIED JAVASCRIPT

You will need to do some editing of your own, the two easy changes are on lines 43 and 105. You simply need to replace “http://www.your_url.com/” with the root location of your site (”http://www.spiderdesign.co.uk/” for example).

The only other change you MAY need to make is on line 51 and this will all depend on the structure of your site. This line simply does a check of the users current location against the menu entry links. If the two are equal we know to expand that particular parent node (menu entry). This may just work straight away, with the current values. However if not then it is useful to put an alert in the code to tell you what the values of “loc_array” and “link_loc_array” are, so that you know which index of each array you should be comparing to expand the correct menu node, (if you need help with this then please get in contact).

HOW TO CREATE THE MENU

The menu is then simply populated using a list, Parents (nodes with children) will not link anywhere they will simply show or hide the children.

<ul id=”menu”>

 <li><a href=”http://spiderdesign.co.uk/#” mce_href=”http://spiderdesign.co.uk/#” >Parent Menu Entry Which Won’t Link</a>

  <ul>

   <li><a href=”link_1″ mce_href=”link_1″ >Menu Entry That Will Link 1</a></li>

   <li><a href=”link_2″ mce_href=”link_2″ >Menu Entry That Will Link 1</a></li>

  </ul>

 </li>

 <li>

  <a href=”link_will work”>Link Will Work</a>

 </li>

</ul>

It really is as easy as that, you can customise the look of the menu with the use of stylesheets or use images as the links and add mouse over effects to lighten and darken the image, and also have the currently selected link hightlighted.

A basic stylesheet file is included to get you started.

For an example please click here.

Download menu.js.

Download style.css.