clear-menu
v1.0.0
Published
A simple mobile menu jQuery plugin
Downloads
2
Readme
ClearMenu
A simple mobile menu that is easy to integrate into a new or existing project. ClearMenu is actually two separate components acting as one; a panel that is revealed into the viewport, and a mobile menu.
This is a developer focused plug-in. It is not meant to solve all navigation patterns but instead provide a base for you to build upon. The scss
is just enough to make all the components work properly, but it is expected that you will hack it to fit the design of your specific project.
Demo
Getting Started
Include clearmenu.scss
and clearmenu.js
into your build process and compile. These files are left unprocessed/unoptimized on purpose. NOTE: jQuery 2.x or higher is a required dependency
Usage
The markup for ClearMenu is minimal, and composed of three primary components:
The Panel
The panel is just a container for whatever content you want to be revealed. This will most commonly be a <div>
, <section>
, or <nav>
. The only mandatory attribute is a class of cm-panel
.
<div class="cm-panel">
<!-- code -->
</div>
The Menu
The menu is just a standard <ul>
. It is mandatory for the menu to have a class of .cm-menu
.
<nav id="panel" class="cm-panel">
<ul class="cm-menu">
<li><a href="#">Link</a></li>
<li>
<a href="#">Link</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</nav>
The Trigger
The trigger is whatever element you want to trigger the panel to be revealed when clicked. Anything can be a trigger, but most commonly this will be an <a>
or <button>
.
If using the trigger as a navigational button, you have a few options:
<!-- Standard hamburger icon -->
<button class="cm-button">
<span class="cm-button_icon"></span>
</button>
<!-- Text only -->
<button class="cm-button">
<span class="cm-button_text">Menu</span>
</button>
<!-- Both -->
<a class="cm-button">
<span class="cm-button_text">Menu</span>
<span class="cm-button_icon"></span>
</a>
Calling with jQuery
Call ClearMenu inline or within an external JS file:
<script>
$(function() {
$('#panel').clearmenu();
});
</script>
Options
ClearMenu has a few options to alter its behavior. Below are the available options and their default settings:
<script>
$(function() {
$('#panel').clearmenu({
panel: this, // the element to act as the panel
trigger: '.cm-button', // the element that will trigger the selected panel when clicked
reveal: 'top', // the reveal animation. Can be fade, top, bottom, left, or right.
hasSubMenu: true, // if the menu should provide functionality for sub-menus or not
subMenu: '.cm-submenu', // the class or ID of the sub-menu
speed: 200, // panel animation speed
close: false, // show a close button in the panel
wordpress: false // if this panel is being used in a WordPress theme. When true, the default WordPress menu classes will automatically be used
});
});
</script>
Using with WordPress
You can use ClearMenu with WordPress in two steps.
First build your menu:
<?php
wp_nav_menu([
'theme_location' => 'your-menu',
'container_class' => 'cm-panel',
'menu_class' => 'cm-menu menu'
]);
?>
Then set the {wordpress: true}
option. This tells ClearMenu that it is functioning within WordPress, and thus targets the proper WordPress menu classes for functionality.
<script>
$(function() {
$('.cm-panel').clearmenu({
wordpress: true
});
});
</script>