Question

So I’m building a responsive navigation menu that’s ‘fixed’ to the top, it’s ‘bootstrap’ style with a thing bar and a button that shows the navigation when you click on it.

HTML

<nav class="hiddennav displaynone">
    <ul>
        <?php wp_nav_menu(array('menu' => 'Main Nav menu')); ?>
   </ul>
</nav> <!-- end div hiddennav -->   
<div class="fixednav fixed">
    <div class="smalllogo">
        <h1 class="smaller"><a class="whitelink" href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    </div> <!-- end div smalllogo -->
    <div class="shownav">
        <a href="#" class="shownavbutton"></a>
    </div> <!-- end div shownav --> 
</div> <!-- end div fixednav -->

Javascript :

$(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
    });
});

 $(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
    });
});

What it does is change the position of the bar below the ‘hidden nav’ to relative so that doesn’t float around the page if the user scrolls after clicking it and then ‘show’ the hidden nav above it.

The problem is though, it’s just not as slick as it could be, number one it jumps them to the top of the page and two, it isn’t animated, it’s too abrupt.

Kind of stumped for an idea how to animate the function.

Anyone help?

Answer 1

The “jump to top” behavior it’s because you are binding the click event to an “a” anchor tag with empty marker “#”. That’s not wrong, but you have to tell the browser to not scroll to top after the link is clicked. You can do this returning false in the click event, or calling e.preventDefault() (don’t forget to add “e” parameter to callback function).

For the animation, you could use slideDown or fade jquery animation methods.

Also you don’t have to make 2 bindings to the same element with the same event, you can just have one binding (it’s the same, but more cleaner).

Example:

$(document).ready(function(){ 
    $(".shownavbutton").click(function(e) {
        e.preventDefault(); 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
        $(".hiddennav").hide().slideDown("normal", "linear");
    });
});