Free Responsive Navigation Menu using CSS and jQuery

Thanks to w3lessons for sharing such a useful responsive menu, i do recommend this for your next project is very light weight.
It was I found recently in github and it was very help to me. These days every webmaster is moving to responsive webdesign all over the world.

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

Jquery:

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.

Microsoft and Nokia bundle jQuery on their platforms. Microsoft includes it with Visual Studio for use within Microsoft's ASP.NET AJAX and ASP.NET MVC frameworks while Nokia has integrated it into the Web Run-Time widget development platform. jQuery has also been used in MediaWiki since version 1.16.

What is CSS?

1. CSS stands for Cascading Style Sheets
2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media
3. CSS saves a lot of work. It can control the layout of multiple web pages all at once
4. External stylesheets are stored in CSS files

Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

This is a heading

This is a paragraph.

When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.


With an external stylesheet file, you can change the look of an entire website by changing just one file!

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

<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>

You need to use jQuery plugin in order to get the swipe effect

Demo Download