编程 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实现连续动画效果实例分析

Oct 09 Javascript

JS实现alert中显示换行的方法

Dec 17 Javascript

javascript设置页面背景色及背景图片的方法

Dec 29 Javascript

关于Node.js的events.EventEmitter用法介绍

Apr 01 Javascript

d3.js入门教程之数据绑定详解

Apr 28 Javascript

微信小程序引用公共js里的方法的实例详解

Aug 17 Javascript

微信小程序实现两个页面传值的方法分析

Dec 11 Javascript

微信小程序如何修改本地缓存key中单个数据的详解

Apr 26 Javascript

jquery+php后台实现省市区联动功能示例

May 23 jQuery

使用apifm-wxapi快速开发小程序过程详解

Aug 05 Javascript

keep-alive不能缓存多层级路由菜单问题解决

Mar 10 Javascript

微信小程序实现登录注册功能

Dec 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

You might like

php在多维数组中根据键名快速查询其父键以及父键值的代码

2011/05/07 PHP

php一次性删除前台checkbox多选内容的方法

2013/09/22 PHP

显示youtube视频缩略图和Vimeo视频缩略图代码分享

2014/02/13 PHP

php删除左端与右端空格的方法

2014/11/29 PHP

PHP时间和日期函数详解

2015/05/08 PHP

javascript面向对象编程代码

2011/12/19 Javascript

解析js原生方法创建表格效率测试

2013/07/08 Javascript

js 动态修改css文件用到了cssRule

2014/08/20 Javascript

JS实现网页标题随机显示名人名言的方法

2015/11/03 Javascript

纯JavaScript代码实现文本比较工具

2016/02/17 Javascript

ES6 javascript中class静态方法、属性与实例属性用法示例

2017/10/30 Javascript

nodejs+express搭建多人聊天室步骤

2018/02/12 NodeJs

JS+H5 Canvas实现时钟效果

2018/07/20 Javascript

解决webpack dev-server不能匹配post请求的问题

2018/08/24 Javascript

微信小程序解除10个请求并发限制

2018/12/18 Javascript

[19:54]夜魇凡尔赛茶话会第一期02：看图识人

2021/03/11 DOTA

python获取一组数据里最大值max函数用法实例

2015/05/26 Python

python学习基础之循环import及import过程

2018/04/22 Python

linux下python使用sendmail发送邮件

2018/05/22 Python

在Python中输入一个以空格为间隔的数组方法

2018/11/13 Python

Python补齐字符串长度的实例

2018/11/15 Python

pycharm运行程序时在Python console窗口中运行的方法

2018/12/03 Python

python合并已经存在的sheet数据到新sheet的方法

2018/12/11 Python

numpy库与pandas库axis=0，axis= 1轴的用法详解

2019/05/27 Python

django项目环境搭建及在虚拟机本地创建django项目的教程

2019/08/02 Python

创建Shapefile文件并写入数据的例子

2019/11/26 Python

Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法

2019/12/17 Python

pandas之分组groupby()的使用整理与总结

2020/06/18 Python

采购内勤岗位职责

2013/12/10 职场文书

物理系毕业生自荐书范文

2014/02/22 职场文书

教师党员一句话承诺

2014/03/28 职场文书

新闻发布会主持词

2014/03/28 职场文书

批评与自我批评发言稿

2014/10/15 职场文书

世界气象日活动总结

2015/02/27 职场文书

工程竣工验收申请报告

2015/05/15 职场文书

一文教你快速生成MySQL数据库关系图

2022/06/28 Redis