« »

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

Label: Animated MiniTabs

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

<script language="javascript">

// Created by: Brian McAllister :: http://www.frequency-decoder.com/

/*
Animated miniTabs by frequency decoder
Further information on this script can be located
on 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 : Creation
08/03/06 : Added the cleanUp method to stop IE memory leaks.

This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" license

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

Copy All x2

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

Comment (1)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Brian McAllister [more]
5,501
1
3
0
8.61 KBytes

JavaScript Animated MiniTabs

4/5 3 votes / 5,501 previews / 1 comment 30/01/2007 A sleek animation effect using tabs for a slide ...JavaScript Animated MiniTabs - Animated MiniTabs

Let's be first member to do this

debwalker coldblood duchien to88z dnap hanhufo himssu_nvc ttv1 kaka121411 scorpion231086

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Animated MiniTabs

Label: Animated MiniTabs (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Animated MiniTabs