JQuery menu-aim 插件

2025年3月17日 | 阅读 12 分钟

在本文中，我们将借助各种示例详细了解 jQuery menu aim 插件。它帮助程序员开发有效的下拉菜单以及轻松导航子菜单内容。我们可以下载 menu-aim 插件并将所需文件保存在工作文件夹中，之后我们可以在代码的 head 部分中包含所需文件。

示例 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>

说明

在本文中，我们创建了一个 jQuery menu aim 插件的示例。

输出

以下是这个例子的输出。

示例 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>

说明

在本文中，我们创建了一个 jQuery menu aim 插件的示例。

输出

以下是这个例子的输出。

下一个主题JQuery 打字机

← 上一个下一个 →

JQuery menu-aim 插件

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery menu-aim 插件

示例 1

示例 2

相关帖子

JQuery 裁剪插件

如何使用 jQuery 更改背景图片

如何使用 jQuery 和 jPlayer 创建在线电台

使用 HTML 和 jQuery 的电话号码键盘

使用 jquery 的全屏视频背景

使用 HTML、CSS 和 jQuery 的 QR 码生成器

Skype 聊天 jQuery 插件

jQuery 在 5 秒后重定向到另一个页面

jQuery 推送通知插件

JQuery 排序

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器