jQuery menu

When you say fixed menu, you mean fixed in the window frame and not fixed in the scrollable content, which is what we usually see, correct? And regardless of where it appears in the window, it’s just the usual typical menu where the current page has different styling, yes?

If so, this is just a simple CSS change of top and bottom properties between 0 and auto, where position: fixed;. You can use jQuery or javascript to set this, a different script for the home page than other pages. Or do so with templates and PHP by outputting one nav container class for the home page and another for all other pages.

Yes, I want it to be fixed to the window frame. I’ve done something in CSS that achieves the goal, but without the smooth transition from the bottom to the top when pressing on any of the menu items. –> CSS example.

I initially wasn’t too sure how focused you were on the transition effect, but I see now it is the entire focus. I can be a little slow sometimes, sorry.

There’s any number of animation effects, using HTML5 and CSS3, and/or jQuery. For simple positioning, even javascript can work by decrementing the CSS top or bottom dimension in a loop until it hits 0. You should experiment with running the animation on the current page onclick but before the actual next page request or on the requested page onload. There’s issues and benefits with each approach. If onload, the page can decide if it should run the animation or not based on the HTTP referer field.

I’m not sure it’s possible at all to animate transitions when the back button is used. You may have to let that one go.

I’ve looked into the HTML5 animation possibility, but I ended up with this jQuery script:

$(‘a’).click(onClick);

function onClick() {

$(“#nav-wrap”).animate({
bottom: ( $(window).height() – $(“#nav-wrap”).height() )
}, 2000);

}

This sorts out my initial problem, but is there a way to delay the url forwarded by the link thats pressed in the WordPress menu system? The jQuery script wont finish until the new page appears.

Maybe something like this?

$(‘#nav-wrap’).click(function(event) {
event.preventDefault()

var url = $(this).attr(‘href’);

$(‘#nav-wrap’).animate({
bottom: ( $(window).height() – $(“#nav-wrap”).height() )
}, 2000, function(){

window.location = url;

});
return false;
})

I keep getting undefined url on this example though.