当前位置：主页 > javascript教程 >

Bootstrap可折叠侧边导航菜单实现代码

  • 更新时间：2020-04-24 08:42:41
  • 编辑：莘博明

效果图：

Bootstrap实现可折叠分组侧边导航菜单

Bootstrap实现可折叠分组侧边导航菜单

源码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>表格</title>
    <meta name="keywords" content="侧边导航菜单(可分组折叠)">
    <meta name="description" content="侧边导航菜单(可分组折叠)" />
    <meta name="HandheldFriendly" content="True" />
    <link rel="shortcut icon" href="img/favicon.ico" rel="external nofollow" >
    <!-- Bootstrap3.3.5 CSS -->
    <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .panel-group{max-height:770px;overflow: auto;}
      .leftMenu{margin:10px;margin-top:5px;}
      .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
      .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
      .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
      .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
    </style>
  </head>
  <body>
    <div class="row">
      <div class="col-md-2">
        <div class="panel-group table-responsive" role="tablist">
          <div class="panel panel-primary leftMenu">
            <!-- 利用data-target指定要折叠的分组列表 -->
            <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
              <h4 class="panel-title">
                分组1
                <span class="glyphicon glyphicon-chevron-up right"></span>
              </h4>
            </div>
            <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
            <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
              <ul class="list-group">
               <li class="list-group-item">
                <!-- 利用data-target指定URL -->
                <button class="menu-item-left" data-target="test2.html">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
                </button>
               </li>
              </ul>
            </div>
          </div><!--panel end-->
          <div class="panel panel-primary leftMenu">
            <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
              <h4 class="panel-title">
                分组2
                <span class="glyphicon glyphicon-chevron-down right"></span>
              </h4>
            </div>
            <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
              <ul class="list-group">
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
                </button>
               </li>
              </ul>
            </div>
          </div> 
        </div>
      </div>
      <div class="col-md-10">
        内容
      </div>
    </div>
    <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js "></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js "></script>
    <script>
    $(function(){
      $(".panel-heading").click(function(e){
        /*切换折叠指示图标*/
        $(this).find("span").toggleClass("glyphicon-chevron-down");
        $(this).find("span").toggleClass("glyphicon-chevron-up");
      });
    });
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的Bootstrap实现可折叠分组侧边导航菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！

相关教程

  • BootStrap Fileinput上传插件实例详解

    这篇文章主要介绍了BootStrap Fileinput上传插件使用实例代码,，通过引入js和css文件，具体实现代码大家参考下本文

    发布时间：2019-11-18

  • 详解bootstrap-Treeview实现级联勾选

    这篇文章主要为大家详细介绍了bootstrap-Treeview实现级联勾选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-03-12

  • 深入理解bootstrap data和jquery .data

    最近在做项目的时候用到了bootstrap，在使用中发现其data与jquery的data有些不一样的地方，记录一下，分享给大家

    发布时间：2020-02-16

  • 详解Bootstrap按钮组

    这篇文章主要为大家详细介绍了Bootstrap按钮组的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-01-27

  • 分享Bootstrap fileinput文件上传预览插件使用方法

    这篇文章主要为大家详细介绍了Bootstrap fileinput文件上传预览插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-02-14

  • 同构JavaScript应用开发

    同构JavaScript应用开发

    大小：10.4 MBJavaScript电子书

  • 你不知道的JavaScript（中卷）

    你不知道的JavaScript（中卷）

    JavaScript这门语言简单易用，很容易上手，但其语言机制复杂微妙，即使是经验丰富的JavaScript开发人员，如果没有认真学习的话也无法真正理解。

    大小：7.8 MBJS电子书

  • JavaScript函数式编程指南

    JavaScript函数式编程指南

    这书关键介绍怎样根据ECMAScript6将函数式编程关键技术于编码，以减少编码的多元性。这书共三一部分內容。*一部分函数式观念是为第二一部分的学习培训作铺垫的，这一部分引入了对函数式

    大小：12.79 MBjs函数电子书

  • JavaScript编程全解

    JavaScript编程全解

    JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题，无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

    大小：6.67 MBjs编程电子书

  • Three.js开发指南：WebGL的JavaScript 3D库

    Three.js开发指南：WebGL的JavaScript 3D库

    大小：180.1 MBThree.js电子书

  • 精通JavaScript

    精通JavaScript

    精通JavaScript(第2版) 是iQuery之父的经典之作，是深入学习JavaScript技术的绝佳教材，涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

    大小：33.5 MBJavaScript电子书

  • JavaScript基础教程

    JavaScript基础教程

    本书是经典的JavaScript入门书，以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式

    大小：14 MBJS教程电子书

  • 看透JavaScript：原理、方法与实践

    看透JavaScript：原理、方法与实践

    本书由资深软件开发专家撰写，凝聚其多年开发经验，系统、深入、全面地阐释JavaScript，内容涉及流行的Web开发实践，结合实际案例进行讲解，授人以渔。本书内容并不局限于某个具体功能的

    大小：251 MBJavaScript电子书

  • JavaScript DOM编程艺术

    JavaScript DOM编程艺术

    非常畅销书全新升级，首版销售量确保。 书中详细说明开发Web运用的基石W3C的DOM标准，由提倡Web标准的大神领军人物执笔用心编写，表明了前端工程师的人生真谛，是学习培训JavaScript和DOM开发

    大小：109.2 MBJavaScript电子书

  • JavaScript忍者秘籍

    JavaScript忍者秘籍

    JavaScript语言非常重要，相关的技术图书也很多，但没有任何一本书对JavaScript语言的重要部分（函数、闭包和原型）进行深入、全面的介绍，也没有任何一本书讲述跨浏览器代码的编写。本书是

    大小：83.5 MBJavaScript电子书

用户留言

发布评论

最新更新

热门推荐