To setup a scroll/slide area create a container with the following CSS properties…

position:relative; overflow:hidden; height:XXXpx;

Inside the scroll area container create another div that will house your actual content. It needs the positioned absolutely within the previous div. Each sliding or scrolling area on the page needs to have a unique ID for this div.

position:absolute;

Inside the content div you can need to create a section for each area of content, be it 1 or 50. For each section after the “prefix-” numerate the order from 1 onwards. The prefix (ie section, newssection, imgsection, etc) needs to be unique to the current sliding/scrolling container’s sections.

<div id="section-1" class="section"></div>

You can call functions to incrementally scroll up or down, scroll to a particular section and initiate autoscroll/cancel the autoscroll. Take a look at the source code for examples. You might also consider dynamically adding some currently static CSS properties such as overflow:hidden and the height to allow for better degradation without JavaScript support.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

This script has been replaced by a new with multi-level support here.

This lightweight JavaScript drop down menu script (~1.6kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. The markup for the menu including the mouse events looks like the following.

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dl>

You can have as many dropdowns on one page as you like. Just be sure and have a unique naming scheme for each menu (i.e. one-ddheader, two-ddheader, etc). The “look and feel” is fully customizable though the CSS and you can replace the unordered list with any content you like if you are not looking for a menu.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

Click here for a vertical flyout version of this menu.

By Request: Slideup version demo.

Update 4/28/2008 – I have updated the HTML and CSS to use a definition list and an unordered list in lieu of the previous div-based layout. Thanks to Paul and Deigo for the suggestion.
Update 4/28/2008 – Fixed flicker issue in FF2 on Mac and “-1″ error in IE when quickly moving from the menu to the browser. Thanks to Philip and Chris for reporting these.
Update 5/16/2008 – Optimized the code reducing size by ~15%.