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

mnmenu is a simple and fast jQuery plugin that allows you to create a simple multi-menu drop down menu with smooth transitions.

Drop-Down-Menu

Documentation

#mnmenu

##Description

JQuery plugin to create dropdown menus from <ul> lists.

This is a very simple and straightforward plugin. It's still a work in progress project with more features to come, so check for updates to see what's new in upcoming versions.

The aim of the project is to create a very simple to style dropdown menu. You can create a totally styled menu in less than 100 line stylesheet.

##Demo

You can try a working demo of the project at: www.marcnuri.com

Or browsing the example.html in the examples directory. Either by downloading the file or by visiting:

###Sites using mnMenu

If your site is using this plugin you can contact me to include it in the list.

  • marcnuri.com Author's site, uses the menu in several parts of the site.
  • Tradival Spanish transportation agency. Uses responsive menu with fontawesome.

##Features

  • Nested list menu. The menu can have several nested hierarchy levels.
  • Menu calculates window bounds so that it's always in the client view area.
  • Menu can be oriented so that it displays left-to-right, right-to-left, bottom-to-top....
  • Animations for display transitions. Menu is shown and hidden with animations.
  • HoverIntent compatible.
  • Responsive. Menu will collapse in devices where the full first level is not visible.

##Support

You can ask for support or send your feedback messages to our mailing list hosted in Google Groups (there's no need to register):

https://groups.google.com/forum/#!forum/mnmenu

##Requirements

  • This is a JQuery plugin, so obviously it requires the jquery library.
  • That's it.

##Usage

###Html

Add JQuery and mnmenu scripts to the <head> section.

<script src="../lib/jqmin.1.10.1.js" type="text/javascript"></script> <script src="../src/jquery.mnmenu.js" type="text/javascript"></script>

The menu should be initialized in an <ul> element.

Initialize the menu for your list:

<script>$(document).ready(function() { $('#idmenu').mnmenu(); })</script>

The structure of the <ul> element must be as follows:

<ul>    <li>First Level        <ul>            <li>Second Level</li>            <li>...</li>        </ul>    </li>    <li><a href="#">First level as link</a></li> </ul>

###CSS

See the example styleIE.css for customization options.

###Options

  • Responsive options:
    • responsiveMenuEnabled Enable/disable responsive feature. Enabled by default, set this option to false to disable. responsiveMenuEnabled: true
    • resposniveMenuButtonLabel Text shown in the button showed when menu is collapsed resposniveMenuButtonLabel: "Menu"

You May Also Like