首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

一个炫酷的Bootstrap导航菜单

Posted in Javascript onDecember 28, 2016

本文实例为大家分享了Bootstrap导航菜单的具体代码，供大家参考，具体内容如下

效果图：

一个炫酷的Bootstrap导航菜单

点击菜单的箭头有点小问题，后面改，不是很影响。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/beyond.css" />
<title>beyond网站模板练习</title>
</head>
<body>
<!-- 导航 -->
<div class="page-sidebar">
 <ul class="nav panel-group sidebar-menu" id="nav_parent">
 <li class="panel">
  <a href="#">
  <i class="menu-icon glyphicon glyphicon-home"></i>
  <span class="menu-text"> Dashboard </span>
  </a>
 </li>
 <li class="panel">
  <a class="panel-heading collapsed" href="#collapse1" data-toggle="collapse" data-parent="#nav_parent">
  <i class="menu-icon glyphicon glyphicon-fire"></i>
  <span class="menu-text">Elements</span>
  <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
  </a>
  <ul class="nav submenu collapse" id="collapse1">
  <li>
   <a href="#"><span class="menu-text">Basic Elements</span></a>
  </li>
  <li>
   <a class="panel-heading collapsed" href="#collapse2" data-toggle="collapse">
   <span class="menu-text">Icons</span>
   <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
   </a>
   <ul class="nav submenu collapse" id="collapse2">
   <li>
    <a href="#">
    <i class="menu-icon glyphicon glyphicon-stats"></i>
    <span class="menu-text">Font Awesome</span>
    </a>
   </li>
   <li>
    <a href="#">
    <i class="menu-icon glyphicon glyphicon-stats"></i>
    <span class="menu-text">Glyph Icons</span>
    </a>
   </li>
   </ul>
  </li>
  <li>
   <a href="#">
   <span class="menu-text">Tabs & Accordions</span>
   </a>
  </li>
  <li>
   <a href="#">
   <span class="menu-text">Alerts & Tooltips</span>
   </a>
  </li>
  <li>
   <a href="#">
   <span class="menu-text">Modals & Wells</span>
   </a>
  </li>
  </ul>
 </li>
 <li class="panel">
  <a class="panel-heading collapsed" href="#collapse5" data-toggle="collapse" data-parent="#nav_parent">
  <i class="menu-icon glyphicon glyphicon-link"></i>
  <span class="menu-text">More Pages</span>
  <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
  </a>
  <ul class="nav submenu collapse" id="collapse5">
  <li>
   <a href="#"><span class="menu-text">Error 404</span></a>
  </li>
  <li>
   <a href="#"><span class="menu-text"> Grid</span></a>
  </li>
  <li>
   <a class="panel-heading collapsed" href="#collapse6" data-toggle="collapse">
   <span class="menu-text">Multi Level Menu</span>
   <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
   </a>
   <ul class="nav submenu collapse" id="collapse6">
   <li>
    <a href="#">
    <i class="menu-icon glyphicon glyphicon-stats"></i>
    <span class="menu-text">Level 3</span>
    </a>
   </li>
   <li>
    <a class="panel-heading collapsed" href="#collapse7" data-toggle="collapse">
    <i class="menu-icon glyphicon glyphicon-stats"></i>
    <span class="menu-text">Level 4</span>
    <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
    </a>
    <ul class="nav submenu collapse" id="collapse7">
    <li>
     <a href="#">
     <i class="menu-icon glyphicon glyphicon-stats"></i>
     <span class="menu-text">Some Item</span>
     </a>
    </li>
    <li>
     <a href="#">
     <i class="menu-icon glyphicon glyphicon-stats"></i>
     <span class="menu-text">Another Item</span>
     </a>
    </li>
    </ul>
   </li>
   </ul>
  </li>
  </ul>
 </li>
 </ul>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
 //点击菜单箭头变化
 $(".page-sidebar .sidebar-menu a").each(function(){
 $(this).click(function(){
  var Oele = $(this).children('.menu-expand');
  if($(Oele)){
  if($(Oele).hasClass('glyphicon-chevron-right')){
   $(Oele).removeClass('glyphicon-chevron-right').addClass('glyphicon-chevron-down');
  }else{
   $(Oele).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right');
  }
  }

  //选中增加active
  if(! $(this).hasClass('panel-heading')){
  $(".page-sidebar .sidebar-menu a").removeClass('active');
  $(this).addClass('active');
  }
 });
 });
})
</script>
</body>
</html>

CSS代码：

.page-sidebar{
 position: absolute;
 top: 0;
 bottom: 0;
 width: 224px;
 display: block;
}
.page-sidebar .sidebar-menu {
 margin: 0;
 padding: 0;
 margin-left: 5px;
}
.page-sidebar:before{
 content: "";
 position: fixed;
 display: block;
 width: 219px;
 bottom: 0;
 top: 0;
 left: 5px;
 background-color: #fff;
 -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
 -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
 box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
 z-index: 1;
}
.page-sidebar .sidebar-menu a{
 color: #737373;
 z-index: 123;
 padding: 0 16px 0 7px;
 margin: 0;
 height: 38px;
 line-height: 36px;
 -webkit-text-shadow: none!important;
 text-shadow: none!important;
 font-size: 13px;
}
.page-sidebar .submenu{
 margin: 0;
 padding: 0;
 position: relative;
 float: none;
 background-color: #fbfbfb;
 border: 0;
 box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15);
 border-radius: 0;
 z-index: 123;
}
.page-sidebar .sidebar-menu>li>a {
 border-top: 1px solid #f3f3f3;
}

/* 菜单前面的小图标*/
.page-sidebar .sidebar-menu a .menu-icon {
 display: inline-block;
 vertical-align: middle;
 min-width: 30px;
 text-align: center;
 font-size: 14px;
 font-weight: normal;
 font-style: normal;
 margin-top: -3px;
}

/* 向右的箭头*/
.page-sidebar .sidebar-menu a .menu-expand{
 display: inline-block;
 position: absolute;
 font-size: 10px;
 line-height: 10px;
 height: 10px;
 width: 10px;
 right: 12px;
 top: 15px;
 margin: 0;
 text-align: center;
 padding: 0;
 -webkit-text-shadow: none;
 text-shadow: none;
 color: #666;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
 font-style: normal;
 font-weight: normal;
}
.panel-group .panel{
 margin: 0;
 margin-top:0 !important;
 border: none;
}

/* 第一层级缩进 */
.page-sidebar .sidebar-menu .submenu>li>a {
 padding-left: 40px;
}
/* 第二层级缩进 */
.page-sidebar .sidebar-menu .submenu>li .submenu>li>a {
 padding-left: 50px;
}
.page-sidebar .sidebar-menu a:hover {
 color: #262626;
}
/* 选中增加蓝色border */
.page-sidebar .sidebar-menu .active:before {
 display: block;
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: -4px;
 width: 4px;
 max-width: 4px;
 overflow: hidden;
 background-color: #2dc3e8;
}
.page-sidebar .sidebar-menu li a:not(.panel-heading):hover:before {
 display: block;
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: -4px;
 width: 4px;
 max-width: 4px;
 overflow: hidden;
 background-color: #fb6e52;
}

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

一个炫酷的Bootstrap导航菜单

- Author -

有点懒惰的小青年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
详解React的回调渲染模式
Sep 10 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
基于bootstrap风格的弹框插件
Dec 28 #Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 #Javascript
Bootstrap源码解读模态弹出框（11）
Dec 28 #Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 #Javascript
JS简单实现移动端日历功能示例
Dec 28 #Javascript
如何学JavaScript？前辈的经验之谈
Dec 28 #Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 #Javascript
OpenLayer(1) 嵌套(1) 循环(3) 移动开发(2) IDEA(2) 多维数组(1) 分块(1) 二维数组(2) 安卓(1) android studio(3)
You might like
基于empty函数的判断详解
2013/06/17 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
vue组件（全局，局部，动态加载组件）
2018/09/02 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
Python 可爱的大小写
2008/09/06 Python
python显示天气预报
2014/03/02 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
Myholidays美国：在线旅游网站
2019/08/16 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
会计专业自荐信范文
2013/12/02 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
伊索寓言教学反思
2014/05/01 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
Promise面试题详解之控制并发
2021/05/14 面试题
Redis读写分离搭建的完整步骤
2021/09/14 Redis
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL