Auto Hides Fixed Top Navigation Menu

Submitted by alpha_luna on Wednesday, August 3, 2016 - 11:56.

Auto Hides Fixed Top Navigation Menu

Today, we are going to create Auto Hides Fixed Top Navigation Menu with jQuery and CSS. We are going to use the basic jQuery plugins to do this kind of tutorials. Using it, we create fixed top navigation menu in the header of the page and it will autohide the menu when the user scrolls down the window but it will show it out again when it scrolling up the window again. Let’s take a look the tutorial below to know how to create.

Demo

How to Use it

Creating Markup

1. Create your top navigation menu of your page.

<div id="menu_header" class="menu_header-min">
        <a href="http://www.sourcecodester.com/">Programming</a>
        <a href="http://www.sourcecodester.com/programming">>Mobile</a>
        <a href="http://www.sourcecodester.com/mobile">Blog</a>
        <a href="http://www.sourcecodester.com/blog">Articles</a>
        <a href="http://www.sourcecodester.com/article">Tutorials</a>
        <a href="http://www.sourcecodester.com/tutorial">Contact</a>
</div>

2. Constructing the CSS to make it stick your navigation menu to the top of your page.

#menu_header {
                
        background: -webkit-linear-gradient(#585858,#3d3d3d);
        border:1px solid #222;
        color: #fff;
        position: fixed;
        font-size:20px;
        z-index: 1000;
        display: block; 
        top: 0;
        left: 0;
        width: 100%;
        padding: 30px;
        text-align: center;
        overflow:hidden;
    -webkit-transition: 500ms all ease-in-out;
        -moz-transition: 500ms all ease-in-out;
        -ms-transition: 500ms all ease-in-out;
        -o-transition: 500ms all ease-in-out;
}

3. And, this CSS codes for the hide of your navigation menu to the top of your page.

.menu_header-close {    
        -moz-transform: translateY(-100%);
         -ms-transform: translateY(-100%);
         -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
        opacity: 0; 
}

4. This is our simple body content. Kindly copy and paste to your BODY tag of your page.

<div id="content">
        <h1>Auto Hides Fixed Top Navigation Menu</h1>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales tortor mauris, 
        vitae lobortis ex tincidunt vulputate. Aenean ultrices libero eget rutrum suscipit. Fusce blandit 
        ipsum vitae nibh molestie, sit amet ultrices urna convallis. Vivamus at velit at magna ultrices pulvinar 
        vitae sit amet nunc. Nunc at pretium nisl. Praesent sollicitudin lacus sapien, vel sagittis leo venenatis vitae. 
        Praesent id velit sapien. Aliquam mattis diam eget sollicitudin rhoncus. Nam sit amet nibh ligula. Maecenas hendrerit
        neque id felis gravida fermentum. Ut condimentum est sodales mi dignissim, in placerat justo pretium. Phasellus a ex nunc.</p>
 
        <p>Curabitur dictum ipsum ac commodo porta. Maecenas et tortor quis nisl dictum molestie in eu erat. Nunc volutpat 
        enim vitae enim ultrices varius. Sed vitae orci eget leo bibendum malesuada sed efficitur justo. Sed ipsum magna, 
        lacinia eu est pharetra, vestibulum vehicula massa. Duis in dictum enim, quis porta est. Interdum et malesuada fames 
        ac ante ipsum primis in faucibus. Duis malesuada, urna a ultricies lacinia, arcu neque iaculis quam, sed viverra velit
        mauris vitae mi. Quisque maximus sollicitudin leo, in finibus nisl sodales mattis. Proin congue arcu at erat vestibulum, 
        eget tristique metus aliquam. Vestibulum feugiat venenatis diam vitae consequat. Integer non volutpat ex. Etiam egestas, 
        justo in hendrerit tempus, neque dolor vulputate justo, feugiat suscipit leo dolor ac nibh. Vestibulum massa eros, condimentum 
        sed imperdiet ac, pharetra ut tellus.</p>
</div>  

5. This script you are going to use for the hide of your fixed navigation menu.

<script>
//scroll hide   
                var lastScrollTop = 0;          
                                    
            $(document).on('scroll', $.throttle(function() {
                
                var stop = $(this).scrollTop();
                        
                        if($(window).scrollTop() > (80)) {              
                if (stop > lastScrollTop){
                    console.log('down');
                    // scrolling down
                        if($('#menu_header').hasClass('menu_header-min'))
                        {
                            $('#menu_header').addClass('menu_header-close');
                            $('#menu_header').removeClass('menu_header-min');
                        }
                    }
                else
                {
                        // scrolling up
                        if($('#menu_header').hasClass('menu_header-close'))
                        {
                            console.log('up');
                            $('#menu_header').addClass('menu_header-min');
                            $('#menu_header').removeClass('menu_header-close');
                        } 
                } 
                lastScrollTop = stop;
                }
                        
            }, 100));
</script>

Output

Hope that this simple yet useful tutorials that I created may help you to your future projects. That's it, kindly click the "Download Code" button below for the full source code. And try it to customize your own Auto Hides Fixed Top Navigation Menu. Enjoy coding. If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

17 views