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 Preview

Responsive Multi Level Menu with jQuery and CSS

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

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

Demo Download

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. EXAMPLE $('#top-menu').prmenu({ fontsize: 15, });
`height`	Height of link elements. Default: 50, Type: int. EXAMPLE $('#top-menu').prmenu({ height: 60, });
`case`	Valid css text transform declaration. Default: uppercase, Type: String. EXAMPLE $('#top-menu').prmenu({ case: "lowercase", });
`lingbgcolor`	Valid css background color in hex format. Default: #000000, Type: String. EXAMPLE $('#top-menu').prmenu({ lingbgcolor: "#e41b17" });
`linktextweight`	Valid css font weight. Drefault: 400, Type: Number. EXAMPLE $('#top-menu').prmenu({ linktextweight: 700, });
`linktextfont`	Valid css font family to be applied to link text. Default: “sans-serif”, Type: String, EXAMPLE $('#top-menu').prmenu({ linktextfont: "custom-font-family", });
`hoverdark`	Decide weather to hover state be darker than link background color. Default: false, Type: Boolean. EXAMPLE $('#top-menu').prmenu({ hoverdark: true, });

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.