侧边菜单

/* 示例样式 */
.base-cate-nav{
    position: absolute;
    top: 44px;
    width: 181px;
    border: 1px solid #e4e4e4;
    border-top: none;
    background-color: #fff;
}
.base-cate-nav dt{
    position: relative;
    overflow: hidden;
    font-size: 13px;
    z-index: 1;
}
.base-cate-nav dt a{
    position: relative;
    margin-left: -1px;
    display: block;
    border: 1px solid #fff;
    line-height: 26px;
    overflow: hidden;
    padding: 0;
    text-indent: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 181px;
    color: #333;
    z-index: 1;
}
.base-cate-nav dt a:hover,.base-cate-nav .curr dt a{
    margin-left: -1px;
    background-color: #fff;
    color: #c00;
}
.base-cate-nav .curr dt a{
    border-color: #da6e72;
    border-right-color: #fff;
}
.base-cate-nav .curr dt{
    overflow: visible;
}
.base-cate-nav .curr dd{
    display: block;
}
.base-cate-nav dd{
    position: absolute;
    top: 0;
    left: 181px;
    border: 1px solid #da6e72;
    background-color: #fff;
    display: none;
    overflow: hidden;
    padding: 20px 25px;
}
.base-cate-nav dd li{
    font-size: 12px;
    float: left;
    width: 33.3333%;
    line-height: 26px;
}
.base-cate-nav .curr dd a{
    display: block;
    margin: 0 8px;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px dashed #d8d8d8;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-indent: 8px;
    color: #333;
}
.base-cate-nav .curr dd a:hover{
    color: #c61b21;
    background-color: #fff;
}

<!-- 实例html -->
<div class="base-cate-nav ">
    <dl>
        <dt>
            <a href="/kuozhanxinpian" target="_blank">扩展芯片</a>
        </dt>
        <dd>
            <ul>
                <li>
                    <a href="/kuozhanxinpian/ziku" target="_blank">字库</a>
                </li>
                <li>
                    <a href="/kuozhanxinpian/duankoukuozhan" target="_blank">端口扩展</a>
                </li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>
            <a href="/luojixinpian" target="_blank">逻辑芯片</a>
        </dt>
        <dd>
            <ul>
                <li>
                    <a href="/luojixinpian/74xilieluojixinpian" target="_blank">74系列逻辑芯片</a>
                </li>
            </ul>
        </dd>
    </dl>
</div>

/**
 * update 2016年9月21日 15:58:38
 * 侧边栏菜单定义
 * outchildhide：离开二级菜单时是否隐藏二级菜单，默认隐藏
 * outselfhide：离开菜单时是否隐藏整个菜单，默认不隐藏
 * bd：所有菜单项的容器
 * style：一级触发元素上要添加和删除的class
 * extWidth：二级菜单超过一级菜单高度时将二级菜单宽度乘以这个倍数
 * delay：二级菜单显隐效果延时时间默认100毫秒
 */
(function($) {
    $.fn.sideMenu = function(o) {
        var $This = $(this),
            $bd = $(o.bd, $This),
            // 一级菜单集合
            $hand = $bd.children('dl'),
            // 延迟触发
            timer,
            timerOut,
            o = $.extend({
                outchildhide: true, // 鼠标离开时是否隐藏二级菜单
                outselfhide: false, // 鼠标离开时隐藏一级菜单
                childWidth: 600, // 二级菜单默认宽度
                borderColor : '#c00', // 低版本浏览器二级菜单边框特别设置颜色
                extWidth: 1, // 二级菜单是否扩充倍数，设置二级菜单宽度为o.childWidth * o.extWidth
                delay : 100,
                style: ""
            }, o);
        // 计算一级菜单到顶部的高度是用到
        if ( $bd.css('position') == 'static' ) {
            $bd.css({position:'relative'});
        }
        
        // 离开时隐藏菜单容器处理
        if (o.outselfhide) {
            $This.hover(function() {
                $(o.bd, $This).show();
            }, function() {
                $(o.bd, $This).hide();
            });
        }
        // 离开菜单容器时删除样式
        $bd.mouseleave(function() {
            var $t = $(this);
            clearTimeout(timer);
            setTimeout(function(){
                o.outchildhide && $t.children().removeClass(o.style);
            }, o.delay);
        })
        $hand.hover(
            function() {
                var $this = $(this);
                clearTimeout(timer);
                timer = setTimeout(function() {
                    var $dd = $this.children('dd'),
                        // 二级菜单最小宽度
                        dd_w = o.childWidth,
                        dd_h = $dd.outerHeight(),
                        parent_h = $this.parent().outerHeight();
                    // 有些页面可能宽度不同，所以需要修正二级菜单的宽度
                    $dd.css("width", dd_w + "px");
                    dl_h = $this.position().top + $this.outerHeight();
                    // 如果存在下级菜单就给一级菜单添加触发样式显示二级菜单
                    if ($dd.length) {
                        $this.addClass(o.style);
                    }
                    // 超过一级菜单总高度后加宽二级菜单宽度
                    if (dd_h > parent_h) {
                        // 加宽高度
                        $dd.css("width", dd_w * o.extWidth + "px");
                    }
                    // 重新获取二级菜单高度
                    dd_h = $dd.outerHeight();
                    // console.log(dd_h)
                    // 如果当前触发的一级菜单到最顶端的高度小于二级菜单的高度
                    // 就将二级菜单定位到最顶端
                    // 否则就把二级菜单定位到二级菜单底部与一级菜单触发元素平行的位置
                    if (dl_h < dd_h) {
                        //console.log(dl_h,dd_h)
                        if (!-[1, ] && o.outchildhide) {
                            $dd.css({
                                "border-right": "1px solid" + o.borderColor,
                                "border-bottom": "1px solid" + o.borderColor
                            });
                            if (dd_h > parent_h) {
                                $dd.css({
                                    "border-left": "1px solid" + o.borderColor,
                                    "margin-left": "-1px"
                                });
                            }
                        }
                    } else {
                        $dd.css({
                            top : dl_h - dd_h + "px"
                        });
                        if (!-[1, ] && o.outchildhide) {
                            $dd.css({
                                "border": "1px solid" + o.borderColor,
                                "border-left": "none"
                            });
                        }
                    }
                    if (!-[1, ] && o.outchildhide) {
                        $this.css({
                            "position": "static"
                        }).siblings().css({
                            "position": "relative",
                            "z-index": "1"
                        });
                        $this.children('dt').css({
                            "position": "relative",
                            "z-index": "1"
                        });
                    }
                    $this.siblings("dl").removeClass(o.style);
                }, o.delay);
            },
            function() {
                clearTimeout(timer);
                var $t = $(this);
                timer = setTimeout(function(){
                    o.outchildhide && $t.removeClass(o.style);
                }, o.delay);
            }
        );
    }
}($));