🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The jQuery pushmenu.js plugin helps developers to generate a multi-level, mobile-friendly offcanvas navigation from nested HTML lists.

off-canvas-menu mobile-men

Documentation

jquery.pushmenu.js

A simple jquery Plugin for a nice-looking push menu.

Browser compatibility

The plugin is developed for all common Browsers. If you found an issue, let me know. :)

Features

  • creates and pushMenu-Button
  • duplicate the given Menu and create new structure
  • set color and background
  • set position -> slide in from left or right
  • breakpoint for max-width to show

Install

jQuery is required, so include it first. Then Download jquery.pushmenu.js and jquery.pushmenu.css.
Include the scripts inside your HTML file.
IMPORTANT: you need the JS and the CSS file!

Usage

$(function() {     $('ul#pushmenu-test').pushMenu(options); }); 

Where options is an optional parameter. Below you can see the description of all available options and default settings. The above example is the basic usage of the plugin.

Options

The default options are: { title: 'Navigation', position: 'left' }

All available options

  • title - set the title of the push menu navigation
  • color - set the color of all menu items
  • backgroundColor - set the background-color of the push menu
  • position - default value is left -> the menu slides in from left, set it to right and the menu slides in from right
  • breakpoint - set max-width for display the menu and button (set only the number e.g. for 1200px -> 1200)

License

jquery.pushmenu.js and jquery.pushmenu.css is licensed under The MIT License (MIT)
Copyright (c) 2018 Thomas Schwarz

This license is also supplied with the release and source code.
As stated in the license, absolutely no warranty is provided.

  _____ _                      ___     _                       ___  __   |_   _| |_  ___ _ __  __ _ __/ __| __| |___ __ ____ _ _ _ ___/ _ \/ /     | | | ' \/ _ \ '  \/ _` (_-<__ \/ _| ' \ V  V / _` | '_|_ /\_, / _ \    |_| |_||_\___/_|_|_\__,_/__/___/\__|_||_\_/\_/\__,_|_| /__| /_/\___/ 

You May Also Like