Responsive Multi Level Menu with jQuery and CSS

Plugin Preview

Share this:

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
	});

});

Advance Configuration Options for PrMenu

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

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

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

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

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

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

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

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

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.