WordPress.org

Ready to get started?Download WordPress

Forums

jQuery menu (6 posts)

  1. MatiasLN
    Member
    Posted 5 months ago #

    Hi!

    I want to create a menu system based on this: http://boston.html.themeforest.createit.pl/index-slogan.html#MainHeader

    The idea is to have the menu fixed at the bottom and on the top on the other pages with the transition from home to any of the other menu items. I do not want the other menu items in the menu to have the same scrolling effect though. They should remain static when going from item to item and the menu should scroll to the bottom when returning to the home page.

    I figured jQuery would be the best option to do this, but I have no idea how to achieve this solution. Does anyone have any pointers?

    [Moderator Note: Please ensure that you are embedding links correctly in your posts.]

  2. bcworkz
    Member
    Posted 5 months ago #

    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.

  3. MatiasLN
    Member
    Posted 5 months ago #

    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.

  4. bcworkz
    Member
    Posted 5 months ago #

    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.

  5. MatiasLN
    Member
    Posted 5 months ago #

    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.

  6. MatiasLN
    Member
    Posted 5 months ago #

    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.

Reply

You must log in to post.

About this Topic