侧边菜单

/* 示例样式 */
.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;
}

    

        

            扩展芯片
        
        

            

                

                    字库
                
                

                    端口扩展
                
            
        
    
    

        

            逻辑芯片
        
        

            

                

                    74系列逻辑芯片
                
            
        
    

/**
 * 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);
            }
        );
    }
}($));