Create Navigation menu effect : follow the mouse

A sleek animation effect using tabs for a slide navigation bar. Degrades very nicely when JavaScript is turned-off.

1) Paste the following code below into the CSS section of your HTML

</div><div><br /></div><div><!-- Paste this code into the CSS section of your HTML document  --></div><div><br /></div><div>#miniflex {</div><div>  width: 100%;</div><div>  float: left;</div><div>  font-size: small; /* could be specified at a higher level */</div><div>  margin: 0;</div><div>  padding: 0 10px 0 10px;</div><div>  border-bottom: 1px solid #696;</div><div>  position:relative;</div><div>  z-index:2;</div><div>}</div><div><br /></div><div>#miniflex li {</div><div>  float: left;</div><div>  margin: 0;</div><div>  padding: 0;</div><div>  display: inline;</div><div>  list-style: none;</div><div>  position:relative;</div><div>}</div><div><br /></div><div>#miniflex a:link, #miniflex a:visited {</div><div>  float: left;</div><div>  font-size: 85%;</div><div>  line-height: 20px;</div><div>  font-weight: bold;</div><div>  margin: 0 10px 0 10px;</div><div>  text-decoration: none;</div><div>  color: #9c9;</div><div>}</div><div><br /></div><div>#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {</div><div>  border-bottom: 4px solid #696;</div><div>  padding-bottom: 2px;</div><div>  color: #696;</div><div>}</div><div>  </div><div>#animated-tab {</div><div>  position: absolute;</div><div>  z-index: 1;</div><div>  font-size: 85%;</div><div>  line-height: 20px;</div><div>  padding-bottom: 2px;</div><div>  border-bottom: 4px solid #696;</div><div>}</div><div><br /></div><div><br /></div><div><br /></div><div><!-- Paste this code into an external JavaScript file named: miniTab.js  --></div><div><br /></div><div>/* This script and many more are available free online at</div><div>The JavaScript Source :: http://javascript.internet.com</div><div>Created by: Brian McAllister :: http://www.frequency-decoder.com/ */</div><div><br /></div><div>/*</div><div>Animated miniTabs by frequency decoder</div><div>Further information on this script can be located</div><div>on the authors Web site http://www.frequency-decoder.com/</div><div><br /></div><div>Based on an idea by Rob L Glazebrook</div><div>(http://www.rootarcana.com/test/smartmini/)</div><div>which was derived from the original idea of Stephen Clark</div><div>(http://www.sgclark.com/sandbox/minislide/)</div><div><br /></div><div>Changes</div><div>=======</div><div>05/03/06 : Creation</div><div>08/03/06 : Added the cleanUp method to stop IE memory leaks.</div><div><br /></div><div>This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" license</div><div><br /></div><div>You are free:</div><div>  1. to copy, distribute, display, and perform the work.</div><div>  2. to make derivative works.</div><div><br /></div><div>Under the following conditions:</div><div><br /></div><div>  1. **Attribution*: You must attribute the work in the manner specified</div><div>     by the author or licensor.</div><div>  2. Noncommercial*: You may not use this work for commercial purposes.*</div><div>  3. Share Alike*: If you alter, transform, or build upon this work,</div><div>     you may distribute the resulting work only under a license identical to this one.</div><div>*/</div><div><br /></div><div><br /></div><div>var miniTab = {</div><div>  currentTab:     0,</div><div>  activeTab:      0,</div><div>  destX:          0,</div><div>  destW:          0,</div><div>  t:              0,</div><div>  b:              0,</div><div>  c:              0,</div><div>  d:              20,</div><div>  animInterval:   null,</div><div>  sliderObj:      null,</div><div>  aHeight:        0,</div><div>  </div><div>  init: function() {</div><div>    if(!document.getElementById || !document.getElementById("miniflex")) return;</div><div>    </div><div>    var ul          = document.getElementById("miniflex");</div><div>    var liArr       = ul.getElementsByTagName("li");</div><div>    var aArr        = ul.getElementsByTagName("a");</div><div>    </div><div>    for(var i = 0, li; li = liArr[i]; i++) {</div><div>      liArr[i].onmouseover = aArr[i].onfocus = function(e) {</div><div>        var pos = 0;</div><div>        var elem = this.nodeName == "LI" ? this : this.parentNode;</div><div>        while(elem.previousSibling) {</div><div>          elem = elem.previousSibling;</div><div>          if(elem.tagName && elem.tagName == "LI") pos++;</div><div>        }</div><div>        miniTab.initSlide(pos);</div><div>      }</div><div>    }</div><div><br /></div><div>    ul.onmouseout = function(e) {</div><div>      miniTab.initSlide(miniTab.currentTab);</div><div>    };</div><div>    </div><div>    for(var i = 0; i <><div>      if(document.location.href.indexOf(aArr[i].href)>=0) {</div><div>        miniTab.activeTab = miniTab.currentTab = i;</div><div>      }</div><div>      aArr[i].style.borderBottom  = "0px";</div><div>      aArr[i].style.paddingBottom = "6px";</div><div>    }</div><div><br /></div><div>    miniTab.slideObj                = ul.parentNode.appendChild(document.createElement("div"));</div><div>    miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));</div><div>    miniTab.slideObj.id             = "animated-tab";</div><div>    miniTab.slideObj.style.top      = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";</div><div>    miniTab.slideObj.style.left     = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px";</div><div>    miniTab.slideObj.style.width    = aArr[miniTab.activeTab].offsetWidth + "px";</div><div>    miniTab.aHeight                 = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop;</div><div>    </div><div>    miniTab.initSlide(miniTab.activeTab, true);</div><div>    </div><div>    var intervalMethod = function() { miniTab.slideIt(); }</div><div>    miniTab.animInterval = setInterval(intervalMethod,10);</div><div>  },</div><div><br /></div><div>  cleanUp: function() {</div><div>    clearInterval(miniTab.animInterval);</div><div>    miniTab.animInterval = null;</div><div>  },</div><div>  </div><div>  initSlide: function(pos, force) {</div><div>    if(!force && pos == miniTab.activeTab) return;</div><div>    miniTab.activeTab = pos;</div><div>    miniTab.initAnim();</div><div>  },</div><div>  </div><div>  initAnim: function() {</div><div>    var ul          = document.getElementById("miniflex");</div><div>    var liArr       = ul.getElementsByTagName("li");</div><div>    var aArr        = ul.getElementsByTagName("a");</div><div>    miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft);</div><div>    miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);</div><div>    miniTab.t = 0;</div><div>    miniTab.b = miniTab.slideObj.offsetLeft;</div><div>    miniTab.c = miniTab.destX - miniTab.b;</div><div>    miniTab.bW = miniTab.slideObj.offsetWidth;</div><div>    miniTab.cW = miniTab.destW - miniTab.bW;</div><div>    miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";</div><div>  },</div><div>  </div><div>  slideIt:function() {</div><div>    var ul          = document.getElementById("miniflex");</div><div>    var liArr       = ul.getElementsByTagName("li");</div><div>    var aArr        = ul.getElementsByTagName("a");</div><div>    </div><div>    // Has the browser text size changed?</div><div>    if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) {</div><div>      miniTab.initAnim();</div><div>      miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop</div><div>    };</div><div>    </div><div>    if(miniTab.t++ <><div>      var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);</div><div>      var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);</div><div>      miniTab.slideObj.style.left = parseInt(x) + "px";</div><div>      miniTab.slideObj.style.width = parseInt(w) + "px";</div><div>    } else {</div><div>      miniTab.slideObj.style.left = miniTab.destX + "px";</div><div>      miniTab.slideObj.style.width = miniTab.destW +"px";</div><div>    }</div><div>  },</div><div><br /></div><div>  animate: function(t,b,c,d) {</div><div>    if ((t/=d/2) <><div>    return -c/2 * ((--t)*(t-2) - 1) + b;</div><div>  }</div><div>}</div><div><br /></div><div>window.onload = miniTab.init;</div><div>window.onunload = miniTab.cleanUp;</div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><!-- Paste this code into the HEAD section of your HTML document.</div><div>     You may need to change the path of the file.  --></div><div><br /></div><div><script type="text/javascript" src="miniTab.js"></script></div><div><br /></div><div><br /></div><div><br /></div><div><!-- Paste this code into the BODY section of your HTML document  --></div><div><br /></div><div><h2>Animated Mini Tabs</h2></div><div><ul id="miniflex"></div><div>  <li><a href="/about/" title="">About</a></li></div><div>  <li><a href="/archives/" title="">Archives</a></li></div><div>  <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li></div><div>  <li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li></div><div>  <li><a href="/contact/" title="">Contact</a></li></div><div></ul></div><div>