Responsive Full-width Mobile Navigation Menu With jQuery and CSS

Mobile responsive navigation menu toggle is a responsive, full-width, mobile-first navigation that allows you to expose a slide menu with the jQuery.

responsive slide toggle menu, responsive navigation bar, hamburger menu css responsive, bootstrap responsive navigation menu, mobile menu toggle

How to make use of it:

1. Create a list of links for your navigation.

<div class="menu">
    <a href="#">
    <li>I. Home</li>
    </a> <a href="#">
    <li>II. About</li>
    </a> <a href="#">
    <li>III. Services</li>
    </a> <a href="#">
    <li>IV. Blog</li>
    </a> <a href="#">
    <li>VI. Contact</li>

2. CSS navigation menu design.

.menu {
  background: #1abc9c;
  display: none;
  width: 100%;

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;

.menu ul li {
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 15px 0;
  text-transform: uppercase;

.menu ul li:hover { background: #16a085; }

.menu a {
  text-decoration: none;
  color: #fff;

Responsive & Flickable Carousels Content Slider Plugin | flickity

3. Create a link to toggle the navigation menu.

<a href="#" class="toggle">toggle</a>

4. Download the latest version of the jQuery library at the bottom of the web page.

<script src="//"></script> 

5. JavaScript to reveal the navigation menu while clicking the toggle link.


Create A Responsive Slide Toggle Navigation Plugin/Github

See Demo And Download

Official Website(riogrande): Click Here

This superior jQuery/javascript plugin is developed by riogrande. For extra Advanced Usages, please go to the official website.

Related Posts


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…


A Modern GIF | Emoji Picker Vue3 Components For Your App

vue3 discord picker is a new emoji/gif picker for your app! based on disagreement. This component is only available in vue3. Reworking the Print and Configuration API….