»
EnglishFrenchVietnamese

Print - Tag Mover Menu - JavaScriptBank.com

Full version: jsB@nk » Menu » Tag Mover Menu
URL: https://www.javascriptbank.com/tag-mover.html

Tag Mover Menu © JavaScriptBank.comThis JavaScript slides a colored background behind a set of JavaScript navigation tabs. Easy to customize

Full version: jsB@nk » Menu » Tag Mover Menu
URL: https://www.javascriptbank.com/tag-mover.html



CSS
<style type="text/css">#home_tag {border:1px solid black; width: 100; height: 50; z-index: 10}#home_label {width: 100; height: 50; position: absolute; top: 100; left: 100; z-index: 9}#chiefs_tag {border:1px solid black; width: 100; height: 50; z-index: 12}#chiefs_label {width: 100; height: 50; position: absolute; top: 100; left: 200; z-index: 11}#members_tag {border:1px solid black; width: 100; height: 50; z-index: 14}#members_label {width: 100; height: 50; position: absolute; top: 100; left: 300; z-index: 13}#pictures_tag {border:1px solid black; width: 100; height: 50; z-index: 16}#pictures_label {width: 100; height: 50; position: absolute; top: 100; left: 400; z-index: 15}#links_tag {border:1px solid black; width: 100; height: 50; z-index: 18}#links_label {width: 100; height: 50; position: absolute; top: 100; left: 500; z-index: 17}</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"><!-- var where_to;var the_timeout;function moveIt(){if (background_tag.style.left<where_to){background_tag.style.left=parseInt(background_tag.style.left) + 10;}if (background_tag.style.left>where_to){background_tag.style.left=parseInt(background_tag.style.left) - 10;}the_timeout = setTimeout('moveIt()', 10);}function getOverIt(the_tag){clearTimeout(the_timeout);moveIt();where_to=the_tag.style.left;}--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div id="background_tag" style="background: green none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial; width: 100px; height: 50px; position: absolute; top: 100px; left: 100px; z-index: 8;"></div><div id="home_tag" onmouseover="getOverIt(home_tag);" style="position: absolute; top: 100px; left: 100px;"></div><div id="chiefs_tag" onmouseover="getOverIt(chiefs_tag);" style="position: absolute; top: 100px; left: 200px;"></div><div id="members_tag" onmouseover="getOverIt(members_tag);" style="position: absolute; top: 100px; left: 300px;"></div><div id="pictures_tag" onmouseover="getOverIt(pictures_tag);" style="position: absolute; top: 100px; left: 400px;"></div><div id="links_tag" onmouseover="getOverIt(links_tag);" style="position: absolute; top: 100px; left: 500px;"></div><div align="center" id="home_label"><a href="http://JavaScriptBank.com/">Home</a></div><div align="center" id="chiefs_label"><a href="http://JavaScriptBank.com/">More Free Scripts</a></div><div align="center" id="members_label"><a href="http://JavaScriptBank.com/">JSBank</a></div><div align="center" id="pictures_label"><a href="http://theguestbook.com/">Free Guestbook</a></div><div align="center" id="links_label"><a href="http://thecounter.com/">Free Site Counter</a></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->