jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
一、Jquery折叠菜单效果二、jquery侧边栏菜单效果三、CSS侧边栏菜单效果先上代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){//折叠菜单事件$(".panelbox").click(function(){$(this).children().toggleClass("0m0");//给当前添加样式0m0 $(".panel").not('.0m0').slideUp();//收000样式外的全部panel收起来 $(this).children().slideToggle();//当前对象的子元素$(this).children().toggleClass("0m0");//给当前去除样式0m0});//则边栏单击事件$('#splitbar').click(function(){if( parseInt($('#asidepanel').css('width')) > 0){$('#asidepanel').css('width','0%');$('#splitbar').text('>');$('#wrap').css('width','95%');}else{$('#asidepanel').css('width','20%');$('#wrap').css('width','75%');$('#splitbar').text('<');}});});</script><style type="text/css">* {margin: 0px;padding: 0px;}html,body {height: 100%;}/*隐藏checked复选框*/#sidemenu {display: none;}/*为被选中的sidemenu后的aside设置属性（紧邻）点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/#sidemenu:checked+aside {width: 20%;}aside {width: 0%;height: 750px;float: left;background-color: #5DC3EF;overflow: hidden;transition: 0.2s ease-out;}/*为被选中的sidemenu后的wrap设置属性（非紧邻）*/#sidemenu:checked~#wrap {width: 75%;background-color: #2dbbe2;}/*控制侧边栏进出的按钮（外部包裹）*/#wrap {width: 95%;height: 750px;float: left;}#splitbar {font-size: 12px;width: 12px;float: left;height: 750px;line-height: 750px;text-align: center;font-weight: bold;color: #78341A;background-color: #98CBE8;}h2 {color: white;text-align: center;font-size: 2em;}/*控制侧边栏进出的按钮（内部文字样式）*/#sideMenuControl {/*控制侧边栏进出的按钮*/background: white;border-radius: 50%;color: orange;cursor: pointer;font-family: Courier New;font-size: 40px;font-weight: bold;width: 40px;height: 40px;line-height: 40px;text-align: center;display: inline-block;}#sideMenuControl:hover {background: #000;}a {ext-decoration: none;}/*折叠菜单大盒子样式*/.panelbox {padding: 5px;text-align: center;border: solid 1px #c3c3c3;}/*折叠菜单小盒子的样式*/.panel {padding: 5px;display: none;text-align: center;}</style></head><body><div id="box"><input type='checkbox' id='sidemenu'><aside id="asidepanel"><h2>主菜单</h2><br /><div class="panelbox">个人中心<div class="panel" id='p1'>Hello world!</div></div><div class="panelbox">实训任务<div class="panel" id='p2'>Hello world!</div></div></aside><div id="splitbar"><label for='sidemenu'>></label></div><div id='wrap'><label id='sideMenuControl' for='sidemenu'>≡</label><!--for 属性表示label 与哪个表单元素绑定，点击label即表示点击了表单元素，此处是与id为sidemenu的checkbox绑定--></div></div></body></html>
一、Jquery折叠菜单效果
通过jqeuery操作菜单div的收起和展开。样式0m0为辅助样式，实际并无内容。点击菜单标题，即可收展菜单。
菜单结构：由一个div.panelbox，内含一级菜单文本标题，二级div.panel。二级div.panel内含二级菜单文本标题
<script>$(document).ready(function() {//折叠菜单事件$(".panelbox").click(function() {$(this).children().toggleClass("0m0"); //给当前panelbox的子元素panel添加辅助样式0m0$(".panel").not('.0m0').slideUp(); //把没有0m0样式的全部panel收起来（把用户之前展开的菜单项收起来）$(this).children().slideToggle(); //把当前panelbox的子元素panel展开$(this).children().toggleClass("0m0"); //给当前panelbox的子元素panel去除辅助样式0m0});}); </script><style type="text/css">/*折叠菜单的标题样式*/.panelbox {padding: 5 px;text-align: center;border: solid 2px #bae8fd;width: 200px;}/*折叠菜单的样式*/.panel {padding: 5 px;display: none;text-align: center;background-color: #b4b5fd;}</style><div class="panelbox">个人中心 <div class="panel">修改密码<br>个人信息<br>会员中心</div></div><div class="panelbox">文章管理<div class="panel">添加文章<br>修改文章<br></div></div>
效果如下图：
分析：见jquery代码注
二、jquery侧边栏菜单效果
通过jqeuery操作侧边栏菜单div的宽度，达到收起和展开div的效果。
<script>$(document).ready(function(){//分隔条单击事件$('#splitbar').click(function(){if( parseInt($('#asidepanel').css('width')) > 0){//如果左侧菜单栏的宽度大于0，就变成0实现隐藏效果$('#asidepanel').css('width','0%');$('#splitbar').text('>');$('#wrap').css('width','95%');}else{//如果左侧菜单栏的宽度不大于0，就变成20%，实现显示效果$('#asidepanel').css('width','20%');$('#wrap').css('width','75%');$('#splitbar').text('<');}});});</script><style type="text/css">* {margin: 0px;padding: 0px;}html,body {height: 100%;}/*隐藏checked复选框*/#sidemenu {display: none;}/*左边侧边栏*/aside {width: 0%;height: 750px;float: left;background-color: #5DC3EF;overflow: hidden;text-align: center;transition: 0.2s ease-out;}/*中间分隔条*/#splitbar {font-size: 12px;width: 12px;float: left;height: 750px;line-height: 750px;text-align: center;font-weight: bold;color: #78341A;background-color: #98CBE8;}/*右则内容区域*/#wrap {width: 95%;height: 750px;float: left;background-color: #abf6f7;}</style><div id="box"><!--侧边栏菜单开始--><input type='checkbox' id='sidemenu'><aside id="asidepanel"><h2>主菜单</h2>修改密码<br>个人信息<br>会员中心<br>添加文章<br>修改文章<br></aside><!--侧边栏菜结束--><!--中间分隔条开始--><div id="splitbar"><label for='sidemenu'>></label></div><!--中间分隔条结束--><!--右则内容区域开始--><div id='wrap'>自定义内容区域</div><!--右则内容区域结束--></div>
效果如下图所示：
三、CSS侧边栏菜单效果
通过用户点击label标签后，关联的元素应用对应指定的类样式（改变侧边栏菜单div的宽度），达到收起和展开div的效果。
<style type="text/css">* {margin: 0px;padding: 0px;}html,body {height: 100%;}/*隐藏checked复选框*/#sidemenu {display: none;}/*sidemenu被选中后，紧跟其后的aside左侧菜单栏宽度变为20%，配合aside的transition,有渐变向右滑出的效果*//*sidemenu取消选中后，紧跟其后的aside左侧菜单栏宽度将恢复为默认宽度*/#sidemenu:checked + aside{width: 20%;}/*左侧边栏菜单*/aside {width: 0%;height: 750px;float: left;background-color: #5DC3EF;overflow: hidden;text-align: center;transition: 0.2s ease-out;}aside h2{color: white;text-align: center;font-size: 2em;}/*sidemenu被选中后，在其后的wrap 内容区域宽度变为20%，*//*sidemenu取消选中后，在其后的wrap 内容区域宽度将恢复为默认宽度*/#sidemenu:checked ~ #wrap {width: 75%;background-color: #2dbbe2;}/*控制侧边栏进出的按钮（外部包裹）*/#wrap {width: 95%;height: 750px;float: left;}/*控制侧边栏进出的按钮（内部文字样式）*/#sideMenuControl {background: white;border-radius: 50%;color: orange;cursor: pointer;font-family: Courier New;font-size: 40px;font-weight: bold;width: 40px;height: 40px;line-height: 40px;text-align: center;display: inline-block;}#sideMenuControl:hover {background: #000;}</style><div id="box"><!--左侧菜单栏开始--><input type='checkbox' id='sidemenu'><aside id="asidepanel"><h2>主菜单</h2>修改密码<br>个人信息<br>会员中心<br>添加文章<br>修改文章<br></aside><!--左侧菜单栏结束--><!--右侧内容区域开始--><div id='wrap'><label id='sideMenuControl' for='sidemenu'>≡</label><!--for属性表示label 与哪个表单元素绑定，点击label即表示点击了对应的表单元素sidemenu。--><!--此处label 与id为sidemenu的checkbox实现了绑定--></div><!--右侧内容区域结束--></div>
效果如下图所示：
分析：见CSS注释
注意：通过jquery操作实现侧边栏的收展后，CSS方式应用对应类样式方法将无法生效，原因是jquery操作元素的style后会生成内嵌样式，优先级将高于CSS的类样式
