目前很多网站都会用到左侧菜单栏,正好我自己做的项目也要用到,所以来做一个总结,具体实现的效果大概是这样:
下面简单说明一下思路
首先是html结构,这个结构应该不算复杂大体上是这样:
<!--左侧菜单开始-->
<div class="div-aside" style="z-index: 0; top: 85px;">
<div class="ul-levelTwoMenu-wrapper">
<div class="ul-levelTwoMenu-wrapper-title">
<span class="ul-levelTwoMenu-wrapper-text" style="font-weight: bold">系统菜单</span>
<a id="hlHideMenu" class="icon-font-e63e" style="margin-left: 16px; margin-top: 2px" href="###"></a>
</div>
<ul class="ul-levelTwoMenu">
</ul>
</div>
<div class="simple-ul-levelTwoMenu-wrapper l">
<div class="simple-ul-levelTwoMenu-wrapper-title">
<a id="hlHideSimpleMenu" style="margin-left: 16px; margin-top: 2px" href="###"></a>
</div>
<ul class="simple-ul-levelTwoMenu">
</ul>
</div>
</div>
<!--左侧菜单结束-->
两个div分别对应两种状态的左侧菜单,里面再放一个头部div来控制菜单的展开收起显示,下面是一个ul,来作为ajax取回的列表项的容器。
下面来说说css,首先,两个不同状态的左侧菜单栏都为左浮动,在js里记住状态并且点击切换。菜单栏缩略图时的ul中的li用绝对定位移到合适的位置,左侧的div里的a标签加上hover伪类,控制ul的显示。注意这里有一个小技巧,此时的ul的样式中,把左边框去掉,在控制此ul显示的div上,在hover生效时,加上一个样式,使之宽度加1px,,并且右边框颜色转变成div的底色,即可实现图中按压的效果。具体的js代码如下:
$(function () {
//左侧导航栏菜单两列互相切换
//判断当前用户的左侧菜单默认是“折叠”还是“隐藏”
var _menustatusCookie = $.cookie("QuestionnaireSurveySys_MenuStatusCode");
if (_menustatusCookie == undefined) {
$.cookie("QuestionnaireSurveySys_MenuStatusCode", "1", { expires: 365});
}
else if (_menustatusCookie == "0") {
simpleShow();
}
else if (_menustatusCookie == "1") {
simpleHide();
}
$("#hlHideMenu").click(function () {
$.cookie("QuestionnaireSurveySys_MenuStatusCode", "0", { expires: 365 });
simpleShow();
});
$("#hlHideSimpleMenu").click(function () {
$.cookie("QuestionnaireSurveySys_MenuStatusCode", "1", { expires: 365 });
simpleHide();
});
//三级导航栏显示
$(".simple-ul-levelTwoMenu").on("mouseenter", ".li-levelTwoMenu", function () {
$(this).find("ul").show();
$(this).find("ul").parent("li").addClass("li-shadow");
});
$(".simple-ul-levelTwoMenu").on("mouseleave", ".li-levelTwoMenu", function () {
$(this).find("ul").hide();
$(this).find("ul").parent("li").removeClass("li-shadow");
});
//导航栏展开状态时,每个类可以单独收起
$(".ul-levelTwoMenu").on("click", ".hl-expandable", function () {
$(this).next().slideToggle(100);
})
});
//折叠
function simpleShow() {
$(".ul-levelTwoMenu-wrapper").hide();
$(".simple-ul-levelTwoMenu-wrapper").show();
$(".content-body").addClass("content-distance");
$(".content-header").addClass("content-distance");
$(".div-aside").addClass("menuarea-wid");
$(".simple-ul-levelTwoMenu-wrapper").addClass("menuarea-wid");
$("#hlHideSimpleMenu").addClass("icon-font-e62c");
$(".li-levelTwoMenu").addClass("levelTwoMenu-pickup");
}
//显示
function simpleHide() {
$(".simple-ul-levelTwoMenu-wrapper").hide();
$(".ul-levelTwoMenu-wrapper").show();
$(".content-body").removeClass("content-distance");
$(".content-header").removeClass("content-distance");
$(".div-aside").removeClass("menuarea-wid");
$(".simple-ul-levelTwoMenu-wrapper").removeClass("menuarea-wid");
$(".li-levelTwoMenu").removeClass("levelTwoMenu-pickup");
}
css:
/*左侧菜单栏样式*/
.div-aside{position:fixed;float:left;height:329px;left:0;border:1px solid #e1e2e2}
.ul-levelTwoMenu-wrapper{overflow:hidden;float:left;height:100%;width:150px}
.ul-levelTwoMenu-wrapper-title{padding-left:49px;border-bottom:1px solid #e1e3e4;background-color:#f5f8fd;height:30px;line-height:30px}
.ul-levelTwoMenu-wrapper-text{float:left;color:#323437;font-size:12px;}
.ul-levelTwoMenu{list-style:outside none none;margin-bottom:10px}
.simple-ul-levelTwoMenu-wrapper{float:left}
.simple-ul-levelTwoMenu-wrapper-title{padding-left:1px;border-bottom:1px solid #e1e3e4;background-color:#f5f8fd;height:30px;line-height:30px}
.li-levelTwoMenu{position:relative;text-align:left;border-bottom:1px solid #fff;border-top:1px solid #fff;border-right:1px solid #fff;padding-top:8px;padding-left:5px;padding-bottom:5px}
.hl-expandable{display:block;height:30px;width:150px}
.hl-expandable:hover{background-color:#f5f8fd}
.icon-levelTwoMenu-align{position:relative;top:3px}
.span-levelTwoMenu-title{color:#323437;cursor:pointer;font-size:12px;font-weight:bold;line-height:30px;list-style-image:none;margin-left:8px}
.ul-levelThreeMenu li{height:20px;padding-top:10px}
.ul-levelThreeMenu li:hover{background-color:#f5f8fd}
.span-levelThreeMenu{float:left;color:#323437;cursor:pointer;font-size:12px;line-height:12px;list-style-image:none;margin-left:34px}
.simple-span-levelThreeMenu{color:#323437;cursor:pointer;font-size:12px;line-height:12px;list-style-image:none}
.simple-ul-levelThreeMenu{list-style:none;width:120px;position:absolute;top:-1px;left:47px;border:1px solid #e1e2e2;border-left:none;z-index:99;background-color:#f5f8fd;text-align:center;}
.simple-ul-levelThreeMenu li{padding-top:14px;height:28px}
.simple-ul-levelThreeMenu li:hover{background-color:#e9e9e9}
/*导航切换样式*/
.menuarea-wid{width:47px}
.levelTwoMenu-pickup{padding-left:5px}
.content-distance{margin-left:-103px}
.li-shadow{background-color:#f5f8fd;border-top-color:#e1e2e2;border-bottom-color:#e1e2e2;border-right:1px solid #fff;width:47px;z-index:999}
/*底部样式*/
.div-footer{width:100%;position:fixed;bottom:0;left:0}
.table-bottom{height:35px; color:#7f7e7a; font-size:14px; background-color:#edf2fc;}
/*字体文件及其样式*/
@font-face{font-family:iconfont;src:url(font/iconfont.eot);src:url(font/iconfont.eot#iefix) format("embedded-opentype"),url(font/iconfont.woff) format("woff"),url(font/iconfont.ttf) format("truetype"),url(font/iconfont.svg#iconfont) format("svg")}
.icon-font-e60b{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e60b:before{margin-left:5px;margin-right:2px;content:'\e60b';color:#325169;font-size:21px}
.icon-font-e61a{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e61a:before{margin-left:5px;margin-right:2px;content:'\e61a';color:#325169;font-size:21px}
.icon-font-e62c{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e62c:before{content:'\e62c';color:#000;font-size:17px}
.icon-font-e63e{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e63e:before{content:'\e63e';color:#000;font-size:17px}
.icon-font-e657{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e657:before{margin-left:5px;margin-right:2px;content:'\e657';color:#325169;font-size:21px}
.icon-font-e65a{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e65a:before{margin-left:5px;margin-right:2px;content:'\e65a';color:#325169;font-size:21px}
.icon-font-e65c{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e65c:before{margin-left:5px;margin-right:2px;content:'\e65c';color:#325169;font-size:21px}
.icon-font-e66b{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e66b:before{margin-left:5px;margin-right:2px;content:'\e66b';color:#325169;font-size:21px}
.icon-font-e661{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e661:before{margin-left:5px;margin-right:2px;content:'\e661';color:#325169;font-size:21px}
.icon-font-e662{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e662:before{margin-left:5px;margin-right:2px;content:'\e662';color:#325169;font-size:21px}
.icon-font-e664{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e664:before{margin-left:5px;margin-right:2px;content:'\e664';color:#325169;font-size:21px}
.icon-font-e665{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e665:before{margin-left:5px;margin-right:2px;content:'\e665';color:#325169;font-size:21px}
.icon-font-e668{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e668:before{margin-left:5px;margin-right:2px;content:'\e668';color:#325169;font-size:21px}
.icon-font-e669{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e669:before{margin-left:5px;margin-right:2px;content:'\e669';color:#325169;font-size:21px}
.icon-font-e674{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e674:before{margin-left:5px;margin-right:2px;content:'\e674';color:#325169;font-size:21px}
.icon-font-e677{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e677:before{margin-left:5px;margin-right:2px;content:'\e612';color:#325169;font-size:21px}
.icon-font-e612{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e612:before{margin-left:5px;margin-right:2px;content:'\e672';color:#325169;font-size:21px}
.icon-font-e672{font-family:iconfont!important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;color:#666}
.icon-font-e672:before{margin-left:5px;margin-right:2px;content:'\e672';color:#325169;font-size:21px}