首页
所有分类
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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
JS ES6异步解决方案
Apr 29 Javascript
基于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
安健(1) 德劲1102(1) GF515(1) 华普R-96(1) A254(1) YH-R296(1) SHARP(1) SRF-M100(1) 德劲1107(1) 上海永华(1)
You might like
坏狼的PHP学习教程之第1天
2008/06/15 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP常用的三种设计模式
2017/02/17 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
js中的面向对象入门
2017/03/06 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
微信小程序上传图片功能（附后端代码）
2020/06/19 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
python安装教程
2018/02/28 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
静态成员和非静态成员的区别
2012/05/12 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
单位单身证明样本
2014/10/11 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书