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.

Next TopicJQuery Typewriter

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}