bootstrap3 侧边导航栏

1.效果图 1

效果图2

2.代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>侧边栏</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-3.0.0.min.js"></script><script src="js/bootstrap.min.js"></script><style type="text/css">a,a:hover,a:focus{color: #ffffff;text-decoration: none;}.panel-group {background-color: #404040;width: 250px;height: 600px;overflow-y: auto;}.panel-group .panel {background-color: #404040;border: none;}.panel-heading{border-top-left-radius: 0px; border-top-right-radius: 0px; }.panel-default>.panel-heading {border: none;color: #ffffff;background-color: #505050;}.panel-default>.panel-heading>span{font-size: 10px;}.panel-default>.panel-heading:active,.panel-default>.panel-heading:hover{background-color: #4a8bc2;}.panel-default>.panel-heading>a:hover{text-decoration: none;background-color: #4a8bc2;}.panel-group .panel-heading+.panel-collapse>.panel-body {border: none;}.panel-body {padding: 0px;}.nav>li{padding: 1px 0px 0px 0px;}.nav>li>a{text-decoration: none;padding: 10px 10px 10px 35px;}.nav>li>a:hover,.nav>li>a:focus{background-color: #505050;}</style></head><body><div class="panel-group" id="panelContainer"><div class="panel panel-default"><div id="header1" class="panel-heading" data-toggle="collapse" data-target="#sub1" data-parent="#panelContainer"><i class="glyphicon glyphicon-list-alt"></i><a href="#">栏目菜单 1</a><span class="glyphicon glyphicon-triangle-right pull-right"></span></div><div id="sub1" class="collapse panel-collapse"><div class="panel-body"><ul class="nav"><li><a href="#"><span></span>添加栏目1</a></li><li><a href="#">添加栏目2</a></li><li><a href="#">添加栏目3</a></li><li><a href="#">添加栏目4</a></li></ul></div></div></div><div class="panel panel-default"><div id="header2" class="panel-heading" data-toggle="collapse" data-target="#sub2" data-parent="#panelContainer"><i class="glyphicon glyphicon-leaf"></i><a href="#">栏目菜单 2</a><span class="glyphicon glyphicon-triangle-right pull-right"></span></div><div id="sub2" class="collapse panel-collapse"><div class="panel-body"><ul class="nav"><li><a href="#">添加栏目1</a></li><li><a href="#">添加栏目2</a></li><li><a href="#">添加栏目3</a></li><li><a href="#">添加栏目4</a></li></ul></div></div></div></div><script>$(function() {$(".panel-heading").on("click", function(e) {var idLength = e.currentTarget.id.length;var index = e.currentTarget.id.substr(idLength - 1, idLength);$("#sub" + index).on('hidden.bs.collapse', function() {$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-bottom");$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-right");})$("#sub" + index).on('shown.bs.collapse', function() {$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-right");$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-bottom");})})$(".panel-body > .nav > li > a").on("click", function(e) {alert(e.currentTarget.textContent);});});</script></body></html>

3.源码下载：

http://download.csdn.net/download/jinxiumeihappy/10119903

bootstrap3 侧边导航栏相关推荐

【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
ldaptemplate 分页_UI设计干货分享：设计语言 - 侧边导航栏/分页
原文作者:罗耀_UI 侧边导航栏.分页.步骤条的绘制方法不管是做设计(感性)还是设计规范(理性),都是仁者见仁智者见智的,都很主观.我是想阐述出自己的想法供大家参考,文章中的数值也不是固定标准,还是 ...
你好，SegmentFault 新导航【开发手册】; 再见，侧边导航栏
SegmentFault 在夏季上线了 SegmentFault 5.0 版本,迭代了整个主站的样式,在 8 月的时候上线了面板九宫格(侧边导航栏),整合了部分的入口,方便用户查看笔记.徽章和排行榜等 ...
直播app开发搭建，纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...
html中关于侧边导航栏和导航栏的编写
侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,bac ...
【HTML+CSS】页内侧边导航栏页内导航
页内侧边导航栏页内导航源码 HTML部分 CSS部分效果源码 HTML部分 <!DOCTYPE html> <html><head><meta cha ...
HTML5+CSS3小实例：后台管理系统的侧边导航栏
HTML5+CSS3做一个后台管理系统的侧边导航栏,点击三条杠,可以收起或展开侧边导航栏.收起时,图标变大,文本在图标下方,管理员头像右侧的欢迎语隐藏:展开时图标变小,文本在图标的右侧显示,管理员头像 ...
js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
注:要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6 ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...

bootstrap3 侧边导航栏

bootstrap3 侧边导航栏相关推荐

最新文章

热门文章