Navigation : Focus Slide Menu / The JavaScript Source

General

Mousing over a list item will cause the bluish green DIV to slide over to that list item. Interesting menu effect. Easily customizable. Degrades very nicely for those with JavaScript turned off.

Notes

Created by: Steve Chipman
Web Site: http://slayeroffice.com/
Posted: July 18, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: focusSlide.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com */

/******************************************************
	Focus Slide
	version 1.0
	last revision: 12.17.2004
	steve@slayeroffice.com

	Should you improve upon or
	modify this code, please let me know
	so that I can update the version hosted
	at slayeroffice.

	PLEASE LEAVE THIS NOTICE INTACT!

******************************************************/

var d=document;		// shortcut reference to the document object
var activeLI = 0;		// the currently "active" list element - value represents its index in the liObj array
var zInterval = null;	// interval variable

var SLIDE_STEP = 8;	// how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 74;	// the width of the sliding div. used to calculate
                        // its left based on the width and left of the active LI element


function init() {
	// bail out if this is an older browser or Opera which gets the offsets wrong
	// the opera issue is fixable by subtracting the container UL's width from the
  // offsetLefts...but I don't care enough to do it
	// this does NOT break opera, it just wont get the sliding thing

	if(!document.getElementById || window.opera)return;

	// create references to the LI's
	mObj = d.getElementById("mContainer");
	liObj = mObj.getElementsByTagName("li");

	// set up the mouse over events
	for(i=0;i<liObj.length;i++) {
		liObj[i].xid = i;
		liObj[i].onmouseover = function() { initSlide(this.xid); }
	}

	// create the slider object
	slideObj = mObj.appendChild(d.createElement("div"));
	slideObj.id = "slider";

	// position the slider over the first LI
	x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
	y = liObj[activeLI].offsetTop-3;
	slideObj.style.top = y + "px";
	slideObj.style.left = x + "px";
}


function initSlide(objIndex) {
	// return if the user is mousing over the currently active LI
	if(objIndex == activeLI)return;
	// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
	clearInterval(zInterval);

	// set the active list item to the object index argument
	activeLI = objIndex;
	// figure out the destination for the sliding div element
	destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
	// start the interval
	intervalMethod = function() { doSlide(destinationX); }
	zInterval = setInterval(intervalMethod,10);
}

function doSlide(dX) {
	// get the current left of the sliding div
	x = slideObj.offsetLeft;
	if(x+SLIDE_STEP<dX) {
		// div is less than its destination, move it to the right
		x+=SLIDE_STEP;
		slideObj.style.left = x + "px";
	} else if (x-SLIDE_STEP>dX) {
		// div is more than its destination, move to the left
		x-=SLIDE_STEP;
		slideObj.style.left = x + "px";
	} else  {
		// div is within the boundaries of its destination. put it where its supposed to be
		// and clear the interval
		slideObj.style.left = dX + "px";
		clearInterval(zInterval);
		zInterval = null;
	}
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  init();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#mContainer {
	position:relative;
	margin:0 auto;
	width:404px;
	height:25px;
	border-top:1px solid #638DA1;
	border-bottom:1px solid #638DA1;
	background-color:#F2F5F6;
	padding:5px 0 0 0;
	z-index:0;
}

#mContainer li {
	position:relative;
	display:inline;
	margin:0 10px 0 12px;
	font:0.8em arial,verdana;
	padding:0;
	z-index:20;
}

#mContainer li a {
	text-decoration:none;
	color:#638DA1;
}

#slider {
	position:absolute;
	background-color:	#98B4C1;
	border:1px solid #78919B;
	width:74px;
	height:20px;
	padding:0;
	z-index:1;
}

Head

Paste this code into the HEAD section of your HTML document.


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

Body

Paste this code into the BODY section of your HTML document


<!-- this list is the actionable markup -->
<ul id="mContainer">
	<li><a href="#" title="Item One">Item One</a></li>
	<li><a href="#" title="Item Two">Item Two</a></li>

	<li><a href="#" title="Item Three">Item Three</a></li>
	<li><a href="#" title="Item Four">Item Four</a></li>
	<li><a href="#" title="Item Five">Item Five</a></li>
</ul>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

4. From: Cody
Firfox issues
10/09/2008 02:46:38

5. From: Lee (Admin)
11/06/2008 11:26:57

2. From: john
07/19/2008 14:20:14

3. From: Lee (Admin)
10/31/2008 15:04:09

1. From: Bill Ferguson
focus slide menu
07/19/2008 13:23:00

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

4. From: CodyFirfox issues10/09/2008 02:46:38

5. From: Lee (Admin)11/06/2008 11:26:57

2. From: john07/19/2008 14:20:14

3. From: Lee (Admin)10/31/2008 15:04:09

1. From: Bill Fergusonfocus slide menu07/19/2008 13:23:00

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

4. From: Cody
Firfox issues
10/09/2008 02:46:38

5. From: Lee (Admin)
11/06/2008 11:26:57

2. From: john
07/19/2008 14:20:14

3. From: Lee (Admin)
10/31/2008 15:04:09

1. From: Bill Ferguson
focus slide menu
07/19/2008 13:23:00