»
EnglishFrenchVietnamese

Print - Animated MiniTabs - JavaScriptBank.com

Full version: jsB@nk » Menu » Navigation » Animated MiniTabs
URL: https://www.javascriptbank.com/animated-minitabs.html

Animated MiniTabs © JavaScriptBank.comA 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



CSS
<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-->


JavaScript
<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-->


HTML
<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-->