Responsive Multi Level Menu with jQuery and CSS

An awesome jQuery plugin to create responsive multi level menu for heavy contents websites. PrMenu is a cross-browser, cross-platform, multi device and mobile friendly menu plugin for jQuery. It lets you to create hover based multi-level dropdown menu that will be converts into hamburger menu on mobile devices.

Plugin Overview

Plugin: PrMenu
Author: Steve George
Licence: MIT Licence
Published: May 14, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 14.9 KB



Main Features

  • Fully responsive and multi screen designed.
  • Multi level drop downs (up to four levels).
  • Auto text wrap of long link text.
  • Auto link background colors for all levels based on initial background color.
  • Fully configurable with plugin’s options.

How to Make Responsive Multi Level Menu

1. To make responsive multi-level menu, load the jQuery and PrMenu ‘s CSS and JavaScript files into your website. Nest the ul for multi level.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- PrMenu Js -->
<script src="js/jquery.prmenu.js"></script>

<!-- PrMenu CSS -->
<link rel="stylesheet" href="css/prmenu.css">

2. After that, create HTML ul element with anchor links for your menu as follows.

<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>

3. Finally, call the plugin with top-menu selector with some basic configuration options.

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

});

Note: Some options are optional for creating a basic menu.

Advance Configuration Options for PrMenu

The following are some advance configuration options to create / customize “PrMenu”.

fontsize

Size of the menu link text in px. Default: 14, Type: Number/Int.

$('#top-menu').prmenu({
   fontsize: 15,
});
height

Height of link elements. Default: 50, Type: int.

$('#top-menu').prmenu({
   height: 60,
});
case

Valid css text transform declaration. Default: uppercase, Type: String.

$('#top-menu').prmenu({
   case: "lowercase",
});
lingbgcolor

Valid css background color in hex format. Default: #000000, Type: String.

$('#top-menu').prmenu({
   lingbgcolor: "#e41b17"
});
linktextweight

Valid css font weight. Drefault: 400, Type: Number.

$('#top-menu').prmenu({
   linktextweight: 700,
});
linktextfont

Valid css font family to be applied to link text. Default: “sans-serif”, Type: String,

$('#top-menu').prmenu({
   linktextfont: "custom-font-family",
});
hoverdark

Decide weather to hover state be darker than link background color. Default: false, Type: Boolean.

$('#top-menu').prmenu({
   hoverdark: true,
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*