After long time, I’m going to share a new post which I found recently in github and it was very help to me in my earlier project. Now a days, all the website owners are updating their sites to responsive due to increase in mobile usage by people all over the world.

Here is the responsive menu using css and jQuery which I used in my website project. Its called okayNav menu

free responsive navigation menu using css and jquery

This menu automatically collapse into off-screen navigation as well.

HTML Code

<header id="header">
    <a class="site-logo" href="#">
       Logo
    </a>

    <nav role="navigation" id="nav-main" class="okayNav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Testimonials</a></li>
        </ul>
    </nav>
</header>

 

jQuery code

You need to use jQuery plugin inorder to get the swipe effect

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.okayNav.js"></script>
<script type="text/javascript">
        var navigation = $('#nav-main').okayNav();
</script>

View Live Demo Download

Credit – https://github.com/VPenkov

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2016/02/free-responsive-navigation-menu-using-css-and-jquery.gifhttp://w3lessons.info/wp-content/uploads/2016/02/free-responsive-navigation-menu-using-css-and-jquery-150x150.gifKarthikeyan KCSS3Freebiesjquerymenu,responsive
After long time, I'm going to share a new post which I found recently in github and it was very help to me in my earlier project. Now a days, all the website owners are updating their sites to responsive due to increase in mobile usage by people all...