JQuery menu-aim plugin

In this article, we will understand about the jQuery menu aim plugin in detail with the help of various examples. It helps programmers to develop an effective dropdown menus along with easy navigation of sub-menu contents. We can download the menu-aim plugin and save the required files in working folder after that we can include the required files in the head section of your code.

Example 1:

<! DOCTYPE html>
<html>
	<head>
		<title> jQuery Menu aim Plugin Example </title>
		<meta charset = "UTF-8" />
<meta name = "viewport"
		Content = "width=device-width, initial-scale=1.0">
	<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = ?https://rawgit.com/jonathantneal/closest/master/closest.js?> </script> 
<style>
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
	margin: 0;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 10em;
}
ul li {
	position: relative;
}
ul li a {
	background-color: #EEE;
	display: block;
	padding: 1em;
}
ul li a + div {
	background: #CCC;
	clip: rect(0 0 0 0);
	position: absolute;
	left: 100%;
	top: 0;
	width: 320px;
}
li.active div {
	clip: auto;
}
.hover-1 {
  padding-top: 10px;
}
.hover-1:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #492059;
  transform: scaleX(0);
}
.hover-1:hover:before {
  transform: scaleX(1);
}
body {
margin: 20px;
  width: 80%;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font: 16px/1 'Catamaran', sans-serif;
  background: #9556AE;
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
}
h1, h2  {
  line-height: 2em; 
  padding-bottom: 5px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
}
img {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
h3 {
    position: relative;
    color: #333333;
    font-family: sans-serif;
    display: block
        width: 100%;
}
</style>
<body>
<h1> Example </h1>
<h2> Jquery menuaim plugin </h2>
<ul id = "navigation">
	<li>
		<a class = "hover-1" href = "#"> Menu 1 </a>
		<div>
			
			<div> <img src = "1.png"> </div>
			<h3> Patas </h3>
		</div>
	</li>
	<li>
		<a href = "#" class = "hover-1"> Menu 2 </a>
		<div>
			<h3> Golden Snub-Nosed </h3>
			<div> <img src = "1.png"> </div>
		</div>
	</li>
	<li>
		<a href = "#" class="hover-1"> Menu 3 </a>
		<div>
			<h3> Golden Snub-Nosed </h3>
			<div> <img src = "1.png"> </div>
		</div>
	</li>
	<li>
		<a href = "#" class="hover-1"> Menu 4 </a>
		<div>
			<h3> Golden Snub-Nosed </h3>
			<div> <img  src = "1.png"> </div>
		</div>
	</li>
	<li>
		<a href = "#" class="hover-1"> Menu 5 </a>
		<div>
			<h3> Golden Snub-Nosed </h3>
			<div> <img src = "1.png"> </div>
		</div>
	</li>
	<li>
		<a href = "#" class="hover-1"> Menu 6 </a>
		<div>
			<h3> Golden Snub-Nosed </h3>
			<div> <img src = "1.png"> </div>
		</div>
	</li>
	<li>
		<a href = "#" class="hover-1"> Menu 7 </a>
		<div>
			<h3> Golden Snub-Nosed </h3>
			<div> <img  src = "1.png"> </div>
		</div>
	</li>
	<li>
		<a href = "#" class="hover-1"> Menu 8 </a>
		<div>
			<h3> Golden Snub-Nosed </h3>
			<div> <img  src = "1.png"> </div>
		</div>
	</li>
</ul>
<script>
(function () {
	document.addEventListener('DOMContentLoaded', function () {
		var
		inTriangle = false,
		navigation = document.getElementById('navigation'),
		x1, x2, x3, y1, y2, y3, link, timeout;
		navigation.addEventListener('mouseenter', onmouseenter);
		navigation.addEventListener('mouseleave', onmouseleave);
		function isInsideTriangle() {
			var
			b0 =  (x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1),
			b1 = ((x2 - x0) * (y3 - y0) - (x3 - x0) * (y2 - y0)) / b0,
			b2 = ((x3 - x0) * (y1 - y0) - (x1 - x0) * (y3 - y0)) / b0,
			b3 = ((x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0)) / b0;
			return b1 > 0 && b2 > 0 && b3 > 0;
		}
		function onmouseenter(event) {
		document.addEventListener('mousemove', onmousemove);
		}
		function onmouseleave(event) {
		document.removeEventListener('mousemove', onmousemove);
		}
		function onmousemove(event) {
			var linkNominee = event.target.closest('li');
			x0 = event.clientX;
			y0 = event.clientY;
			if (!linkNominee) {
				clearTimeout(timeout);
				if (link && !link.contains(event.target)) {
					link.classList.remove('active');
					link = null;
				}
				return;
			}
			if (linkNominee === link) {
				if (!isInsideTriangle()) {
					x1 = x0;
					y1 = y0;
				}
			} else if (linkNominee !== link) {
						if (link) {
					if (isInsideTriangle()) {
						clearTimeout(timeout);

						timeout = setTimeout(function () {
							if (link) {
						link.classList.remove('active');
								link = null;
							}
							onmousemove(event);
						}, 200);
						return;
					}
					link.classList.remove('active');
				}
				link = linkNominee;
				var
				next = link.lastElementChild.getBoundingClientRect();
				x1 = x0;
				y1 = y0;
				x2 = next.left;
				y2 = next.top;
				x3 = next.left;
				y3 = next.bottom;
				link.classList.add('active');
			}
		}
	});
})();
</script>
</body>
</html>

Explanation:

In this article, we have created an example of jQuery menu aim plugin.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8">
	<title> jQuery-menu-aim Plugin Example </title>
	<meta name = "viewport"
		Content = "width=device-width, initial-scale=1.0">
	<meta name = "description" content = " ">
	<meta name = "author" content = " ">
	<style>
		@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:focus:not(.focus-visible) {
  outline: none;
}

:focus:not(:focus-visible) {
  outline: none;
}

.focus-visible {
  outline: .25rem solid orange;
  outline-offset: .125em;
}

:focus-visible {
  outline: .25rem solid orange;
  outline-offset: .125em;
}

html,
body {
  height: 100%;
}

body {
  padding: 1rem;
  margin: 0;
  font-family: "Lato", sans-serif;
  background-color: rgba(0, 0, 0, 0.04);
}

.catalog {
  position: relative;
  display: inline-block;
}

.catalog__navigation {
  position: absolute;
  top: calc(100% + 1.25rem);
  left: 0;
}


.trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-column-gap: .75em;
     -moz-column-gap: .75em;
          column-gap: .75em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: .75em 1em;
  margin: 0;
  border: none;
  border-radius: .25em;
  color: inherit;
  font-size: 1rem;
  font-family: inherit;
  background-color: lightpink;
  cursor: pointer;
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.trigger:hover {
    background-color: pink;
  }

.trigger__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}


.burger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.burger--active .burger__bar {
      background-color: transparent;
    }

.burger--active .burger__bar::before {
        -webkit-transform: translateY(.375em) rotate(45deg);
            -ms-transform: translateY(.375em) rotate(45deg);
                transform: translateY(.375em) rotate(45deg);
      }

.burger--active .burger__bar::after {
        -webkit-transform: translateY(-.375em) rotate(-45deg);
            -ms-transform: translateY(-.375em) rotate(-45deg);
                transform: translateY(-.375em) rotate(-45deg);
      }
.burger__bar, .burger__bar::before, .burger__bar::after {
  display: block;
  width: 1em;
  height: .125rem;
  border-radius: .25rem;
  background-color: currentColor;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  -o-transition-property: background-color, transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  -webkit-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
}
.burger__bar {
  position: relative;
}
.burger__bar::before,
  .burger__bar::after {
    content: "";
    position: absolute;
  }

.burger__bar::before {
    top: -.375em;
  }

.burger__bar::after {
    bottom: -.375em;
  }

.navigation {
  -webkit-animation: slideUp .1s ease-out forwards;
          animation: slideUp .1s ease-out forwards;
}

.navigation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5em;
    width: 0;
    height: 0;
    margin-top: -.75em;
    margin-left: -.75em;
    border: .75em solid transparent;
    border-top: 0;
    border-bottom-color: white;
  }

.navigation:not(.navigation--active) {
    display: none;
  }

@-webkit-keyframes slideUp {

  from {
    opacity: 0;
    -webkit-transform: translateY(1em);
            transform: translateY(1em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideUp {

  from {
    opacity: 0;
    -webkit-transform: translateY(1em);
            transform: translateY(1em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.list {
  width: 16rem;
  height: 100%;
  padding: .5rem 0;
  margin: 0;
  border-radius: .25rem;
  list-style: none;
  background-color: white;
  -webkit-box-shadow: 0 6px 18px rgba(14, 21, 47, 0.1), 0 -2px 6px rgba(14, 21, 47, 0.06);
          box-shadow: 0 6px 18px rgba(14, 21, 47, 0.1), 0 -2px 6px rgba(14, 21, 47, 0.06);
}

.list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.list__item[focus-within] > .list__sublist-container {
      display: block;
    }

.list__item:focus-within > .list__sublist-container {
      display: block;
    }

.list__item--active > .list__link {
      background-color: rgba(0, 0, 0, 0.04);
    }

.list__item--active > .list__sublist-container {
      display: block;
    }

.list__item--has-sublist > .list__link {
      padding-right: 1.75em;
      background-repeat: no-repeat;
      background-position: right .5em center;
      background-size: .75em .75em;
    }
.list__link {
  width: 100%;
  padding: .5em .75em;
  margin: 0 .5em;
  border-radius: .25em;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  text-decoration: none;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}

.list__sublist-container {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  width: 100%;
  height: 100%;
}
.list__sublist-container .list {
    overflow-y: auto;
  }
h1  {
  line-height: 2em; 
  padding-bottom: 5px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
	</style>
</head>
<body>
<h1> Example </h1>
<h2> Jquery menuaim plugin </h2>
<div class = "catalog"> 
  <button class = "catalog__trigger trigger" type = "button"> <span class = "trigger__icon burger"> <span class="burger__bar"> </span> </span> Catalog </button>
  <nav class = "catalog__navigation navigation">
    <ul class = "list">
      <li class = "list__item list__item--has-sublist"> <a class="list__link" href="#" title="Automation and Control"> Automation and Control </a>
        <div class = "list__sublist-container">
          <ul class = "list">
            <li class="list__item"> <a class="list__link" href="#" title="Accessories"> Accessories </a>
            </li>
            <li class="list__item"> <a class="list__link" href="#" title="Controllers - Process, Temperature"> Controllers </a>
            </li>
          </ul>
        </div>
      </li>
      <li class = "list__item list__item--has-sublist"> <a class="list__link" href="#" title="Cables, Wires"> Cables, Wires </a>
        <div class = "list__sublist-container">
          <ul class = "list">
            <li class = "list__item list__item--has-sublist"> <a class="list__link" href="#" title="Cable Assemblies"> Cable Assemblies </a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class = "list__item"> <a class="list__link" href="#" title="Barrel - Power Cables"> Barrel - Power Cables </a>
                  </li>
                  <li class = "list__item"> <a class="list__link" href="#" title="Modular Cables"> Modular Cables </a>
                  </li>
                  <li class = "list__item"> <a class="list__link" href="#" title="Pluggable Cables"> Pluggable Cables </a>
                  </li>
                  <li class = "list__item"> <a class="list__link" href="#" title="Power, Line Cables and Extension Cords"> Power, Line Cables and Extension Cords </a>
                  </li>
                  <li class = "list__item"> <a class="list__link" href="#" title="Rectangular Cable Assemblies"> Rectangular Cable Assemblies </a>
                  </li>
                  <li class = "list__item"> <a class="list__link" href="#" title="USB Cables"> USB Cables </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Cables, Wires - Management">Cables, Wires - Management</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Bushings, Grommets">Bushings, Grommets</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Cable and Cord Grips">Cable and Cord Grips</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Cable Supports and Fasteners">Cable Supports and Fasteners</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Cable Ties - Holders and Mountings">Cable Ties - Holders and Mountings</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Cable Ties and Cable Lacing">Cable Ties and Cable Lacing</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Heat Shrink Boots, Caps">Heat Shrink Boots, Caps</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Heat Shrink Tubing">Heat Shrink Tubing</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Labels, Labeling">Labels, Labeling</a>
                  </li>
                 
                </ul>
              </div>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Coaxial Cables (RF)">Coaxial Cables (RF)</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Fiber Optic Cables">Fiber Optic Cables</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Multiple Conductor Cables">Multiple Conductor Cables</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Single Conductor Cables (Hook-Up Wire)">Single Conductor Cables (Hook-Up Wire)</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Wire Wrap">Wire Wrap</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Circuit Protection">Circuit Protection</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Circuit Breakers">Circuit Breakers</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Electrical, Specialty Fuses">Electrical, Specialty Fuses</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Fuseholders">Fuseholders</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Fuses">Fuses</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Connectors">Connectors</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item"><a class="list__link" href="#" title="Coaxial Connectors (RF)">Coaxial Connectors (RF)</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Electromechanical">Electromechanical</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Audio Products">Audio Products</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  
                  <li class="list__item"><a class="list__link" href="#" title="Microphones">Microphones</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Speakers">Speakers</a>
                  </li>
                </ul>
              </div>
            </li>
                          <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Automotive Relays">Automotive Relays</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Contactors (Electromechanical)">Contactors (Electromechanical)</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Switches">Switches</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Accessories - Caps">Accessories - Caps</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="DIP Switches">DIP Switches</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Keylock Switches">Keylock Switches</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Magnetic, Reed Switches">Magnetic, Reed Switches</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Enclosures, Hardware, Office">Enclosures, Hardware, Office</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Boxes, Enclosures, Racks">Boxes, Enclosures, Racks</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Backplanes">Backplanes</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Box Accessories">Box Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Box Components">Box Components</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Boxes">Boxes</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Cams">Cams</a>
                  </li>
                
                </ul>
              </div>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Memory Cards, Modules">Memory Cards, Modules</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Memory - Modules">Memory - Modules</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Memory Cards">Memory Cards</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Solid State Drives (SSDs)">Solid State Drives (SSDs)</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="USB Flash Drives">USB Flash Drives</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="LED/Optoelectronics">LED/Optoelectronics</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item"><a class="list__link" href="#" title="Display Modules - LCD, OLED Character and Numeric">Display Modules - LCD, OLED Character and Numeric</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Display Modules - LCD, OLED, Graphic">Display Modules - LCD, OLED, Graphic</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Display Modules - LED Character and Numeric">Display Modules - LED Character and Numeric</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Fiber Optics - Transceiver Modules">Fiber Optics - Transceiver Modules</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Passives">Passives</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Capacitors">Capacitors</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Ceramic Capacitors">Ceramic Capacitors</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Crystals">Crystals</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Filters">Filters</a>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Inductors, Coils, Chokes">Inductors, Coils, Chokes</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Fixed Inductors">Fixed Inductors</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Wireless Charging Coils">Wireless Charging Coils</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Oscillators">Oscillators</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Oscillators">Oscillators</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Programmable Oscillators">Programmable Oscillators</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Resistors">Resistors</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Chassis Mount Resistors">Chassis Mount Resistors</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Chip Resistor - Surface Mount">Chip Resistor - Surface Mount</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Resonators">Resonators</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Power">Power</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Battery Products">Battery Products</a>
            </li>
                <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Current Sense Transformers">Current Sense Transformers</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Ferrite Cores">Ferrite Cores</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Semiconductors">Semiconductors</a>
        <div class="list__sublist-container">
          <ul class="list">
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>     
                  <li class="list__item"><a class="list__link" href="#" title="Evaluation Boards - Embedded - MCU, DSP">Evaluation Boards - Embedded - MCU, DSP</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Evaluation Boards - LED Drivers">Evaluation Boards - LED Drivers</a>
                  </li>
                  
              </div>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Discrete">Discrete</a>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Embedded Computers">Embedded Computers</a>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Interface Boards">Interface Boards</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Integrated Circuits (ICs)">Integrated Circuits (ICs)</a>
            </li>
                          <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Optoisolators - Logic Output">Optoisolators - Logic Output</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Sensors, Transducers">Sensors, Transducers</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item"><a class="list__link" href="#" title="Current Sensors">Current Sensors</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Image Sensors, Camera">Image Sensors, Camera</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Optical Sensors ">Optical Sensors </a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Temperature Sensors ">Temperature Sensors </a>
            </li>
          </ul>
        </div>
      </li>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Equipment - Multimeters">Equipment - Multimeters</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Equipment - Oscilloscopes">Equipment - Oscilloscopes</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Equipment - Power Supplies (Test, Bench)">Equipment - Power Supplies (Test, Bench)</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Test Leads - Banana, Meter Interface">Test Leads - Banana, Meter Interface</a>
            </li>
            <li class="list__item"><a class="list__link" href="#" title="Test Leads - BNC Interface">Test Leads - BNC Interface</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="list__item list__item--has-sublist"><a class="list__link" href="#" title="Tools">Tools</a>
        <div class="list__sublist-container">
          <ul class="list">
            <li class="list__item"><a class="list__link" href="#" title="Insertion, Extraction">Insertion, Extraction</a>
            </li>  
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Card Extenders">Card Extenders</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Etching and Fabrication Equipment">Etching and Fabrication Equipment</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Prototype Boards Perforated">Prototype Boards Perforated</a>
                  </li>
                </ul>
              </div>
            </li>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Accessories">Accessories</a>
                  </li>
st__item"><a class="list__link" href="#" title="Holders, Stands">Holders, Stands</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Solder">Solder</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Solder Sponges, Tip Cleaners">Solder Sponges, Tip Cleaners</a>
                  </li>
                </ul>
              </div>
            </li>
              <div class="list__sublist-container">
                <ul class="list">
                  <li class="list__item"><a class="list__link" href="#" title="Ionizer Equipment">Ionizer Equipment</a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Monitors, Testers">Monitors/a>
                  </li>
                  <li class="list__item"><a class="list__link" href="#" title="Static Control ">Static Control </a>
                  </li>
                </ul>
              </div>            
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</div>
	<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type = "text/javascript"> </script>
	<script src = "https://rawgit.com/kamens/jQuery-menu-aim/master/jquery.menu-aim.js" type = "text/javascript"> </script>
	<script src = "https://unpkg.com/focus-visible" type = "text/javascript"> </script>
	<script>
		const itemActiveClass = 'list__item--active';
$('.trigger').click(function() {
  $(this).find('.burger').toggleClass('burger--active');
  $('.navigation').toggleClass('navigation--active');
});
$('.list').menuAim({
  activate: (row) => {
    $(row).addClass(itemActiveClass);
  },
  deactivate: (row) => {
    $(row).removeClass(itemActiveClass);
  },
  exitMenu: (menu) => {
    return true;
  }
});
	</script>
</body>
</html>

Explanation:

In this article, we have created an example of jQuery menu aim plugin.

Output:

Following is the output of this example.