Full version: jsB@nk » Menu » Navigation » Animated MiniTabs
URL: https://www.javascriptbank.com/animated-minitabs.html
A sleek animation effect using tabs for a slide JavaScript navigation bar. Degrades very nicely when JavaScript is turned-off.
Full version: jsB@nk » Menu » Navigation » Animated MiniTabs
URL: https://www.javascriptbank.com/animated-minitabs.html
<style type="text/css">#miniflex { width: 100%; float: left; font-size: small; /* could be specified at a higher level */ margin: 0; padding: 0 10px 0 10px; border-bottom: 1px solid #696; position:relative; z-index:2;}#miniflex li { float: left; margin: 0; padding: 0; display: inline; list-style: none; position:relative;}#miniflex a:link, #miniflex a:visited { float: left; font-size: 85%; line-height: 20px; font-weight: bold; margin: 0 10px 0 10px; text-decoration: none; color: #9c9;}#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover { border-bottom: 4px solid #696; padding-bottom: 2px; color: #696;} #animated-tab { position: absolute; z-index: 1; font-size: 85%; line-height: 20px; padding-bottom: 2px; border-bottom: 4px solid #696;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">// Created by: Brian McAllister :: http://www.frequency-decoder.com//*Animated miniTabs by frequency decoderFurther information on this script can be locatedon the authors Web site http://www.frequency-decoder.com/Based on an idea by Rob L Glazebrook(http://www.rootarcana.com/test/smartmini/)which was derived from the original idea of Stephen Clark(http://www.sgclark.com/sandbox/minislide/)Changes=======05/03/06 : Creation08/03/06 : Added the cleanUp method to stop IE memory leaks.This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" licenseYou are free: 1. to copy, distribute, display, and perform the work. 2. to make derivative works.Under the following conditions: 1. **Attribution*: You must attribute the work in the manner specified by the author or licensor. 2. Noncommercial*: You may not use this work for commercial purposes.* 3. Share Alike*: If you alter, transform, or build upon this work, you may distribute the resulting work only under a license identical to this one.*/var miniTab = { currentTab: 0, activeTab: 0, destX: 0, destW: 0, t: 0, b: 0, c: 0, d: 20, animInterval: null, sliderObj: null, aHeight: 0, init: function() { if(!document.getElementById || !document.getElementById("miniflex")) return; var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); for(var i = 0, li; li = liArr[i]; i++) { liArr[i].onmouseover = aArr[i].onfocus = function(e) { var pos = 0; var elem = this.nodeName == "LI" ? this : this.parentNode; while(elem.previousSibling) { elem = elem.previousSibling; if(elem.tagName && elem.tagName == "LI") pos++; } miniTab.initSlide(pos); } } ul.onmouseout = function(e) { miniTab.initSlide(miniTab.currentTab); }; for(var i = 0; i < aArr.length; i++) { if(document.location.href.indexOf(aArr[i].href)>=0) { miniTab.activeTab = miniTab.currentTab = i; } aArr[i].style.borderBottom = "0px"; aArr[i].style.paddingBottom = "6px"; } miniTab.slideObj = ul.parentNode.appendChild(document.createElement("div")); miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160))); miniTab.slideObj.id = "animated-tab"; miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px"; miniTab.slideObj.style.left = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px"; miniTab.slideObj.style.width = aArr[miniTab.activeTab].offsetWidth + "px"; miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop; miniTab.initSlide(miniTab.activeTab, true); var intervalMethod = function() { miniTab.slideIt(); } miniTab.animInterval = setInterval(intervalMethod,10); }, cleanUp: function() { clearInterval(miniTab.animInterval); miniTab.animInterval = null; }, initSlide: function(pos, force) { if(!force && pos == miniTab.activeTab) return; miniTab.activeTab = pos; miniTab.initAnim(); }, initAnim: function() { var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft); miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth); miniTab.t = 0; miniTab.b = miniTab.slideObj.offsetLeft; miniTab.c = miniTab.destX - miniTab.b; miniTab.bW = miniTab.slideObj.offsetWidth; miniTab.cW = miniTab.destW - miniTab.bW; miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px"; }, slideIt:function() { var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); // Has the browser text size changed? if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) { miniTab.initAnim(); miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop }; if(miniTab.t++ < miniTab.d) { var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d); var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d); miniTab.slideObj.style.left = parseInt(x) + "px"; miniTab.slideObj.style.width = parseInt(w) + "px"; } else { miniTab.slideObj.style.left = miniTab.destX + "px"; miniTab.slideObj.style.width = miniTab.destW +"px"; } }, animate: function(t,b,c,d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }}window.onload = miniTab.init;window.onunload = miniTab.cleanUp;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><ul id="miniflex"> <li><a href="/about/" title="">About</a></li> <li><a href="/archives/" title="">Archives</a></li> <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li> <li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li> <li><a href="/contact/" title="">Contact</a></li></ul><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->