Question

Playing around with http://tympanus.net/Tutorials/CufonizedFlyOutMenu/
I dropped the fly-in descriptions and now trying to get it to load the extra li with style that would “highlight” the li.current-menu-item.

It sets up an object with:

var $moving = $('<li />',{
    class : 'move',
    top   : $selected[0].offsetTop + 'px',
        width : $selected[0].offsetWidth + 'px'
    });

Later in the code, it is manipulated with:

function moveTo($elem,speed){
    $moving.stop(true).animate({
        top     : $elem[0].offsetTop + 'px',
        width   : $elem[0].offsetWidth + 'px'
    }, speed, 'easeOutExpo');
}

It creates the li item I want…but it shows up like this:

<li class="move" top="41px" style="width: 73px; "></li>

How do I get the top to show up as a style? Everything is mostly working…but upon page load it’s not getting the “top” style until everything starts?

I loaded up a http://jsfiddle.net/jq7YQ/26/ but I can’t get it to work there at all…sigh…but it does work locally?

I’m a rookie…so I’m probably missing something stupid…or there’s a better way to do this? Any thoughts?

Answer 1

The example uses parts of jQuery UI (easing) so you need to include that.
The site links to ‘http://tympanus.net/Tutorials/CufonizedFlyOutMenu/jquery.easing.1.3.js’ and if you add this as a resource in the Fiddle all should work.

http://jsfiddle.net/rlemon/jq7YQ/28/ check it out. All I did was add the jQuery easing file (which is included in jQuery UI)

here is a example for the ‘selected’ part of your issue.