SubMenu子菜单导航功能示范脚本

admin

DIV脚本:
<div class="submenu">$func_submenu(navi=SubMenu,pos=2)$</div>

CSS脚本：
.submenu ul li{ display:block; height:30px; background:#fff; border-bottom:1px solid #f5f5f5; position:relative;}
.submenu ul li:hover{ border-bottom:1px solid #FAC11B; background-color:#5b5750;}
.submenu ul li:hover a{ color:#eee;}
.submenu ul li a{ display:block; line-height:30px; text-indent:48px; background:url(submenu.png) no-repeat 32px -11px;}
.submenu ul li a:hover{ background-color:#5b5750; color:#fff;}
.submenu ul .subsel a{ color:#fff; background:url(submenu.png) no-repeat 32px 10px #5B5750;}
.submenu ul .subsel a:hover{ color:#fff; background:url(submenu.png) no-repeat 32px 10px #333;}
.submenu .SubMenu1{ display:none; position:absolute; z-index:10; left:218px; top:0px;}
.submenu ul li:hover .SubMenu1{ display:block; width:auto; border:1px solid #5b5750;}
.submenu ul li:hover .SubMenu1 li{ display:block; white-space:nowrap; width:auto; background-color:#5b5750;}
.submenu ul li:hover .SubMenu1 li a{ padding-right:20px; border-bottom:1px solid #5b5750; color:#fff; background:url(submenu.png) no-repeat 12px -11px; text-indent:25px;}
.submenu ul li:hover .SubMenu1 li a:hover{ border-bottom:1px solid #FAC11B}
.submenu #split,.submenu #split0,.submenu #split1{ display:none;}

效果展示（左侧二级菜单向右弹出）：


编程就是怎么简单，不用学习，只需复制粘贴，再简单修改就可以实现编程效果。

admin

DIV:
<div class="submenu">$func_submenu(pos=2)$</div>

CSS:
.submenu .RowsTitle{ height:43px; border-bottom:3px solid #efefef; position:relative; margin-bottom:2px;}
.submenu .RowsTitle .Title{ display:inline-block; font-size:16px; font-weight:bold; text-align:left; color:#0053BD; border-bottom:3px solid #0D60BD; padding:0 10px; margin-left:10px; letter-spacing:2px; position:absolute; bottom:-3px;}
.submenu ul{ display:block; padding-top:3px; padding-bottom:10px; background:#f7f9f8; border-bottom:2px solid #FAD20E;}
.submenu ul li{ display:block; background:#f7f9f8; border-bottom:1px solid #f0f0f0;}
.submenu ul li a{ display:block; line-height:30px; height:30px; text-indent:50px;}
.submenu ul li a:hover,.submenu ul .subsel a{ background:url(nav.jpg) no-repeat -135px center #0D60BD; color:#fff;}
.submenu .SubMenu1{ display:none; padding:0; background:#eee; border:0;}
.submenu ul li:hover .SubMenu1{ display:block;}
.submenu .SubMenu1 li{ background:none; border_bottom:1px solid #fff;}
.submenu #split,.submenu #split0,.submenu #split1{ display:none;}

模板：hx  案例：hexujixie 支持两级子菜单，自动隐藏和向下延展显示

admin

DIV:
<div class="product">$func_submenu(navi=Navigator,para=Product,memo=1,subimg=1,submemo=1,sub=1,mode=1)$</div>

CSS:
.product{ display:block; margin-top:50px; margin:0 auto; width:1180px; clear:both;}
#Navigator .RowsTitle{ display:block; height:30px; text-align:center; background:url(dot.png) repeat-x left center; margin:15px 0;}
#Navigator .RowsTitle .Title{ display:inline; height:30px; line-height:30px; font-size:22px; padding:0 30px; background:#F4F4F4;}
.Descript{ text-align:center; color:#666;}
.product ul{ display:inline-block; padding-bottom:40px; margin:30px 0; position:relative;}
.product ul li{ float:left; display:inline; width:282px; height:455px; background:url(shadow.jpg) no-repeat #fff left bottom;}
.product ul #split{ float:left; display:inline; width:17px; height:455px; background:none;}
.product H4 a{ font-size:16px; font-weight:bold;}
.product .mode{ width:268px; height: 138px; overflow:hidden; margin:10px; margin-top:282px; position:absolute;}

模板：Green107  显示子菜单标题，缩略图，描述，适合定制页。

admin

DIV:
<div class="submenu">$func_submenu(pos=2,title=no)$</div>

CSS:
.submenu{ background:url(bgsubmenu.jpg) repeat-y; margin-bottom:10px;}
.submenu .Content{ display:block; background:url(bgsubmenu.jpg) no-repeat -255px 0;}
.submenu .Margin{ display:block; background:url(bgsubmenu.jpg) no-repeat -512px bottom;}
.submenu ul{ display:block; padding:8px 0; margin:0 8px;}
.submenu ul li a{ display:block; border-bottom:1px solid #ccc; font-size:14px; height:27px; line-height:27px; text-indent:30px;}
.submenu ul .subsel a{ border-bottom:0; background:url(submenuhover.jpg) repeat-x; color:#fff; font-weight:normal;}
.submenu .SubMenu1{ display:none; padding:0;}
.submenu ul .subsel .SubMenu1{ display:block;}

jQuery:
<script type="text/javascript">
jQuery(".subsel").parent("ul").css('display','block')
jQuery(".subsel").parent("ul").parent("li").css({'background':'#ccc',"font-weight":"bold"});
jQuery(".subsel").parent("ul").children().css('font-weight','normal');
</script>

模板：js  案例：whjsrcb 支持两级子菜单，选中项向下延展显示子菜单，非选中自动隐藏，如图：

admin

范本参考(HL)

DIV:
<div class="submenu">$func_submenu(navi=Navigator,css=SubMenu,pos=0)$</div>
CSS:
.submenu .Margin{ margin-top:10px; margin-bottom:10px;}
.submenu ul li{ border-bottom:1px solid #f7f7f7;}
.submenu ul li a{ display:block; height:30px; line-height:30px; text-indent:40px;}
.submenu ul li a:hover,.submenu ul .subsel a{ background:url(dot.png) no-repeat 20px center #ff6501; color:#fff;}

admin

DIV:
<div class="product">$func_submenu(navi=Navigator,para=Product,title=10,sub=1,divi=none,bg=1,rows=8)$</div>

CSS:
.product ul li{ float:left; width:254px; height:254px; margin:10px; background-position:center center; background-size:100% 100%; background-repeat:no-repeat; position:relative;}
.product ul li a{ display:none; font-size:20px; height:100%; line-height:254px;}
.product ul li:hover a{ display:block; background:#000; opacity:.8;}

模板：xyd  案例：whxyd 显示背景图片，HOVER后背景变暗，显示标题，如图：


模板：gyh 案例：guiyuhua 宽像素1100px

CSS：
#Navigator{ display:inline-block; width:100%; text-align:center; font-size:0;}#Navigator .RowsTitle{ display:inline-block; width:100%; text-align:center; background:url(bg.png) no-repeat center top; padding-top:20px;}
#Navigator .RowsTitle .Title a,#Navigator .RowsTitle .Title .cn{ font-size:25px; line-height:30px;}
#Navigator .RowsTitle .Title .en{ font-size:30px; font-family:"MS Serif", "New York", serif, sans-serif; line-height:38px; color:#666;}
.product ul li{ float:left; width:265px; height:220px; margin-bottom:10px; margin-right:10px; background-position:center center; background-size:100% 100%; background-repeat:no-repeat; position:relative;}
.product ul li:nth-child(4n){ margin-right:0px;}
.product ul li a{ display:none; font-size:20px; height:100%; line-height:220px; background:#003300; opacity:.8; color:#fff;}
.product ul li:hover a{ display:block;}

admin

特效模板：ej，客户案例：whtts

DIV:
<div class="product">$func_submenu(para=product,title=no,img=2,mode=2,bg=1,submemo=1,submore=VIEW MORE,rows=3,divi=none)$</div>
CSS：
.product ul{ display:inline-block; width:100%; font-size:0;}
.product ul li{ display:inline-block; width:100%; height:610px; font-size:0; margin-bottom:-7px; "background-position":"center"}
.product ul li .mode{ margin:0 auto; width:1200px; text-align:right;}
.product ul li .mode{ margin-top:100px;}
.product ul li:nth-child(2n) .mode{ text-align:left;}
.product ul li .mode .title a{ display:block; font-size:56px; font-weight:bold;}
.product ul li .mode .title a span{ color:#E63D3A; font-size:56px;}
.product ul li .mode .memo{ color:#7c7c7c; line-height:80px;}
.product ul li .mode .more{ margin-top:20px;}
.product ul li .mode .more a{ display:inline-block; width:150px; border:2px solid #333; text-align:center; line-height:40px;}
.product ul li .mode .more a:hover{ border:2px solid #E63D3A;}
JS：
$(function(){
        var img1=$(".product ul .li1").css("background-image");
        var img2=$(".product ul .li2").css("background-image");
        var img3=$(".product ul .li3").css("background-image");
        var h1=($(window).height() - $(".product ul .li1").height())/2;
        var h2=$(".banner").height();
        $(".product ul li").css({"background-image":"none","margin-bottom":h1});
        $(".product ul .li1").css({"margin-top":0,"background-image":img1,"background-position":"center"});
        var up=1;
        $(window).scroll(function(){
                if($(window).scrollTop()>up){
                        up=$(window).scrollTop();
                        if(up<h2){$("body").css({"background-image":"none"});$(".product ul .li1").css({"margin-top":0});}
                        if((up>h2-h1)&&(up<h2)){
                                $(".product ul .li1").css({"margin-top":up-h2+h1,"margin-bottom":h1});
                                $(".product ul .li2").css({"background-image":"none"});
                                $(".product ul .li3").css({"background-image":"none"});
                        }
                        if((up>h2)&&(up<$(".product ul .li2").offset().top)){
                                $(".product ul .li1").css({"margin-top":h1,"margin-bottom":h1});
                                $("body").css({"background-image":img2,"background-repeat":"no-repeat","background-attachment":"fixed","background-position":"center"});
                        }
                        if((up<$(".product ul .li2").offset().top-h1)&&(up<$(".product ul .li2").offset().top)){
                                $("body").css({"background-image":img2,"background-repeat":"no-repeat","background-attachment":"fixed","background-position":"center"});
                        }
                        if((up>$(".product ul .li2").offset().top-h1)){
                                $(".product ul .li2").css({"background-image":img2,"background-position":"center"});
                                $(".product ul .li1").css({"background-image":"none"});
                                $(".product ul .li3").css({"background-image":"none"});
                                $("body").css({"background-image":img3,"background-repeat":"no-repeat","background-attachment":"fixed","background-position":"center"});
                        }
                        if(up>$(".product ul .li3").offset().top-h1){
                                $(".product ul .li3").css({"background-image":img3,"background-position":"center","margin-bottom":0});
                                $(".product ul .li1").css({"background-image":"none"});
                                $(".product ul .li2").css({"background-image":"none"});
                                $("body").css({"background-image":"none"});
                        }
                }else{
                        up=$(window).scrollTop();
                        $(".product ul .li1").css({"margin-top":0});
                        if(($(window).scrollTop()<$(".product ul .li3").offset().top-h1)){
                                $("body").css({"background-image":img2,"background-repeat":"no-repeat","background-attachment":"fixed","background-position":"center"});
                                $(".product ul .li3").css({"background-image":img3,"background-position":"center"});
                                $(".product ul .li2").css({"background-image":"none"});
                                $(".product ul .li2").css({"background-image":"none","margin-top":0});
                        }
                        if(($(window).scrollTop()<$(".product ul .li2").offset().top-h1)){
                                $("body").css({"background-image":img1,"background-repeat":"no-repeat","background-attachment":"fixed","background-position":"center"});
                                $(".product ul .li2").css({"background-image":img2,"background-position":"center"});
                                $(".product ul .li3").css({"background-image":"none"});
                        }
                        if($(window).scrollTop()<h2-h1){
                                $("body").css({"background-image":"none"});
                                $(".product ul .li1").css({"background-image":img1,"background-position":"center"});
                                $(".product ul .li2").css({"background-image":"none"});
                                $(".product ul .li3").css({"background-image":"none"});
                        }
                }
        });
        for(var i=0;i<$(".product ul li").length;i++){
                var title=$(".product ul li").eq(i).find(".title a").html();
                var len=title.length;
                var ref=6;
                if(i==1){ ref=3;}
                $(".product ul li").eq(i).find(".title a").html("<span>"+title.substr(0,ref)+"</span>"+title.substr(ref,len-ref));
        }
});

admin

.submenu{ display: inline-block; width: 100%; border-bottom: 1px solid #EFECEB;}
.submenu .RowsTitle{ float: left; background: none; margin: 0;}
.submenu .RowsTitle .cn{ font-size: 24px; text-indent: 70px; font-weight: bold; text-align: left;}
.submenu .RowsTitle .en{ font-size: 20px; margin-top: -30px; letter-spacing:2px;}
.submenu .RowsTitle .en::first-letter{ font-size: 70px; margin-right: 10px; font-family: Georgia, Times, Times New Roman, serif;}
.submenu .Content{ float: left; height:60px; margin-left: 50px;}
.submenu ul{ display: flex; flex-direction: row;}
.submenu ul li a{display: block; padding:0 20px; line-height: 50px; font-size: 20px;}
.submenu ul li.subsel a{background: #5A342b; color: #fff;}
.guide{ margin-bottom:30px;}
.guide i{margin-right: 10px; margin-top: -4px;}
.GuideMap{display: inline;}

admin

<div class="service">$func_submenu(navi=Navigator,title=0,para=Service,rows=8,subimg=1,submemo=1,sub=1,mode=2,divi=none)$</div>

.service ul{display: flex; flex-direction: row; flex-wrap:wrap; justify-content: space-between;}
.service ul li{ float:left; width:250px; margin:10px;}
.service ul li .more{ display:none;}
.service ul li .thumbs{ display:flex; align-items: center; justify-content: center;}
.service ul li .thumbs img{ width:50%; height:50%;}
.service ul li .title .cn,.service ul li .title .cn a{ display:block; font-weight:bold; color:#1F5BA3;}
.service ul li .title .en,.service ul li .title .en a{ color:#1F5BA3;}
.service ul li .title a{ display: block; font-size: 16px; font-weight:bold; line-height: 40px;}

模板：whcbsm，案例： whcbsm

admin

<div class="bg-light"><div class="container nav-thumb-list-circle">$func_submenu(navi=Navigator,title=0,para=IPR,rows=5,subimg=1,submemo=1,sub=1,mode=2,divi=none)$</div></div>
自适应手机
CSS
.nav-thumb-list-circle ul{display: flex; flex-direction: row; flex-wrap:nowrap; justify-content: space-between; text-align:center;}
.nav-thumb-list-circle ul li{ float:left; flex: 1; margin:10px;}
.nav-thumb-list-circle ul li .more{ display:none;}
.nav-thumb-list-circle ul li .thumbs{ display:flex; align-items: center; justify-content: center;}
.nav-thumb-list-circle ul li .thumbs img{ width:50%; height:50%; border-radius:50%;}
.nav-thumb-list-circle ul li .title .cn,.nav-thumb-list-circle ul li .title .cn a{ display:block; font-weight:bold; color:#1F5BA3;}
.nav-thumb-list-circle ul li .title .en,.nav-thumb-list-circle ul li .title .en a{ color:#1F5BA3;}
.nav-thumb-list-circle ul li .title a{ display: block; font-weight:bold; font-size: large; line-height: 40px;}
@media (max-width: 768px) {
    .nav-thumb-list-circle ul{ flex-wrap: wrap; width: 100%;}
    .nav-thumb-list-circle ul li{ width: 30%; flex: auto;}
}