basicResponsiveMenu

This plugin gives you a responsive menu with as little hassle as possible.

The demo folder contains a demo index.html file, showing example markup. The plugin files are located in the root folder.

How To Use

Markup

Essentially, all you need to do is to add the class response--main-navigation to the wrapper around your menu, and the class response--site-menu to the menu itself.

Example:

<nav class="response--main-navigation">
	<ul class="response--site-menu">
		<li><a href="#">HOME</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Cases</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Setup

The plugin consists of a JS and a CSS file, and the only dependency you need to install is jQuery.

In the <head> section, include: <link rel="stylesheet" href="PATH_TO_PLUGIN_CSS/basicResponsiveMenu.css">

Either in the <head> section, or before the closing <body> tag, include: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> and <script src="PATH_TO_PLUGIN_JS/basicResponsiveMenu.js"></script>

You initialize the plugin with:

<script>
$(function(){
	$('.response--main-navigation').basicResponsiveMenu();
});
</script>

If you wish to change the default options, you can do it as follows:

$('.response--main-navigation').basicResponsiveMenu({
	browserWidth:960,
	slideDir:'left',
	slideSpeed:400
});

Options

There's four different options available, listed below with their default values:

browserwidth: 768,        // At which screen size do you want to transition from a horizontal to a hamburger menu?
animate:      true,       // Do you want the menu to animate in, or simply appear?
slideDir:     'right',    // which direction do you want the menu to slide to? 'right' or 'left'?
slideSpeed:   250         // the speed with which the menu slides in, set in ms

Styling

The plugin CSS file only contains the most basic styling needed for the plugin to work. The design part is up to you, depending on what fits with your needs.