JQuery.HoverDir库实现侧边栏二级菜单

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);