Based on the product navigation menu of the left-hand mall produced by jquery-menu-aim, the problem that the menu in the example slides in and out is still displayed!
The first example is to solve the problem that the menu is still displayed after the mouse slides out.
Menu screenshot
Html:
<section>
<h2>Equipment classification</h2>
<ul role=”menu”>
<li data-submenu-id=”submenu-air-pump”>
<a href=”#”>Air pump</a>
<div id=”submenu-air-pump”>
<h2>Air pump</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>Pores</a></h3>
<div><a href=”#” target=”_blank”>Single head</a><a href=”#” target=”_blank”>doublehead</a></div>
</div>
<div>
<h3><a href=”#” target=”_blank”> brand</a></h3>
<div><a href=”#” target=”_blank”>Ada Adia</a><a href=”#” target=”_blank”>boss</a><a href=”#” target=”_blank”>boyu</a><a href=”#” target=”_blank”>hdom</a><a href=”#” target=”_blank”>jet</a><a href=”#” target=”_blank”>Jiabao</a><a href=”#” target=”_blank”>Daily</a><a href=”#” target=”_blank”> Risheng Electric</a><a href=”#” target=”_blank”>Songbao</a><a href=”#” target=”_blank”>Stars</a><a href=”#” target=”_blank”>Xilong</a><a href=”#” target=”_blank”>Disheng</a><a href=”#” target=”_blank”>Silver Lake</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-filter-means”>
<a href=”#”>Filtering device</a>
<div id=”submenu-filter-means”>
<h2>Filtering device</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>Filter equipment</a></h3>
<div><a href=”#” target=”_blank”>Hanging biochemical filter</a><a href=”#” target=”_blank”>Built-in filter</a><a href=”#” target=”_blank”>Top filter</a></div>
</div>
<div>
<h3><a href=”#” target=”_blank”> brand</a></h3>
<div><a href=”#” target=”_blank”>Ada Adia</a><a href=”#” target=”_blank”>hdom</a><a href=”#” target=”_blank”>Starfish HX</a><a href=”#” target=”_blank”>Jiabao</a><a href=”#” target=”_blank”>Daily</a><a href=”#” target=”_blank”>amara</a><a href=”#” target=”_blank”>aquila</a><a href=”#” target=”_blank”>Songbao</a><a href=”#” target=”_blank”>Xilong XL</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-temperature-control-device”>
<a href=”#”> temperature control device</a>
<div id=”submenu-temperature-control-device”>
<h2>Temperature control device</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”>Hot rod</a><a href=”#” target=”_blank”>Thermometer</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-filter-material”>
<a href=”#”>Filter material</a>
<div id=”submenu-filter-material”>
<h2>Filter material</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”>Ceramic ring</a><a href=”#” target=”_blank”>Activated carbon</a><a href=”#” target=”_blank”>Biosphere</a><a href=”#” target=”_blank”>ammonia zeolite</a><a href=”#” target=”_blank”>Active biological beads</a><a href=”#” target=”_blank”>Volcanic rock</a><a href=”#” target=”_blank”>Live bacterial ring</a><a href=”#” Target=”_blank”> oxalate citrocarbon moss</a><a href=”#” target=”_blank”>Soft water resin</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-pharmaceutical-agent”>
<a href=”#”> potion water agent</a>
<div id=”submenu-pharmaceutical-agent”>
<h2>Pharmacemeters</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”> sterilization water</a><a href=”#” target=”_blank”>Water grass liquid fertilizer</a><a href=”#” target=”_blank”>Water quality stabilizer</a><a href=”#” target=”_blank”>Water quality clarifier</a><a href=”#” target=”_blank”>Universal fish medicine</a><a href=”#” target=”_blank”>Water purifier</a><a href=”#” target=”_blank”>black water</a><a href=”#” target=”_blank”>Nitrification bacteria</a><a href=”#” Target=”_blank”>Mossin</a><a href=”#” target=”_blank”>White point clean</a><a href=”#” target=”_blank”>dechloro water</a><a href=”#” target=”_blank”>Skin molder</a><a href=”#” target=”_blank”>Removal of snails</a><a href=”#” target=”_blank”>Sapphire liquid</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-gadgets”>
<a href=”#”> gadgets</a>
<div id=”submenu-gadgets”>
<h2> gadgets</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”>Magnetic brush</a><a href=”#” target=”_blank”>Water grass clip</a><a href=”#” target=”_blank”>fishing net</a><a href=”#” target=”_blank”>Water change/pump pipe</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-feed”>
<a href=”#”>feed</a>
<div id=”submenu-feed”>
<h2>feed</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”> target=”_blank”>Goldfish/koi fish food</a><a href=”#” target=”_blank”>Tropical fish food</a><a href=”#” target=”_blank”>Turtle food</a></div>
</div>
</div>
</div>
</li>
</ul>
</section>
CSS:/* Left product navigation */
.left-sidebar {
border: 0 !important;
word-wrap: break-word;
_display: inline;
_overflow: hidden;
_overflow-y: visible;
float: left;
width: 199px;
margin-left: 0px;
margin-right: -199px;
height: 600px;
padding-top: 10px;
background-image: url(../images/product/main-menu-bg.png);
background-repeat: repeat-x;
background-position: 0px 40px;
}
.left-sidebar h2 {
position: absolute;
font-family: “Microsoft Yahei”;
font-size: 16px;
line-height: 24px;
color: #404040;
display: block;
float: left;
height: 24px;
width: 120px;
margin-left: 18px;
padding-left: 46px;
border-bottom-width: 6px;
border-bottom-style: solid;
border-bottom-color: #6593f0;
font-weight: bold;
}
.recommend {
border: 0 !important;
word-wrap: break-word;
_display: inline;
_overflow: hidden;
_overflow-y: visible;
float: left;
width: 801px;
margin-left: 199px;
margin-right: -1000px;
height: 600px;
padding-top: 40px;
}
.main-menu {
position: absolute;
float: left;
width: 166px;
height: 332px;
padding-top: 14px;
padding-bottom: 14px;
margin-top: 30px;
margin-left: 18px;
list-style: none;
background-color: #4d4d4d;
z-index: 2;
}
.main-menu li {
width: 126px;
height: 36px;
padding-left: 40px;
color: #b6b6b6;
background-image: url(../images/product/main-menu-li-bg.png);
background-repeat: no-repeat;
background-position: 136px 6px;
}
.main-menu li a {
font-family: “Microsoft Yahei”;
float: left;
font-size: 13px;
color: #b6b6b6;
height: 22px;
line-height: 22px;
padding-top: 13px;
display: block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #4d4d4d;
font-weight: normal;
}
.ie6 .main-menu li a {
color: #b6b6b6;
}
.main-menu li a:hover,
.main-menu li a.maintainhover {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6593f0;
color: #6593f0;
font-weight: bold;
}
.popover {
top: 1px;
left: 166px;
position: absolute;
float: left;
display: none;
width: 420px;
height: 367px;
overflow: hidden;
background-image: url(../images/product/popover-bg.png);
background-repeat: repeat-y;
}
.popover h2 {
position: relative;
color: #dcdcdc;
width: 80px;
margin-left: 0;
padding-left: 0;
padding-right: 340px;
padding-top: 26px;
border-bottom: none;
overflow: hidden;
text-align: right;
}
.ie6 .popover h2 {
margin-left: 0;
}
.popover-content {
float: left;
width: 420px;
height: 322px;
overflow: hidden;
}
.popover-content .item {
float: left;
width: 420px;
padding: 16px 0;
position: relative;
left: 0;
top: 0;
}
.ie6 .popover-content .item {
padding: 32px 0;
top: -16px;
}
.popover-content .item .class-tag {
position: absolute;
left: -1px;
margin-left: 90px;
float: left;
width: 330px;
overflow: hidden;
z-index: 4;
}
.main-menu .popover-content .item a {
font-size: 12px;
color: #cacaca;
font-family: tahoma, verdana, arial, \5b8b\4f53, “dejavu sans”, sans-serif;
height: 14px;
line-height: 14px;
padding: 0 12px;
display: block;
font-weight: normal;
border-left-width: 1px;
border-bottom: none;
border-left-style: Solid;
border-left-color: #cacaca;
margin: 4px 0;
}
.popover-content .item a:hover {
color: #CD0200;
font-weight: normal;
border-bottom: none;
}
.main-menu .popover-content .item .first {
border-left: none;
padding: 0 12px;
}
.main-menu .popover-content .item H3 {
display: block;
position: absolute;
width: 90px;
height: 90px;
z-index: 10;
float: left;
background-image: url(../images/product/popover-bg.png);
background-repeat: repeat-y;
line-height: 14px;
overflow: hidden;
}
.main-menu .popover-content .item h3 a {
font-size: 12px;
float: left;
width: 80px;
padding-left: 0;
padding-right: 0;
text-align: right;
color: #6593f0;
font-family: tahoma, verdana, arial, \5b8b\4f53, “dejavu sans”, sans-serif;
height: 14px;
line-height: 14px;
display: block;
border-bottom: none;
border-left: none;
font-weight: normal;
padding-right: 10px;
}
.popover-content .item h3 a:hover {
color: #CD0200;
font-weight: normal;
border-bottom: none;
}
js:
<script>
var $menu = $(“.main-menu”);
$menu.menuaiim({
Activate: ActivateSubMenu,
deactivate: deactivatesubmenu,
exitmenu: exitmenusubmenu
});
function activatesubmenu(row) {
var $row = $(row),
submenuid = $row.data(“submenuid”),
$submenu = $(“#” + submenuid),
height = $menu.outerHeight(),
width = $menu.outerWidth();
// show the submenu
$submenu.css({
display: “block”,
// top: 1,
// left: width – 0, // main should overlay submenu
Height – 2 // padding for main dropdowns arrow
});
// keep the currently activated rowS Highlighted Look
$row.find(“a”).addClass(“maintainhover”);
}
function deactivatesubmenu(row) {
var $row = $(row),
submenuid = $row.data(“submenuid”),
$submenu = $(“#” + submenuid);
// hide the submenu and remove the rowS Highlighted Look
$submenu.css(“display”, “none”);
$row.find(“a”).removeClass(“maintainhover”);
}
function exitmenusubmenu(row) {
$(“.popover”).css(“display”, “none”);
$(“a.MaintainHover”).RemoveClass(“MaintainHover”);
return true;
}
</script>
