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

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...