Minimalist Responsive Nav Menu with jQuery and CSS

File Size: 47.3 KB
Views Total: 5448
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Responsive Nav Menu with jQuery and CSS

A jQuery & CSS/CSS3 based menu that utilizes media queries to detect the screen size and turns the regular navigation into a toggleable dropdown menu with a smooth sliding effect in mobile view.

How to use it:

1. Create a normal navigation menu for your website.

<div class="menu">
  <div class="openMenu">Open Menu</div>
    <li><a href="#">Home</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Serivces</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>

2. The basic CSS styles to create a horizontal navigation menu on desktop.

.menu {
  overflow: hidden;
  background-color: #FC6D58;
  border-bottom: 5px solid #34495E;

.menu ul li { float: left; }

.menu ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;

.menu ul li a:hover { background-color: #34495E; }

3. Uses CSS3 media queries to set the breakpoint and transform the horizontal menu into a dropdown menu with a toggle control.

.openMenu {
  background-color: #2C3E50;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  display: none

@media (max-width: 700px) {

.openMenu { display: block }

.menu ul { display: none }

.menu ul li { float: none }

.menu ul li a {
  border-right: none;
  border-bottom: 1px solid #555

@media (min-width: 700px) {

.menu ul { display: block!important }


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

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

5. The JavaScript to enable the responsive menu.

  var a = 0;
    if ( a == 0 ){
    } else {
      a = 0;

This awesome jQuery plugin is developed by kocakmhmt. For more Advanced Usages, please check the demo page or visit the official website.