jQuery PrMenu

Very lightweight, responsive menu plugin for jQuery. Provides a menu with links evenly distributed across width of menu container.

Features

• Links are evenly distributed within menu container
• Maximum four menus levels (three nested)
• Auto text wrap of long link text (maximum two lines)
• Auto link background colors for all levels based on initial background color
• All settings can be changed by passing in your own options

Installation

Install with npm

npm install prmenu

In your app.js:

require('jquery')

require('prmenu')

import $ from "jquery"

window.$ = $

window.jQuery = $
 

Install by download or from CDN

<script src="jquery.js"></script>
<script src="prmenu/prmenu.min.js"></script>
<link rel="stylesheet" href="prmenu/css/prmenu.css" />

How to use

Set up your menu as standard ul with li. Nest sub-menus as you need them. As in the menu below, you can have a maximum of four menu levels including the top level:

        <ul id="top-menu">
        <li><a href="#">Home</a></li>
         <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Personal</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Professional Services</a>
                    <ul>
                        <li><a href="#">Doctor</a></li>
                        <li><a href="#">Lawyer</a>
                            <ul>
                                <li><a href="#">Tax</a></li>
                                <li><a href="#">Real Estate</a></li>
                                <li><a href="#">Criminal</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Accountant</a>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Support for Customers</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">Personal</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Professional</a>
                    <ul>
                        <li><a href="#">Family Doctor Clinic</a></li>
                        <li><a href="#">Lawyer</a>
                            <ul>
                                <li><a href="#">Tax</a></li>
                                <li><a href="#">Real Estate Lawyer</a></li>
                                <li><a href="#">Criminal</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Enterprise Accountant</a>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

Activate the menu when the document is ready:

$(document).ready(function(){
    $('#top-menu').prmenu();
});

You can optionally override the default plugin settings by passing in your own options:

$('#top-menu').prmenu({
  "fontsize": "14",
    "height": "50",
    "case": "capitalize",
    "linkbgcolor": "#286090",
    "linktextcolor": "#ffffff",
    "linktextweight": "400",
    "linktextfont": "sans-serif",
    "hoverdark": false
});

Options

• fontsize : int : default 14 : Size of the menu link text in px
• height : int : default 50 : height of link elements
• case : string : default uppercase : valid css text transform declaration
• lingbgcolor : string : default #000000 : valid css background color in hex format
• linktextweight : int : default 400 : valid css font weight
• linktextfont : string : default sans-serif : valid css font to be applied to link text
• hoverdark : bool : default false : should hover state be darker than link background color?

Demo

PrMenu live demo

npm

npm package

History

Please see the releases changelog.

License

Released under MIT Licence