How to create an animated menu, with smoothscroll pane similar to chart.io and simple.com

Question

I'm trying to create a 1 page website that has a menu across the top in a similar style to chart.io or simple.com, can anyone point me in the direction of a good tutorial? I've searched using google but I've not managed to come up with anything that does something like what I'm trying to do.

I currently have Mootools smooth scroll doing the scroll however I'm having trouble animating the element under the menu item.

Any and all help is greatly appreciated...

Answer 1

Start making the header menu fixed using CSS:

#header {
    position: fixed;
    top: 0;
    left: 0;
}

Then you can use a Mootools plugin like this one:

http://davidwalsh.name/mootools-scrollspy
Demo: http://davidwalsh.name/dw-content/scroll-spy.php?page=3

As you can see, with this plugin you can easily get the scroll position, so you can place the triangle under the menu in the correct position.

To animate the triangle, you just need some basic tween animation. HTML will be something like this:

<div id="header">
    Your header here
    <div id="triangle">
        <img src="triangle.png" alt="">
    </div>
</div>

CSS:

#header #triangle {
    position: absolute;
    bottom: 0;
    left: 0;
}

Mootools tween for animation, this will move the triangle smoothly from it's current position to 300px from the left:

$('triangle').tween('left', 300);

Hope this will help you!