Left Product Navigation Menu Built With jQuery-menu-aim: Fixes the Menu Display Issue on Mouse Hover

This example first solves the issue where the menu still displays after the mouse slides out, and second solves the issue where the submenu does not display if you slide out of menu A and then re-enter menu A.

html:

<section>
<h2>Equipment Categories</h2>
<ul role=”menu”>
<li data-submenu-id=”submenu-air-pump”>
<a href=”#”>Air Pumps</a>
<div id=”submenu-air-pump”>
<h2>Air Pumps</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>Air Holes</a></h3>
<div><a href=”#” target=”_blank”>Single Head</a><a href=”#” target=”_blank”>Double Head</a></div>
</div>
<div>
<h3><a href=”#” target=”_blank”>Brands</a></h3>
<div><a href=”#” target=”_blank”>ADA</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”>Risheng</a><a href=”#” target=”_blank”>Risheng Electrical</a><a href=”#” target=”_blank”>Songbao</a><a href=”#” target=”_blank”>Haixing</a><a href=”#” target=”_blank”>Xilong</a><a href=”#” target=”_blank”>Disheng</a><a href=”#” target=”_blank”>Yinhu</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-filter-means”>
<a href=”#”>Filter Devices</a>
<div id=”submenu-filter-means”>
<h2>Filter Devices</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>Filter Equipment</a></h3>
<div><a href=”#” target=”_blank”>Hang-on Biochemical Filter</a><a href=”#” target=”_blank”>Internal Filter</a><a href=”#” target=”_blank”>Top Filter</a></div>
</div>
<div>
<h3><a href=”#” target=”_blank”>Brands</a></h3>
<div><a href=”#” target=”_blank”>ADA</a><a href=”#” target=”_blank”>HDOM</a><a href=”#” target=”_blank”>Haixing HX</a><a href=”#” target=”_blank”>Jiabao</a><a href=”#” target=”_blank”>Risheng</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 Devices</a>
<div id=”submenu-temperature-control-device”>
<h2>Temperature Control Devices</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”>Heaters</a><a href=”#” target=”_blank”>Thermometers</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-filter-material”>
<a href=”#”>Filter Materials</a>
<div id=”submenu-filter-material”>
<h2>Filter Materials</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”>Ceramic Rings</a><a href=”#” target=”_blank”>Activated Carbon</a><a href=”#” target=”_blank”>Bio Balls</a><a href=”#” target=”_blank”>Ammonia-Absorbing Zeolite</a><a href=”#” target=”_blank”>Active Bio Beads</a><a href=”#” target=”_blank”>Volcanic Rock</a><a href=”#” target=”_blank”>Bacteria Rings</a><a href=”#” target=”_blank”>Oxalic Acid Peat Moss</a><a href=”#” target=”_blank”>Water Softening Resin</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-pharmaceutical-agent”>
<a href=”#”>Medicines & Water Agents</a>
<div id=”submenu-pharmaceutical-agent”>
<h2>Medicines & Water Agents</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>All</a></h3>
<div><a href=”#” target=”_blank”>Germicidal Water</a><a href=”#” target=”_blank”>Aquatic Plant Liquid Fertilizer</a><a href=”#” target=”_blank”>Water Stabilizer</a><a href=”#” target=”_blank”>Water 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”>Nitrifying Bacteria</a><a href=”#” target=”_blank”>Moss Removal Agent</a><a href=”#” target=”_blank”>White Spot Cure</a><a href=”#” target=”_blank”>Dechlorinating Water</a><a href=”#” target=”_blank”>Fungus Agent</a><a href=”#” target=”_blank”>Snail Removal Agent</a><a href=”#” target=”_blank”>Blue Treasure 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”>Aquatic Plant Tweezers</a><a href=”#” target=”_blank”>Fish Net</a><a href=”#” target=”_blank”>Water Change/Siphon Hose</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”>Color-Enhancing</a><a href=”#” target=”_blank”>Goldfish/Koi 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:

// Show the submenu
$submenu.css({
display: “block”,
// top: 1,
// left: width – 0, // main should overlay submenu
height: height – 2 // padding for main dropdown’s arrow
});

// Keep the currently activated row’s 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 row’s 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>

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者，自 2013 年起持续运营个人技术博客，记录工作与个人项目中遇到的真实问题，以及解决问题过程中的探索、实践和思考。

除了技术写作，我也在持续开发和维护自己的独立项目，探索新技术和新工具在实际场景中的应用。我始终相信，没有不值得去解决的问题，也没有不值得去学习的技术。

如果这篇文章对你有所帮助，欢迎浏览博客中的其他文章，也欢迎交流技术经验与想法。

关于我 · GitHub · 邮件联系

Left Product Navigation Menu Built With jQuery-menu-aim: Fixes the Menu Display Issue on Mouse Hover

更多文章

保护机制也会保护错东西：为什么一个 Documentation 能阻塞整页修订？

页面明明是我自己的，为什么不能直接重写？从 /translation/ 改版看 immutable source 与 replacement successor

为什么修完 Reviewer 指出的所有例子，下一轮还是会失败？从 B→revision→B 看同类问题完整性

为下一次 PHP 8.5 升级做准备：从两次验证失败到自动回滚工具完成