fullvolume

navslide.js

All scripts given for distribution were created by Steve H and are licensed under the GPL. By using or re-distributing a script you accept the GPL license. Make sure you read the information at Scripts Main before you attempt to use any scripts.

Navslide is a small javascript library which can glorify any list or table of links with a background shape that follows the mouse hover.

Difficulty

You will need to know your way around basic HTML and CSS. Knowledge of javascript is handy but not required if you can understand what I say.

Compatibility

Firefox / Geko
Internet Explorer 6
Not Opera
Gracefully degrades as if the script wasn't even there when not compatible.

Install

To install this script on your site first download the navslide.js file and then upload it to your website. You will need to change your site's layout so that the links are either in a list structure or a simple table structure which itself is inside of a div which has an ID. An example would be:

<div id="navslide">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">...</a></li>
  </ul>
</div>

Content may come inside of the ID'd div after the list of links but it is not advised to put content inside the div before the list.

Next you need to style the box that will be sliding around behind the links. To do this then edit your CSS to style a div with the ID shadowbox. If you don't know how to do that then just add the following inside of your <head> tags (you will need to learn some CSS to make it look good):

<style type="text/css">
  #shadowbox {
    background-color:#cc0000;
  }
</style>

Then add the following inside of the <head> tags (changing the value of the src if necessary):

<script type="text/javascript" src="navslide.js"></script>

<script type="text/javascript">
  // Initiate navslide on page load
  window.onload = function () {navslide();}
  window.onresize = function () {navslide_unhover();}
</script>

That will initiate navslide with the default values which, if you've used exactly the example, will work. However, to accommodate other ways the navslide() function accepts the following parameters (all optional):

ID of the div that holds your link structure
Tag name of the parent entity (probably ul, ol or table)
Tag name of the child entity (probably li or td not a (the anchor/link tag))

So for a table structure inside a div with id="navigation" the function would be navslide('navigation','table','td');