首页
所有分类
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 相关文章推荐
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
vue axios整合使用全攻略
May 24 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
js实现橱窗展示效果
Jan 11 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
创建与框架无关的JavaScript插件
Dec 01 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) agg(1) 数据保存(1) mp3Play(1) 数据处理(2) apply(1) 数组(5) pandas(7) 矩阵(1) 音频(1)
You might like
如何用PHP实现插入排序？
2013/04/10 PHP
php字符串截取函数用法分析
2014/11/25 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
vue实现扫码功能
2020/01/17 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
小学班长竞选演讲稿
2014/04/24 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
人代会简报
2015/07/21 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL