您的位置：首页 > Web前端 > JQuery

垂直手风琴5级菜单！用js+jquery动态加载菜单，附上源码hezhu和注释

2016-12-15 16:14 561 查看
1.做了几天，终于做完了，原理也理解透彻了。注释加上了。数据结构则是1导航菜单2二级菜单:XX管理,XX报告,XX分析,查询3三级菜单:XX登记XX注销XX查询XX移交4四级菜单：XX查询，XX查询5五级菜单即有链接可以点击显示右边页面的。从数据库读出已经是菜单的结构顺序了，但是每个菜单均带有自己的等级。先看效果：

左边是4级菜单的第一个，右边是5级菜单的第二个；同级别菜单点开是会自动收缩其他已经展开的菜单的。

2.附上jsp代码

<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<c:set var="systemctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css"
href="${systemctx }/webresource/css/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet"
href="${systemctx }/webresource/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet"
href="${systemctx }/webresource/css/style/left.css" media="screen"
type="text/css" />
<link rel="stylesheet" type="text/css"
href="${systemctx }/webresource/css/style/commonColor.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="${systemctx }/webresource/css/bootstrap/bootstrap-ie6.min.css">
<link type="text/css" rel="stylesheet" href="${systemctx }/webresource/css/bootstrap/bootstrap-ie6.css">
<![endif]-->
<link rel="stylesheet"
href="${systemctx }/webresource/css/style/index.css" media="screen"
type="text/css" />
<script type="text/javascript"
src='${systemctx }/webresource/js/util/jquery.min.js'></script>
<script type="text/javascript"
src='${systemctx }/itreasury/javascript/jquery/jquery.easyui.min.js'></script>
<script type="text/javascript"
src="${systemctx }/webresource/js/util/bootstrap.min.js"></script>
<!--[if lte IE 6]>
<!-- bsie  css 补丁文件 -->
<script type="text/javascript"
src="${systemctx }/webresource/js/util/bootstrap-ie.js"></script>
<!-- [endif] -->
<script type="text/javascript"
src="${systemctx }/webresource/js/index.js"></script>
</head>
<body>
<div>
<!-- 根据菜单的id，显示对应的图标 -->
<% 
Map map = new HashMap(); 
map.put(30L, "fa-area-chart");
map.put(33L, "fa-book");
map.put(59L, "fa-calculator");
map.put(45L, "fa-smile-o");
request.setAttribute("map", map);
%>
<!--展开效果-->
<div class="left" style="width:200px;">
<!--导航菜单-->
<a class="left_top" href="javascript:left.closeLeft();">
<div class="nav_menu">
<i class="fa fa-navicon"></i>
<p>导航菜单</p>
</div> </a>
<div class="left-menu">
<!--循环菜单列表-->
<c:forEach items="${loginInfo.menuList}" var="menu" varStatus="i">
<c:choose>

<c:when test="${menu.menuLevel == 2 }"><!--菜单等级为2的-->
<c:set var="menuId" value="${menu.id}"></c:set>
<c:if test="${(i.index  != 0 ) || fn:length(loginInfo.menuList) == i.index+1}">

</ul>
</div>
</div>
<!--这里和下面的div,div class=div3,ul class=thirdMenu对应，如果下面的循环执行完，第二次循环就执行上面的代码，进行完美格式封装-->
</c:if>
<div>
<div class="div2">
<div class="jbsz">
<i class="fa <c:out value='${map[menu.id] }'></c:out>"></i>
</div>
<p>
<c:choose>
<c:when test="${empty menu.menuURL}">${menu.menuName }</c:when>
<c:otherwise>
<a href="javascript:void(0);" rel="sub${i.index }" src="${menu.menuURL }">${menu.menuName }</a>
</c:otherwise>
</c:choose>
</p>
<i class="fa fa-chevron-down"></i>
</div>
<!--进行完美格式封装伏笔-->
<div class="div3">
<ul class="thirdMenu">
</c:when>
<c:otherwise>
<c:if test="${menu.menuLevel != 2}">
<c:choose>
<c:when test="${menu.menuLevel == 3 }">
<c:set var="menuId" value="${menu.id}"></c:set>
<!--进行完美格式封装-->
<c:if test="${(i.index  != 0 ) || fn:length(loginInfo.menuList) == i.index+1}">

4000
</span>
</c:if>

<li class="thirdMe" rel="sub${i.index }">
<a href="javascript:void(0);" rel="sub${i.index }" src="${menu.menuURL } " >${menu.menuName}</a> 
<i class="fa fa-angle-down"></i>
</li>
<!--进行完美格式封装伏笔-->
<span class="div4" rel="sub${i.index }">

</c:when>
<c:otherwise>
<c:if test="${menu.menuLevel != 3}">
<c:choose>
<c:when test="${menu.menuLevel == 4 }">
<c:set var="menuId" value="${menu.id}"></c:set>
<!--进行完美格式封装-->
<c:if test="${(i.index  != 0 ) || fn:length(loginInfo.menuList) == i.index+1}">
</label>
</c:if>
<li class="forthMe">
<a href="javascript:void(0);" rel="sub${i.index }"  src="${menu.menuURL } " >${menu.menuName}</a> 
<i class="fa fa-angle-down"></i>
</li>
<!--进行完美格式封装伏笔-->
<label class="div5">
</c:when>
<c:otherwise>
<li><a rel="sub${i.index }" src="${menu.menuURL }">${menu.menuName}</a>
</li>
</c:otherwise>
</c:choose>
</c:if>
</c:otherwise>
</c:choose>
</c:if>
</c:otherwise>
</c:choose>
</c:forEach>
</div>
</div>
<!--中间内容-->
<div id="Tabbar">
<!--选项卡-->
<div class="left-btn-div">
<a href="javascript:left.moveLeft();" class="btn btn-default"><<</a>
</div>
<div class="right-btn-div">
<a href="javascript:left.moveRight();" class="btn btn-default">>></a>
</div>
<ul id="bar"></ul>
<!--嵌入的内容-->
<div class="center">
<!--<iframe frameborder=0 scrolling=no id="content" src=""></iframe>-->
</div>
</div>
</div>
<script type="text/javascript" src="${systemctx }/webresource/js/view/left.js"></script>
<script type="text/javascript">
//3、4级菜单折叠下级菜单方法,但是其他的不会自动收起，没用到
function onModified(btn){
  $(btn).parent().next().slideToggle('slow');
   $(btn).next().toggleClass("rotateI");
}
  </script>
</body>
</html>


3.附上js代码

/**
 * Created by Administrator on 2016/8/23.
 */
var left={}
$(function(){
    //打开左边菜单栏
    left.openMenu();
    left.openThirdMenu();
    left.openForthMenu();
    //打开三级菜单
    left.OpenthMenu();
    //中间内容
    $(".tab tr td").click(function(){
        $(".tab tr td").removeClass("add");
        $(this).addClass("add");
    });
    $("#button1").click(function(){
        $(this).css("background","#E35558");
        $(this).css("color","#ffffff");
    });
    $("#button2").removeClass("add_btn");
    $(".butt input").click(function(){
        $(".butt input").removeClass("add_btn");
        $(this).addClass("add_btn");
    });
    $(".nav_menu").click(function(){
    	left.closeLeft();
    });
    $("#Tabbar").css('width',$(window).width()-200);
    //选项卡
    left.addRemoveTabs();
    left.refreshTab();
});

//关闭时效果——展开
left.openLeft = function(){
    if($('.left').css('display') == 'none'){
        $('.sidebar').css('display', 'none');
        $('#sidebar').css('width','200px');
        $('.left').css('display', 'block');
        $("#bar").css('width',$(window).width()-100);
        $("#bar").css('left',140);
        $(".center").css('width',$(window).width()-200);
        $(".center").css('left',140);
    }
};
//折叠已展开菜单--------------------没用
left.closeLeft = function(){
    if($('.sidebar').css('display') == 'none'){
        $('#sidebar').css('width','60px');
        $('.left').css('display', 'none');
        $('.sidebar').css('display', 'block');
        $("#Tabbar").css("left",60);
        $("#bar").css('width',$(window).width()-60);
        $(".center").css('width',$(window).width()-60);
        $(".center").css('left',0);
        $("#bar").css('left',0);
    }
};
//展开时效果——展开折叠的二级菜单
left.openMenu = function(){
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;
        var links = this.el.find('.div2');
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
    };
    /*显示下层窗口*/
    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
        $this = $(this);
        $next = $this.next();
        $next.slideToggle();
        $this.parent().toggleClass('open');//上级元素后面的图标呈打开状态，再点就收起
    	if (!e.data.multiple) {
            $el.find('.div3').not($next).slideUp().parent().removeClass('open');
        }
    };
    var div1 = new Accordion($('.left-menu'), false);
};
left.openThirdMenu = function(){
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;
        var links = this.el.find('.thirdMe');
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
    };
     Accordion.prototype.dropdown = function(e) {
    	 
        var $el = e.data.el;
        $this = $(this);//本点击按钮3级菜单li
        $next = $this.next();//本点击按钮3级菜单下面的4级菜单span
        $this.toggleClass('openThird');//加上openThird样式即图标旋转
        $next.slideToggle();//折叠span
        if (!e.data.multiple) {
            $el.find('.div4').not($next).slideUp();//所有的div4,除了本点击按钮3级菜单下面的4级菜单span，都收起
            $el.find('.div4').prev().not($this).removeClass('openThird');//所有的div4的上一级（即li）,不包括本点击按钮3级菜单li,移除openThird样式
        }
    };
    var div1 = new Accordion($('.div3'), false);//div3不折叠
};
//展开时四级菜单
left.openForthMenu = function(){
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;
        var links = this.el.find('.forthMe');
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
    };
    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
        $this = $(this);//本点击按钮4级菜单li
        $next = $this.next();//本点击按钮4级菜单下面的5级菜单label
        $next.slideToggle();//折叠label
        $this.toggleClass('openForth');//加上openForth样式即图标旋转
        if (!e.data.multiple) {
        	//所有的div5,除了本点击按钮4级菜单下面的5级菜单label，都收起
            $el.find('.div5').not($next).slideUp();//.parent().removeClass('openForth');
            $el.find('.div5').prev().not($this).removeClass('openForth');//所有的div5的上一级（即li）,不包括本点击按钮3级菜单li,移除openThird样式
        }
    };
    var div1 = new Accordion($('.div4'), false);
}
////折叠时的三级菜单
left.OpenthMenu = function(){
var Accordion = function(el, multiple) {
       this.el = el || {};
       this.multiple = multiple || false;
       this.el.find('.link').on('click', {
           el: this.el,
           multiple: this.multiple
       }, this.dropdown);
   }
     Accordion.prototype.dropdown = function(e) {
    	alert("OpenthMenu");
        var $el = e.data.el;
        $(this).next().slideToggle();
        $(this).parent().toggleClass('openth');
        if (!e.data.multiple) {
            $el.find('.th-menu').not($(this).next()).slideUp().parent().removeClass('openth');
        }
    };
    var accordion = new Accordion($('.sub-menu'), false);
};

//选项卡
left.addRemoveTabs = function(){
    $(".sub-menu li a").click(function(){
        var aName = $(this).attr("rel");
        //显示隐藏close小图标
        $("#bar li a.remove").hide();
        $("#" + aName + "_close").show();
        //iframe内容
        $(".center iframe").hide();
        $("#" + aName + "_content").show();
        //当前选项卡样式
        $("#bar li").removeClass("current");
        $("#" + aName).parent().addClass('current');
        //调用添加选项卡函数
        //left.addTab($(this));
    });
    //点击3、4级菜单执行方法
    $(".div3  li a").click(function(){
        var aName = $(this).attr("rel");
        //显示隐藏close小图标
        $("#bar li a.remove").hide();
        $("#" + aName + "_close").show();
        //iframe内容
        $(".center iframe").hide();
        $("#" + aName + "_content").show();
        //当前选项卡样式
        $("#bar li").removeClass("current");
        $("#" + aName).parent().addClass('current');
        //调用添加选项卡函数
        //获取a标签src函数，并去空格
        var src=$.trim($(this).attr('src'));
    	//非空
    	if(src!=""&&src!=null){
    		//调用添加选项卡函数
    		left.addTab($(this));
    	}
    });
    $('#bar').on('click','a.Currtab',function(){
       //获取tab名
        var contentname = $(this).attr("id") + "_content";
        //console.log(contentname);
        //隐藏其他所有tabs
        $(".center iframe").hide();
        $("#bar li").removeClass('current');
        var closename = $(this).attr("id") + "_close";
        $("#bar li a.remove").hide();
        $("#"+closename).show();
        //显示当前tab
        $("#" + contentname).show();
        $(this).parent().addClass('current');
    });
    $("#bar").on('click','a.remove',function(){
        //获取tab的id
        var tabid = $(this).parent().find(".Currtab").attr("id");
        //移除tab和相关内容
        var contentname = tabid + "_content";
        //console.log(contentname);
        $("#" + contentname).remove();
        $(this).parent().remove();
        // if there is no current tab and if there are still tabs left, show the first one
        if ($("#bar li.current").length == 0 && $("#bar li").length > 0) {
            var firsttab = $("#bar li:last-child");// 查找第一个tab
            firsttab.addClass("current");
            var firsttabid = $(firsttab).find("a.Currtab").attr("id");// 获取第一个tab的名字和内容
            $("#" + firsttabid + "_content").show();
            $("#" + firsttabid + "_close").show();
        }
        left.refreshTab();
    });
};
//添加选项卡
left.addTab = function(link){
    //console.log( $(link).attr("src"));
    var Src = $(link).attr("src");
    //若tab已经存在，则不会重复请求
    if($('#' + $(link).attr('rel')).length != 0){
    	//$(".center iframe").attr('src',Src);
    	// left.refreshTab();
    	return;
    }
    //隐藏其他的tabs
    $('#bar li').removeClass('current');
    $(".center iframe").hide();
    //添加一个新的选项卡
    $("#bar").append("<li class='current'><a class='Currtab' id='" +
        $(link).attr("rel") + "' href='javascript:void(0);'>" + $(link).html() +
        "</a><a href='javascript:void(0);' id='"+$(link).attr("rel")+"_close"+"'class='remove'>"+"<img src='webresource/img/Close.png'></a></li>");
    $(".center").append('<iframe frameborder=0 id="'+$(link).attr('rel')+'_content'+'" src="'+Src+'"></iframe>');
    // 设置新添加的选项卡为当前tab
    $("#bar li a.remove").hide();
    $("#"+$(link).attr("rel") + "_close").show();
    $("#" + $(link).attr("rel") + "_content").show();
    //console.log($("#bar li").width());
    left.refreshTab();
};

left.refreshTab = function(){
  //获取一个右边区域的宽度
  var gWidth = $("#Tabbar").width();
  //console.log(gWidth);
  //选项栏宽度
  var uWidth = 100;
  $("#bar li").each(function(){
 //console.log($(this).width());
    uWidth += $(this).width() +11;
  });
  //console.log(uWidth);
  if(uWidth >0 )
    $("#bar").css("width", uWidth);
  if(uWidth >= gWid
dd51
th){
    $(".left-btn-div").show();
    $(".right-btn-div").show();
    left.minLeft = gWidth - uWidth-20;
    $("#bar").css("left", left.minLeft);
  }else{
    $(".left-btn-div").hide();
    $(".right-btn-div").hide();
      $("#bar").css("left",0);
  }
};
//选项栏想左移动
left.moveLeft = function(){
  var lcss =  $("#bar").css("left");
  lcss = parseInt(lcss.substring(0,lcss.length -2));
  if(lcss < 20){
    lcss = lcss + 100;
    if(lcss > 20) lcss = 20;
    $("#bar").css("left",lcss);
  }
};
//选项栏想右移动
left.moveRight = function(){
  var lcss =  $("#bar").css("left");
  lcss = parseInt(lcss.substring(0,lcss.length -2));
  if(lcss > left.minLeft){
    lcss = lcss - 100;
    if(lcss < left.minLeft) lcss = left.minLeft;
    $("#bar").css("left",lcss);
  }
};

//禁用鼠标右键
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");


4.附上css样式

* {
    margin:0;padding:0;list-style-type:none;
}
body{
    overflow-y: hidden;
}
html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*闁兼寧绮屽畷鐔虹箔椤戣法顏卞☉鎿冧簻濞存﹢寮介敓锟�*/
.sidebar h1 {
    height: 45px;
    line-height: 40px;
    cursor: pointer;
    color: #FFF;
    font: 16px Open Sans;
    border-bottom: 1px solid #CFCFCF;
    padding-left: 10px;
    padding-top: 12px;
    margin: 0;
}
h1>i.fa.fa-bars {
    padding: 10px;
}
h1 a{
    text-decoration: none;
}
/*濞戞挻妲掕ぐ宥夊础閿燂拷*/
.sidebar {
    width: 60px;
    height: 100%;
    position: fixed;
    border-right: 1px solid #CFCFCF;
}
/*濞戞搫鎷锋鍥嚕濠婂啫绀嬮柡宥呭槻缁憋拷*/
.sidebar li {
    list-style: none;
    padding: 10px 10px 10px 20px;
    position: relative;
    border-bottom: 1px solid #CFCFCF;
}
/*.main-menu{*/
    /*list-style: none;*/
    /*padding: 0;*/
    /*background: #6E9CD6;*/
/*}*/
.main-menu li a {
    text-decoration: none;
    color: #ffffff;
    font: 14px Open Sans;
    position: relative;
    z-index: 1000;
}
.sub-menu li a {
    text-decoration: none;
    color: #000000;
    font: 14px Open Sans;
    position: relative;
    z-index: 1000;
}

/*濞存粌鐬兼鍥嚕濠婂啫绀嬮柡宥呭槻缁憋拷*/
.sub-menu {
    position: absolute;
    left: 62px;
    top: 0;
    padding: 0;
    width: 120px;
    display: none;
    text-align: left;
}
.sub-menu li.firstMe,.sub-menu li.firstMe a{
    font-size: 14px;
    font-weight: bold;
    height: 20px;
}
.sub-menu li.link{
    font-size: 13px;
}
li.link:hover {
    cursor: pointer;
}
.sub-menu li:first-child{
    width: 92px;
    margin-left: -2px;
}
.sub-menu div.th-li li:first-child{
    width: 90px;
    margin-left: 0;
}
.sub-menu li a {
    font-size: 13px;
}

.main-menu li:hover ul.sub-menu {
    display: block;
}
.main-menu li:hover ul.sub-menu .th-menu{
    display: none;
}
/*濞戞挸顦芥鍥嚕濠婂啫绀嬮悘鐐存礀缁辨垿寮崼鐔轰函*/
ul.sub-menu li i.fa-chevron-down{
    font-size: 12px;
    color: #ffffff;
    margin-left: 25px;
}
ul.sub-menu div.openth li.link a{
    color: #ffffff;
}
ul.sub-menu div.openth li i{
    color: #ffffff;
}
ul.sub-menu div.openth li i.fa-chevron-down{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
div.th-menu ul li {
    padding-left: 20px;
}
div.th-menu ul li a {
    margin-left: 12px;
    color: #000000;
}
div.th-menu ul li a:hover {
    color: #ffffff;
}
.th-menu ul li,.th-menu ul li:first-child{
    background: #F1F1F2;
}
.th-menu ul li:first-child{
    width: 90px;
    margin-left: 0;
}
/*濞存粌鐬兼鍥嚕濠婂啫锟�*/
.left{
    border-right:1px solid #C6C6C6 ;
    width:200px;
    height:100%;
    font-size:14px;
    text-align:center;
    position:fixed;
    background-color:#EFEFEF;
}
.left a{
    text-decoration: none;
}
.left-menu{
    list-style: none;
    padding: 0;
    width: 200px;
}
.left div div{
    list-style: none;
}
.left-menu .first-one{
    border-top: 1px solid #CCCCCC;
}
.div2{
    height:40px;
    line-height:40px;
    cursor:pointer;
    font-size:13px;
    position:relative;
    border-bottom:#CCCCCC 1px solid;
    color:#ffffff;

}
.div2 p{
    position: absolute;
    left:50px;
}
.div2 p a{
    color: #ffffff;
}
.jbsz {position:absolute;left:20px;  top:12px; top:0px\9;}
.nav_menu{
    width: 200px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 13px;
    position: relative;
    color:#ffffff;
    z-index: 20;
    border-bottom: #CCCCCC 1px solid;
}
.nav_menu p{
    padding-top:1px;
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left:50px;
}
.div3{
    display:none;
    font-size:13px;
    position: relative;
    z-index: 10;
}
.div3 li{
    border-bottom:1px solid #E1E1E1;
    line-height:30px;
    list-style:none;
    text-align:left;
    cursor: hand;
}
.div3 li a{
    text-decoration: none;
    outline: none;
    position: relative;
    color:black;
    left:50px;
    width: 182px;
    display: inline-block;
}
.div3 ul li a:hover{
    text-decoration: none;
    color: #ffffff;
}
.left_top i{
    position: absolute;
    top:12px;
    left:20px;
    font-size:18px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.left_top i.fa-angle-left{
    right:25px;
    left: auto;
    font-size:18px;
}
.div2 i{
    font-size:13px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.div2 i.fa-chevron-down{
    position: absolute;
    right:22px;
    left: auto;
    top:12px;
    font-size:12px;
}
/*濞戞挸顦芥鍥嚕濠婂啫锟�*/
.div4{
    display:none;
    font-size:13px;
    position: relative;
    z-index: 10;
    width: 230px;
}
.div4 li{
    border-bottom:1px solid #E1E1E1;
    line-height:30px;
    list-style:none;
    text-align:left;
    cursor: hand;
}
.div4 li a{
    text-decoration: none;
    outline: none;
    position: relative;  
    left:70px;
    /* width: 282px; */
    display: inline-block;
}
.div4 ul li a:hover{
    text-decoration: none;
    color: #ffffff;
}
.div5{
    display:none;
    font-size:13px;
    position: relative;
    z-index: 10;
}
.div5 li{
    border-bottom:1px solid #E1E1E1;
    line-height:30px;
    list-style:none;
    text-align:left;
    cursor: hand;
}
.div5 li a{
    text-decoration: none;
    outline: none;
    position: relative;
    font-weight:100 !important;
    left:65px;
    width: 182px;
    display: inline-block;
}
.div5 ul li a:hover{
    text-decoration: none;
    color: #ffffff;
}
/* .div4 li{
    border-bottom:1px solid #E1E1E1;
    line-height:30px;
    list-style:none;
    text-align:left;
    cursor: hand;
}
.div4 li a{
    text-decoration: none;
    outline: none;
    position: relative;
    color:black;
    left:50px;
    width: 182px;
    display: inline-block;
}
.div4 ul li a:hover{
    text-decoration: none;
    color: #ffffff;
} */
.thirdMe{
    cursor: pointer;
   /*  padding-left: 49px;  */
}
.thirdMe i{
    position: relative;
   /*   left:99px;  */
    font-weight: bolder;
    color: black;
}
ul.thirdMenu {
    margin-left: -32px;
}
.thirdMenu ul li a{
    position: relative;
    left: 62px;
}
.special i{
    position: relative;
    left:34px;
}
.special1 i{
    position: relative;
    left:47px;
}
.special-inno i{
    position: relative;
    left:72px;
}

/*闁搞儳鍋撻悥锝夊籍鐎ｎ厽锟�*/
.left-menu div.open .div2{
    color:#ffffff;
}
.left-menu div.open i.fa.fa-chevron-down{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.rotateI {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
/*濞戞挸顦芥鍥嚕濠婂啫锟�*/
.thirdMenu li.openThird  a{
    color:black;
}
.thirdMenu li.openThird  i.fa.fa-angle-down{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.thirdMenu li.openForth  a{
    color:black;
}
.thirdMenu li.openForth  i.fa.fa-angle-down{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
/*闂侇偄顧侀妴宥夊础閿燂拷*/
#Tabbar{
    height: 40px;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 200px;
}
#bar{
    height: 40px;
    position: absolute;
    top: 0;
    left: 0px;
    margin:0;
    padding:0;
    list-style:none;
}
#bar li {
    float: left;
    display: block;
    padding: 14px 5px 0 5px;
    text-align: center;
    height: 40px;       /*濞ｅ浂鍠楅弫绯眣闁兼枼鍓濆鏇熺▔閿燂拷*/
    width: auto;
}
#bar li a {
    color:#F6F2F4;
    text-decoration:none;
    font-size: 13px;
    font-weight: bold;
    margin-left: 5px;
}
/*鐟滅増鎸告晶鐘绘焻婢舵劑锟介柛妤嬫嫹*/
#bar li.current a {
    color:#ffffff;
    text-decoration:none;
    margin-left:10px;
}

#bar li a.remove {
    color:#ffffff;
    margin-left:10px;
}
a.remove img {
    width: 9px;
    border: none;
}
.center{
    width: 100%;
    position: absolute;
    top: 40px;
}
.center p {
    padding:20px 20px 100px 20px;
    background: #fff;
    margin: 15px;
}
.center iframe{
    width:100%;
    height: 678px;
}
.left-btn-div{
  position:absolute;
  height: 40px;
  z-index:1;
  background:#6E9CD6;
}
/*闁告帞锟�锟斤拷宸剏闁肩绱曢獮澶嬬▔閿燂拷*/
.left-btn-div a{
  color:white;
  font-weight:700;
  font-size:18px;
  text-decoration: none;
  /* margin-top: 21px; */
  display: block;
}
end
*/
/*濠⒀呭仜婵拷?y闁肩绱曢獮澶嬬▔閿燂拷*/
.left-btn-div a {
    color: white;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    display: block;
    width: 25px;
    height: 40px;
    padding: 12px 4px;
    background: transparent;
}
/*end*/
.right-btn-div{
  position:absolute;
  background:#6E9CD6;
  z-index:1;
  height: 40px;/*濞ｅ浂鍠楅弫绯眣闁肩绱曢獮澶嬬▔閿燂拷*/
  right:0;
}
/*闁告帞锟�锟斤拷宸剏闁肩绱曢獮澶嬬▔閿燂拷*/
.right-btn-div a{
  color:white;
  font-weight:700;
  font-size:18px;
  text-decoration: none;
  /* margin-top: 21px; */
  display: block;
}
end
*/
/*濠⒀呭仜婵拷?y闁肩绱曢獮澶嬬▔閿燂拷*/
.right-btn-div a {
    color: white;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    display: block;
    width: 25px;
    height: 40px;
    padding: 12px 4px;
    background: transparent;
}
.left-btn-div a.btn,.right-btn-div a.btn{
border-radius: 0px;
}
.left-btn-div a.btn-default:hover,.left-btn-div a.btn-default:link,.left-btn-div a.btn-default:visited,.left-btn-div a.btn-default:active {
    background-color: #6E9CD6;
}
.right-btn-div a.btn-default:hover,.right-btn-div a.btn-default:link,.right-btn-div a.btn-default:visited,.right-btn-div a.btn-default:active {
    background-color: #6E9CD6;
}
/*end*/



5.最后附上贴图







                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jquery
                                                菜单
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航