jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单

一、Jquery折叠菜单效果
二、jquery侧边栏菜单效果
三、CSS侧边栏菜单效果

先上代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="https://cdn.staticfile.org/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的类样式

jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单相关推荐

html菜单箭头,html – 纯CSS选择菜单/下拉菜单：如何制作右箭头功能？
我根据解决方案使用自定义选择/下拉菜单: https://stackoverflow.com/a/10190884/1318135 这个功能很棒,只有在单击该框时才显示选项.单击右侧的"箭头 ...
html左边多级菜单导航栏,精美的多级侧边栏导航菜单jQuery插件
这是一款基于bootstrap的精美多级侧边栏导航菜单jQuery插件.该导航菜单在bootstrap样式的基础上,通过jQuery来为导航菜单绑定菜单点击事件,生成非常漂亮的多级侧边栏导航菜单. 使 ...
JS 新浪下拉菜单+jQuery
思考:首先在CSS布局上就出错了,导致后面设置JS时就有很大的问题 <!DOCTYPE html> <html lang="en"><head> ...
html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件
这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...
多级弹出菜单jQuery插件ZoneMenu
ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载完整HTML文件代码 ...
导航菜单 gooey-menu jQuery液态融合（gooey）样式导航菜单插件（精）
gooey-menu是一款基于SVG过滤器的液态融合(gooey)样式导航菜单jQuery插件.通过该插件你可以非常轻松的制作出各种gooey样式的环形菜单特效. 查看原文查看在线演示Demo和更多 ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
jQuery实现右上角点击后滑下来的竖向菜单
效果体验请点击这里:http://keleyi.com/a/bjad/27095rgj.htm 这个菜单我觉得可以做成在线客服之类的,点击下滑后,带关闭按钮,因此在不想显示的时候可以关掉它. 以下是源 ...
php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码
jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...

jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单

jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单

一、Jquery折叠菜单效果

二、jquery侧边栏菜单效果

三、CSS侧边栏菜单效果

jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单相关推荐

最新文章

热门文章