SwAnimatedMenu
download
INTRODUCTION
Quick porting of the JQuery code found here: http://css-tricks.com/examples/MagicLine into a mootools class. And I find it lighter, easier for the same result. I love element.morph! you can add/remove style in the .item1 ... .item5 class in the CSS. Only drawback: morph does not seem to work with rgba colors. Nevermind, still like it...
FEEDBACK: Comment on post or sign up and go to the forum section: click here
EXAMPLE
STEP BY STEP INSTRUCTIONS
1- Create a section in your HTML with a list item like:
<ul id="example">
<li><a href="#">Home</a></li>
<li><a href="#">Buy Tickets</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">The Show</a></li>
<li id="magic-line" class='item5'></li>
</ul>
2- The last item:
- needs to be empty
- have id='magic-line'
- have class=default selected item
3- CSS:
- copy the following style:
#example { list-style: none; width: 500px; }
ul#example { background-color:black; border-top: 2px solid white; border-bottom: 2px solid white; height: 29px; padding-left:10px;}
#example li { display: inline; }
#example li a { position: relative; z-index: 200; color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example li a:hover { color: white; }
#example #magic-line { position: absolute; height: 29px; overflow: hidden; display: block; top: 0; z-index: 100; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.item1 {width: 61px; left: 10px; background: rgb(50,69,12);}
.item2 {width: 115px; left: 72px; background: rgb(220, 133, 5);}
.item3 {width: 122px; left: 188px; background: rgb(113,116,0);}
.item4 {width: 86px; left: 310px; background: rgb(123,91,230); }
.item5 {width: 100px; left: 397px; background: rgb(90,55,55); }
- change width and left for each item
- adapt width in #example
- replace #example by the id of your list item
4- copy and include the .js files (preferably right before </body>)
<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swAnimatedMenu.js"></script>
5- include this after the lines included in step 4
<script language="JavaScript">
window.addEvent('domready',function() {
var bg = new SwAnimatedMenu('example');
});
</script>
- replace 'example' with the id of your last item
6- (optional) Use the 'onClick' callback by adapting the SwAnimatedMenu instantiation:
- replace the 3rd line of the script in step 5 by:
var bg = new SwAnimatedMenu('example', {onClick: function(){<YOUR_CODE>}});
- replace <YOUR_CODE> by what you want to do when the user clicks on an item of your list item
- you can use:
this.magicLine: returns the element with id 'magic-line' (i.e. $('magic-line))
this.currentClass: return the current selected item (i.e. 'item1'|'item2'....|'itemN')
