A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

Related tags

Menu jPanelMenu
Overview

#jPanelMenu

###Version 1.4.1

jPanelMenu is a jQuery plugin for easily creating and managing off-canvas content.

Check out the demo (and documentation) site to see it in action.

Check out the changelog to see what’s new.

#How Do I Use This Thing?

Start off by including the jPanelMenu.js file in your page. (Bonus points for using the minified version [jPanelMenu.min.js], or for bundling the jPanelMenu code into your own JavaScript file to reduce size and HTTP requests.)

Build your page as you normally would (the source order does not matter), and instantiate jPanelMenu by calling the plugin constructor function.

var jPM = $.jPanelMenu();

By default, jPanelMenu will look for an element with an ID of menu to use as the menu, and elements with a class of menu-trigger to use as the trigger(s). Either use these IDs and classes on your elements, or pass a custom selector string pointing jPanelMenu to your menu and trigger elements in an object into the constructor function call, as follows:

var jPM = $.jPanelMenu({
	menu: '#custom-menu-selector',
	trigger: '.custom-menu-trigger-selector'
});

Note: Check out the options section for more customizable goodness like the above.

After jPanelMenu has been instantiated (make sure to save the returned object to a variable, as shown above), it’s time to turn it on!

jPM.on();

After that, jPanelMenu will be functioning, and that’s it!

If you want to take things to the next level, keep reading.

#How Does This Thing Work?

When jPanelMenu is turned on, two <div> elements are created. The menu element (with an ID of jPanelMenu-menu), and the panel element (with a class of jPanelMenu-panel). In addition, a class of jPanelMenu is applied to the <html> tag.

The menu, #jPanelMenu-menu, contains the elements targeted by the menu selector passed into the jPanelMenu constructor function. By default, the targeted menu element is cloned into #jPanelMenu-menu, and is not removed from its original position in the DOM. This action can be overridden with the clone option.

The panel, .jPanelMenu-panel, contains all of the content in the element specified by the panel option (except for the elements specified by the excludedPanelContent option). The selected content is moved, not cloned, into .jPanelMenu-panel.

To style or select the menu, use the following selector: #jPanelMenu-menu.

To style or select the content panel, use the following selector: .jPanelMenu-panel.

When jPanelMenu is turned off, the two <div> elements are removed, all of the content inside .jPanelMenu-panel is moved back into the <body> element, and the class of jPanelMenu is removed from the <html> tag.

#Does It Animate?

Of course! (If you want it to, there’s an option for that.)

Animation is handled by CSS transitions, for browsers with support. CSS transitions are hardware-accelerated on supporting devices, so the animations are silky smooth.

For browsers that do not support CSS transitions, the jQuery animation engine is used as a fallback.

#Options

The following options are set via an object passed into the constructor function call, as shown below.

var jPM = $.jPanelMenu({
	menu: '#menu',
	trigger: '.menu-trigger',
	duration: 300
});

###menu

A selector string pointing to the desired menu element.

  • Data Type: string
  • Default Value: #menu

###panel

A selector string pointing to the desired root panel element. Point this to the element containing all content that should go into the panel.

  • Data Type: string
  • Default Value: body

###trigger

A selector string pointing to the menu-triggering element.

  • Data Type: string
  • Default Value: .menu-trigger

###excludedPanelContent

A selector string specifying which elements within the <body> element should not be pushed into .jPanelMenu-panel. The selector string may contain any selector, not just tags.

Generally, <style> and <script> tags should not be moved from their original location, but in certain circumstances (mostly advertising), <script> tags may need to move with the page content.

  • Data Type: string
  • Default Value: style, script

###clone

A boolean value specifying whether or not the targeted menu element should be cloned to create #jPanelMenu-menu, or simply moved in the DOM.

  • Data Type: boolean
  • Accepted Values: true or false
  • Default Value: true

###direction

A string specifying which direction the menu should open from.

  • Data Type: string
  • Accepted Values: left or right
  • Default Value: left

###openPosition

The measurement value for the open position of the menu. Can be set as a pixel, percentage, or em value.

  • Data Type: string
  • Examples: 250px, 75%, 20em
  • Default Value: 250px

###animated

A boolean value specifying whether or not the opening and closing of the menu should be animated.

When using the API functions open( ), close(), and trigger(), this setting can be overridden by passing in true as the parameter. More info in the API section.

  • Data Type: boolean
  • Accepted Values: true or false
  • Default Value: true

###closeOnContentClick

A boolean value specifying whether or not the menu should be closed when clicking on the panel content.

  • Data Type: boolean
  • Accepted Values: true or false
  • Default Value: true

###keyboardShortcuts

An option that allows you to control if keyboard shortcuts are enabled, and if they are, which keys do what.

Setting this option to false will disable keyboard shortcuts entirely. To enable keyboard shortcuts, pass in an array of objects. Each enabled key gets its own object in the array and each object should be structured as follows:

{
	code: 27, /* Keycode of enabled key */
	open: true /* Boolean (true or false), specifying whether or not key should open the menu */
	close: false /* Boolean (true or false), specifying whether or not key should close the menu */
}
  • Data Type: array or boolean

  • Accepted Values: array or false

  • Default Value:

    [ { code: 27, /* Escape Key / open: false, close: true },{ code: 37, / Left Arrow Key / open: false, close: true },{ code: 39, / Right Arrow Key / open: true, close: true },{ code: 77, / M Key */ open: true, close: true } ]


###duration

The time, in milliseconds, which it should take to open and close the menu, when animated.

  • Data Type: int
  • Default Value: 150

###openDuration

The time, in milliseconds, which it should take to open the menu, when animated. If set, this overrides the duration option.

  • Data Type: int
  • Default Value: Inherited from duration

###closeDuration

The time, in milliseconds, which it should take to close the menu, when animated. If set, this overrides the duration option.

  • Data Type: int
  • Default Value: Inherited from duration

###easing

The easing function to use when animating the opening and closing of the menu.

  • Data Type: string
  • Accepted Values: linear, ease, ease-in, ease-out, ase-in-out
  • Default Value: ease-in-out

###openEasing

The easing function to use when animating the opening of the menu. If set, this overrides the easing option.

  • Data Type: string
  • Accepted Values: linear, ease, ease-in, ease-out, ase-in-out
  • Default Value: Inherited from easing

###closeEasing

The easing function to use when animating the closing of the menu. If set, this overrides the easing option.

  • Data Type: string
  • Accepted Values: linear, ease, ease-in, ease-out, ase-in-out
  • Default Value: Inherited from easing

###before

Called before the menu is opened or closed, regardless of animation state.

  • Data Type: function
  • Default Value: function(){ }

###beforeOpen

Called before the menu is opened, regardless of animation state.

  • Data Type: function
  • Default Value: function(){ }

###beforeClose

Called before the menu is closed, regardless of animation state.

  • Data Type: function
  • Default Value: function(){ }

###after

Called after the menu is opened or closed, regardless of animation state.

  • Data Type: function
  • Default Value: function(){ }

###afterOpen

Called after the menu is opened, regardless of animation state.

  • Data Type: function
  • Default Value: function(){ }

###afterClose

Called after the menu is closed, regardless of animation state.

  • Data Type: function
  • Default Value: function(){ }

###beforeOn

Called before the plugin is turned on (when on( ) is called).

  • Data Type: function
  • Default Value: function(){ }

###afterOn

Called after the plugin is turned on (when on( ) is called).

  • Data Type: function
  • Default Value: function(){ }

###beforeOff

Called before the plugin is turned off (when off( ) is called).

  • Data Type: function
  • Default Value: function(){ }

###afterOff

Called after the plugin is turned off (when off( ) is called).

  • Data Type: function
  • Default Value: function(){ }

#API

The following are the methods and properties of the object returned by the jPanelMenu constructor function call. In the following example, these would be the methods and properties of jPM.

var jPM = $.jPanelMenu();

jPM.on();

jPM.trigger(true);

###on( )

Initializes a jPanelMenu instance. Sets up the markup, styles, listeners, and interactions, according to the options passed into the constructor function.

  • Returns: null

###off( )

Destroys a jPanelMenu instance. Resets the markup and styles, removes listeners and interactions.

  • Returns: null

###trigger( animated )

Triggers the opening or closing of the menu, depending on the current state (open or closed).

  • Parameters:
    • animated
      • A boolean value that determines whether or not to animate the action. The action will animate if set to true, and will not animate if set to false. If no value is set, the value of the animated option will be used.
      • Data Type: boolean
      • Accepted Values: true or false
  • Returns: null

###open( animated )

Triggers the opening of the menu.

  • Parameters:
    • animated
      • A boolean value that determines whether or not to animate the action. The action will animate if set to true, and will not animate if set to false. If no value is set, the value of the animated option will be used.
      • Data Type: boolean
      • Accepted Values: true or false
  • Returns: null

###close( animated )

Triggers the closing of the menu.

  • Parameters:
    • animated
      • A boolean value that determines whether or not to animate the action. The action will animate if set to true, and will not animate if set to false. If no value is set, the value of the animated option will be used.
      • Data Type: boolean
      • Accepted Values: true or false
  • Returns: null

###isOpen( )

Checks the current state of the menu. Returns true if the menu is currently open, and false if it is closed.

  • Returns: boolean, true or false

###menu

A property equal to the raw selector string of the created menu object.

  • Data Type: string

###getMenu( )

Returns a jQuery Object containing the created menu object.

  • Returns: jQuery Object

###panel

A property equal to the raw selector string of the created panel object.

  • Data Type: string

###getPanel( )

Returns a jQuery Object containing the created panel object.

  • Returns: jQuery Object

###setPosition( position )

Sets the measurement value for the open position of the menu. Can be set as a pixel, percentage, or em value.

  • Parameters:
    • position
      • A measurement value, set as a pixel, percentage, or em value.
      • Data Type: string
      • Examples: 250px, 75%, 20em
  • Returns: null

#Tips, Best Practices, and Other Good Ideas (with Examples)

jPanelMenu was built to be very open-ended and allow a lot of customization for each implementation. A lot of the customization of jPanelMenu implementations will start with the easy hooks provided by the plugin.

When jPanelMenu is turned on, the following elements are created (or classes applied, in the case of the <html> tag):

<html class="jPanelMenu">
	<head>
		...
	</head>
	<body>
		<div id="jPanelMenu-menu" />
		<div class="jPanelMenu-panel" />
	</body>
</html>

Note: Content abbreviated for simplicity.

In addition, there are a few helpful things to know that will improve specific implementations, regardless of use case.

###Stylin’

There are no default graphical styles injected into your page by jPanelMenu, because, as a developer who loves complete control over my pages, there is nothing I dislike more than plugins which do that. Therefore, all graphical styling is up to you, and jPanelMenu makes it very easy.

When jPanelMenu is turned on, two <div> elements are created. The menu element (selector: #jPanelMenu-menu), and the panel element (selector: .jPanelMenu-panel). In addition, a class of jPanelMenu is applied to the <html> tag.

The background color of .jPanelMenu-panel is set by the plugin, and its value is inherited from the <body> element’s background-color.

If the <body> element’s background-color is not set, the <html> element’s background-color is used. If neither is set, the background-color is set to white.

###Progressive Enhancement

Users without JavaScript (whether they have turned it off or are using a device without it) will obviously not get the interactions provided by jPanelMenu. It’s a good idea to take a “progressive enhancement” approach, and build your site to work without JavaScript and jPanelMenu.

A great way to do this is to use the hooks provided to you by jPanelMenu. When jPanelMenu is turned on, the class jPanelMenu is applied to the <html> tag (conversely, when jPanelMenu is turned off, this class is removed).

Build your site as you normally would, without JavaScript and without styles specific to JavaScript interactions or plugins. Restrict all jPanelMenu-specific styles and script actions to elements that are descendents of .jPanelMenu. Styles such as those which hide elements that are unnecessary with jPanelMenu enabled, or scripting actions specific to jPanelMenu functions, should use the .jPanelMenu selector to ensure that their effects only take hold when jPanelMenu is enabled.

That idea was used to create the demo/documentation page.

###jPanelMenu and jRespond — Perfect Together

I'm a huge fan of jRespond, which is “a simple way to globally manage JavaScript on responsive websites.”

jRespond and jPanelMenu are the perfect couple — use jRespond to enable and disable jPanelMenu at the appropriate breakpoints, creating a truly great experience. That’s how I almost always use jPanelMenu, and I suggest you give it a shot, too.

Responsive design is awesome on its own, but add responsive behavior to the mix, and you’ve made something incredible.

Check out the example of how to use jRespond with jPanelMenu, which includes a basic how-to, code snippets, and helpful tips.

#License

jPanelMenu is distributed freely under the MIT License, so you’re free to use this plugin on any and all projects.

#Changelog

###1.4.1

November 11th, 2014

  • Added touchend listeners for better touch support.

###1.4.0

November 11th, 2014

  • Added panel option.
  • Added clone option.
  • Added setPosition(&nbsp;) API method.
  • Removed support for fixed positioning within the panel. CSS transforms and fixed positioning do not get along well, per the spec. If fixed positioning is needed, use the legacy build in the jPanelMenu repository.
  • Updated .jPanelMenu-panel to be positioned statically.
  • Updated background handling so that all properties are transferred to the .jPanelMenu-panel appropriately.
  • Updated key press preventers to include typing within a <select> field.
  • Fixed event propagation up to the document.
  • Fixed an issue causing links under the menu button to be triggered inadvertently.
  • Fixed an issue with loop styles and the Ember.js framework.

###1.3.0

February 4th, 2013

###1.2.0

February 3rd, 2013

###1.1.1

February 3rd, 2013

  • Fixed a conflict between keyboard shortcuts and text inputs. (Thanks to stoeffel.)
  • Renamed JavaScript resources to be more friendly for future development.

###1.1.0

December 7th, 2012

###1.0.0

November 4th, 2012

  • First release of jPanelMenu.

#Who Made This Wonderful Little Plugin?

jPanelMenu was created, and is maintained, by Anthony Colangelo.

You can find him (@acolangelo) on Twitter and Github.

Have a question about how jPanelMenu works that is not answered here? Have feedback for new features, options, or API functions that I should add? Anything else you want to talk about?

Talk to me on Twitter, where I am @acolangelo, and let’s talk!

Comments
  • Page scroll

    Page scroll

    Right now I'm testing jpanelmenu and elgg and ran into a problem. When the menu has been shown once I have choppy scrolling on pages - iPhone3, iPad3.

    Any idea why or how to fix this?

    Edit:

    Without animation, "animated: false", there's no problem with scrolling.

    opened by PerJensen 20
  • Panel won't close when touching the menu button on Chrome for Android

    Panel won't close when touching the menu button on Chrome for Android

    Tested in several devices and Chrome is the default browser now since Android 4.4

    It is happening with my blog: http://blog.chattyhive.com/ but also with the jpanelmenu hompage: http://jpanelmenu.com/

    I tried to debug it but I couldn't find a clue.. please let me know if you can find a solution!

    opened by diegopau 10
  • Does not close after clicking a link.

    Does not close after clicking a link.

    I think im too stupid to get this FANTASTIC plugin to work correctly. When i click on a link in the opened jPanelMenu-menu, the page jumps to the #id , but it does not close. It opens and closes on .trigger and if you click into the jMenuPanel-panel.

    Thanks to anybody who can help.

    opened by dkirjakov 9
  • Not working on iPhone

    Not working on iPhone

    I can't get it to work on my iphone..

    It works well with mouse clicks, but when I open it on my iphone to check it in its real device, it does nothing..

    try to access it from a mobile device.. Don't know what I may be doing wrong.

    http://jsfiddle.net/LGskZ/

    opened by fclaussen 8
  • menu trigger bugs out on touch

    menu trigger bugs out on touch

    I came across a strange bug where I have the menu positioned: fixed, anyway when you open up the menu on touch devices, and you click the menu again to close, it tries to close the jpanel -menu. However here is where it gets interesting, it tries to open the menu again and stays open.

    Here is why:

    Since the trigger-menu button is outside the menu area, and clicking the menu area will close the menu too. So if you click the button, it either catches both to close the jpanel menu. So that's why you get the small animation to close, but then opens and stays open because you touched it again.

    I commented this line of code out. It's line 346

    if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);

    ----the full commented code--- starts at 430

                       initiateContentClickListeners: function() {
                $(document).on('click',jP.panel,function(e){
                    if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
                });
    
                $(document).on('touchend',jP.panel,function(e){
                    // if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
                });
            },
    
    opened by besimhu 8
  • Inline 'position: relative' attribute on .jPanelMenu-panel element interferes with Bootstrap modal

    Inline 'position: relative' attribute on .jPanelMenu-panel element interferes with Bootstrap modal

    Hi,

    It seems like the initial setup of a panel instance interferes with modal z-indexing in Bootstrap.

    Bootstrap sets a z-index for the modal, and the semi-opaque div that appears below it at 1050, and 1040 respectively. When jPanel runs, the modal gets included inside of the .jPanelMenu-panel element. However, bootstrap dynamically inserts the semi-opaque 'modal-backdrop' div dynamically at the end of the body. Because of the position relative being applied to the parent of the modal, the modal appears beneath the backdrop.

    Specifically if you change the inline style of 'position: relative' applied to the .jPanelMenu-panel to 'position:static', things work as expected.

    Got a work around? In an upcoming release could you change the initial setting for position to static?

    opened by ryanpsims 8
  • Droid Native Browser (Galaxy 4) - Clicking on Trigger to Close Causes an Almost Close Then Open

    Droid Native Browser (Galaxy 4) - Clicking on Trigger to Close Causes an Almost Close Then Open

    However when I click/touch the panel - it opens back up as it should. It seems like the nav trigger - first triggers the close and also trigger the open at the same time.

    opened by adamhenson 7
  • Bug in menu-trigger functionality on mobile

    Bug in menu-trigger functionality on mobile

    Hey, I've come across a bug similar to issue #15 - maybe our specific use case can shed some more light:

    Use: We are using jPanel for a mobile site, with animation set to true.

    The issue: Touching the menu-trigger button would result in a tiny 'wiggle' but the menu would stay open. Touching anywhere else on the jPanelMenu-panel area closed the menu normally. On desktop, there was no issue, and also if animation was set to false there was no issue.

    Debugging, we found that because the closeMenu function is called when the jPanelMenu-panel is clicked, menuIsOpen returns false by the time the click event was registered on the menu-trigger button itself. This resulted in the trigger button immediately opening the menu again.

    Our solution was edit the closeMenu function so that the open state (n.setMenuState(!1)) is not set to false until after the animation is completed.

    opened by essentialred 7
  • jPanelMenu-panel has unwanted spaces on either side of it

    jPanelMenu-panel has unwanted spaces on either side of it

    I am using jPanelMenu and jRespond to make a menu on tablet and mobile versions of my site.

    When I turn on jPanelMenu (jPM.on();) I get some unwanted behaviour with the background. The background becomes white and at smaller screen sizes, I get bars on either side of the screen (the bars are the same as the intended background of my body) The background of my body is set to a gradient and the html background-color is not set at all.

    I'm guessing that jPanelMenu is using the background-color of my html (i.e. white, since it's not set) for it Bars s colour. However, I'm curious as to why it's narrower than my screen/window size at smaller window sizes - this is my main problem. I don't want these bars on the mobile and table versions of my site.

    Thanks for sharing this script, btw. It's fantastic.

    opened by hrevell 7
  • Conflict with jQuery Mobile v1.3?

    Conflict with jQuery Mobile v1.3?

    I wanted to use this plugin with jQuery mobile 1.3 but that seems to break jPanel. The menu just does not show up after clicking on the trigger element and I can still see some list items from the menu on the screen. Everything is working fine when I remove jQ mobile.

    Anyone else having this issue?

    Thanks!

    opened by marco-s 7
  • wrapAll Causing Document.Ready() To Run Twice

    wrapAll Causing Document.Ready() To Run Twice

    This line in jquery.jpanelmenu.js was causing my document.ready() at the bottom of my script to run twice:

    $('body > *').not(jP.menu + ', ' + jP.options.excludedPanelContent).wrapAll('<div class="' + 'jPanelMenu-panel' + '"/>');
    

    I needed to comment it out and wrap everything in your body tag manually with:

    <div class="jPanelMenu-panel" style="position: relative; left: 0px;">
    </div>
    

    The end result looked like:

    <body>
    <div class="jPanelMenu-panel" style="position: relative; left: 0px;">
    all your code....
    </div>
    </body>
    

    This page helped me figure it out: http://doctype.com/trying-jquery-wrapall-seems-wrap-content-twice

    opened by pawl 6
  • SPA loads menu via ajax, mobile jpanelmenu is empty

    SPA loads menu via ajax, mobile jpanelmenu is empty

    I believe jPanelMenu is executing before my ajax call that populates my desktop navigation, so the sidebar opens, but is empty.

    is it possible to "retrigger" it to reload when my call completes? I tried calling .off() and .on() again when the call completes but that didn't do it...

    opened by selaromdotnet 0
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
  • Is the version on npm  is the same as the version on github?

    Is the version on npm is the same as the version on github?

    Hello @acolangelo, I am the member of cdnjs project. We want to host this library. I found that there is a library named the same as "jpanel-menu" on npm, but the publisher is another person. I want to confirm weather the library is the same your version in github? Thank you very much!

    cdnjs/cdnjs#8417

    opened by nolsherry 0
  • What's up with this 'strict mode'  error ?

    What's up with this 'strict mode' error ?

    I'm following the setup directions.. .. and I get this error right out of the box.. .. I don't understand it.
    var jPM = $.jPanelMenu({ menu: '#side-navigation', trigger: '.side-navigation-button' }); jPM.on(); CONSOLE ERROR: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

    I'm using CodeKit to combine and minify multiple js files... and I noticed that if I DO NOT include this file, I can get it to work.. .. .. SO, what's the problem? How can I minify this and package it up with the rest of my code and use it?

    Thanks,

    opened by HaunGO 0
Releases(v1.4.1)
Owner
Anthony Colangelo
Anthony Colangelo
jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.

jQuery-menu-aim menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to na

Ben Kamens 7.7k Dec 30, 2022
A touch slideout navigation menu for your mobile web apps.

Slideout.js A touch slideout navigation menu for your mobile web apps. Features Dependency-free. Simple markup. Native scrolling. Easy customization.

Mango 8k Jan 3, 2023
Quick access menu for the GNOME panel with options that help ease the workflow for newcomers and power users alike.

Tofu Menu (formerly Fedora Menu) Quick access menu for the GNOME panel with options that help ease the workflow for newcomers and power users alike. S

null 19 Sep 26, 2022
Tippyjs - Tooltip, popover, dropdown, and menu library

Tippy.js The complete tooltip, popover, dropdown, and menu solution for the web Demo and Documentation ➡️ View the latest demo & docs here Migration G

James N 10.5k Dec 28, 2022
:zap: A sliding swipe menu that works with touchSwipe library.

Slide and swipe menu A sliding menu that works with touchSwipe library. Online demo Visit plugin site. Appszoom also uses it! So cool! What's the diff

Joan Claret 138 Sep 27, 2022
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.

Inline to Menu Link Animation An experimental inline-to-menu-link animation based on a concept by Matthew Hall. Article on Codrops Demo Installation I

Codrops 35 Dec 12, 2022
jQuery contextMenu plugin & polyfill

jQuery contextMenu plugin & polyfill $.contextMenu is a management facility for - you guessed it - context menus. It was designed for an application w

SWIS 2.2k Dec 29, 2022
MultiLevelPushMenu jQuery Plugin implementation

Multi-level-push-menu by Momcilo Dzunic This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms a

Momcilo Dzunic 808 Dec 21, 2022
stickUp a jQuery Plugin for sticky navigation menus.

stickUp a jQuery plugin A simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view.

null 1.6k Dec 31, 2022
Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.

jQuery Superfish Dropdown Menu Plugin Our favourite aquatic superhero returns from his sojourn across the galaxy infused with astonishing, hitherto un

Joel Birch 917 Dec 9, 2022
Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app.

Slidebars Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. Version 2.0 is a complete rewrite which feat

Adam Smith 1.5k Jan 2, 2023
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.

mmenu.js The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customiz

Fred Heusschen 2.6k Dec 27, 2022
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.

mmenu.js The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customiz

Fred Heusschen 2.6k Dec 27, 2022
Sidebar-skeleton - Simple and fast sidebar skeleton on Bootstrap

Compostrap Simple and fast components build on Bootstrap Sidebar skeleton Simple and fast sidebar skeleton. Installation npm install --save sidebar-sk

Compostrap 4 May 6, 2022
discord selected menu , discord selection menu , discord selec menu , discord select menu

Selected menu ihtiyacı olan arkadaşlar için paylaştım. Kodlar bana ait değildir githubdan bulduğum bir yerden alıp düzenledim. İşinize yarar örnek ekr

Wapper. 4 Jan 24, 2022
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F

CodeHim 24 Feb 14, 2022
WhatsApp-last-seen - When was it last seen and how long it was online.

WhatsApp-last-seen When was it last seen and how long it was online. Copy the javascript code and paste in the browser console after opening an inbox

Breno Vambáster 6 Nov 8, 2022
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Orion Gunning 455 Nov 6, 2022
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Orion Gunning 455 Nov 6, 2022