JQuery.HoverDir庫實現側邊欄二級選單
阿新 • • 發佈：2019-02-18
Jquery.hoverDir響應滑鼠移動方向的懸停效果外掛
HTML程式碼
<div id="sidebar"> <div class="mainNavs"> <div class="menubox"> <div class="menu_main"> <h2>技術<span></span></h2> <a href="#">Java</a> <a href="#">PHP</a> <a href="#">C</a> <a href="#">C++</a> <a href="#">.net</a> <a href="#">Android</a> <a href="#">Ios</a> <a href="#">前端工程師</a> <a href="#">架構師</a> <a href="#">專案經理</a> <a href="#">技術經理</a> </div> <div class="menu_sub dn"> <dl class="reset"> <dt><a href="#">前端開發</a></dt> <dd> <a href="#">Java</a> <a href="#">C++</a> <a href="#">PHP</a> <a href="#">C</a> <a href="#">C#</a> <a href="#">.NET</a> <a href="#">Hadoop</a> <a href="#">VB</a> <a href="#">Delphi</a> <a href="#">Python</a> <a href="#">Perl</a> </dd> </dl> <dl class="reset"> <dt><a href="#">移動開發</a></dt> <dd> <a href="#">HTML5</a> <a href="#">Android</a> <a href="#">IOS</a> <a href="#">WP</a> </dd> </dl> <dl class="reset"> <dt><a href="#">前端開發</a></dt> <dd> <a href="#">Java</a> <a href="#">C++</a> <a href="#">PHP</a> <a href="#">C</a> <a href="#">C#</a> <a href="#">.NET</a> <a href="#">Hadoop</a> <a href="#">VB</a> <a href="#">Delphi</a> <a href="#">Python</a> <a href="#">Perl</a> </dd> </dl> <dl class="reset"> <dt><a href="#">移動開發</a></dt> <dd> <a href="#">HTML5</a> <a href="#">Android</a> <a href="#">IOS</a> <a href="#">WP</a> </dd> </dl> <dl class="reset"> <dt><a href="#">前端開發</a></dt> <dd> <a href="#">Java</a> <a href="#">C++</a> <a href="#">PHP</a> <a href="#">C</a> <a href="#">C#</a> <a href="#">.NET</a> <a href="#">Hadoop</a> <a href="#">VB</a> <a href="#">Delphi</a> <a href="#">Python</a> <a href="#">Perl</a> </dd> </dl> <dl class="reset"> <dt><a href="#">移動開發</a></dt> <dd> <a href="#">HTML5</a> <a href="#">Android</a> <a href="#">IOS</a> <a href="#">WP</a> </dd> </dl> </div> </div> </div> </div>
CSS程式碼
/*左側分類*/ #sidebar { width: 230px; position: absolute; } #sidebar .mainNavs{ background-color: #fafafa; } #sidebar .menu_main { width: 206px; padding: 6px 12px; border: 2px solid #fafafa; border-right: 0; overflow: hidden; position: relative; } #sidebar .menu_main h2 { font-size: 18px; padding-left: 8px; font-weight:500; } #sidebar .menu_main h2 span { width: 13px; height: 13px; background: url(img/arr.png)0 0 no-repeat; float: right; margin-top: 3px; } #sidebar .menu_main a { float: left; /*規定段落中的文字不進行換行*/ white-space: nowrap; margin: 0 5px 5px 0; padding:0 8px; } #sidebar .menu_main a:hover{ color:#019875; text-decoration: none; } #sidebar .current .menu_main { background-color: #ffffff; border: 2px solid #c9cbce; border-right: none; z-index:102; } /*左側分類懸停效果*/ #sidebar .menu_sub { width: 540px; position: absolute; top: 0; left: 230px; z-index:101; border:2px solid #c9cbce; padding:15px 30px 5px 30px; background: #ffffff; } #sidebar .menu_sub dl{ margin: 0 0 20px; } #sidebar .menu_sub dt{ width: 70px; font-size: 14px; margin: 0; text-align: right; position: absolute; } #sidebar .menu_sub dt a{ padding: 0; color: #333; line-height: 28px; text-decoration: underline; } #sidebar .menu_sub dt a:hover{ color: #019875; text-decoration: underline; } #sidebar .menu_sub dd{ margin-left: 100px; overflow: hidden; } #sidebar .menu_sub dd a { white-space: nowrap; padding: 0 15px; color: #777; line-height: 28px; margin-left: -1px; background: url(img/arr.png) -29px center no-repeat; } #sidebar .menu_sub dd a:hover { color: #019875; text-decoration: underline; }
JS程式碼
$("#sidebar .menubox").each(function (num) { $(this).hoverDelay({ hoverDuring : 200, hoverEvent : function(){ switch(num){ case 0: $(this).addClass("current").children(".menu_sub").css({ top: $(this).position().top}).removeClass('dn'); break; case 1: $(this).addClass("current").children(".menu_sub").css({ top : $(this).position().top + $(this).height() - $(this).children(".menu_sub").height() - 42}).removeClass('dn'); break; case 2: $(this).addClass("current").children(".menu_sub").css({ top : $(this).position().top + $(this).height() - $(this).children(".menu_sub").height() - 42}).removeClass('dn'); break; default : $(this).removeClass("current").children(".menu_sub").css({ top : $(this).position().top }).removeClass("dn") } }, outEvent : function () { $(this).removeClass('current').children(".menu_sub").addClass('dn'); } }); });
JS外掛
$(function () {
placeholderFn()
}), function (a) {
a.fn.hoverDelay = function (b) {
var e, f, c = {
hoverDuring: 200, outDuring: 200, hoverEvent: function () {
a.noop()
}, outEvent: function () {
a.noop()
}
}, d = a.extend(c, b || {}), g = this;
return a(this).each(function () {
a(this).hover(function () {
clearTimeout(f), e = setTimeout(function () {
d.hoverEvent.apply(g)
}, d.hoverDuring)
}, function () {
clearTimeout(e), f = setTimeout(function () {
d.outEvent.apply(g)
}, d.outDuring)
})
})
}
}(jQuery);