Free Responsive Navigation Menu using CSS and jQuery

After long time, I’m going to share a new post “Free Responsive Navigation Menu using CSS and jQuery” 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 free responsive menu using css and jQuery which I used in my website project. Its called okayNav menu

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

HTML Code

&lt;header id=&quot;header&quot;&gt;

    &lt;a class=&quot;site-logo&quot; href=&quot;#&quot;&gt;

       Logo

    &lt;/a&gt;
  
 

    &lt;nav role=&quot;navigation&quot; id=&quot;nav-main&quot; class=&quot;okayNav&quot;&gt;

        &lt;ul&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Shop&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contacts&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About us&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Testimonials&lt;/a&gt;&lt;/li&gt;

        &lt;/ul&gt;

    &lt;/nav&gt;

&lt;/header&gt;

jQuery code

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

&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;script src=&quot;js/jquery.okayNav.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

        var navigation = $('#nav-main').okayNav();

&lt;/script&gt;

View Live Demo

Credit – https://github.com/VPenkov