html自定义垂直导航菜单（目前只支持上级+下级两级菜单）

由于工作的需要，昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单，可以通过js配置的方式初始化菜单box（测试环境：chrome 49、IE 10、IE edge）。

no pic u say a j8? 好吧，先上效果图（由于下面是gif，所以一帧一帧的感觉不流畅。讲道理，事实上，切换非常流畅，自行下载看Demo）。

js配置方式：

配置menuBox的方式：menuBox.init(config);

这里的config有三个属性：

menuBoxId（必需，你要配置的菜单根节点所在元素的Id）

multiple（可选，是否可以同时打开多个上级菜单，默认是false，也就是最多显示一个上级菜单的子菜单）

openIndex（可选，初始化要打开上级菜单的index数组，如果你要传值，按照格式应该是数字数组）

  1. //配置第一个手风琴的基本参数
  2. var config01 = {
  3.     //配置菜单的MenuBoxId
  4.     menuBoxId: "#menuBox01",
  5.     //是否可以打开多个上级菜单的子菜单
  6.     multiple: false,
  7.     //初始化打开的
  8.     openIndex: [3, 4, 5]
  9. }
  10. menuBox.init(config01);

然后看下两个菜单Box的配置：

　第一个菜单Box：可以同时打开多个上级菜单，初始化的时候打开第0、1个。

  1.  　　　　　　//配置第一个手风琴的基本参数
  2.             var config01 = {
  3.                 //配置菜单的MenuBoxId
  4.                 menuBoxId: "#menuBox01",
  5.                 //是否可以打开多个二级菜单
  6.                 multiple: true,
  7.                 //初始化打开的
  8.                 openIndex: [0,1]
  9.             }
  10.             menuBox.init(config01);
  11.  
  12. 第二个菜单Box：不可以打开多个上级菜单，初始化的时候打开第1个，如果传入数组有多个值，默认打开第一个有效的index上级菜单。
  13.             //配置第二个手风琴的基本参数
  14.             var config02 = {
  15.                 //配置菜单的MenuBoxId
  16.                 menuBoxId: "#menuBox02",
  17.                 //是否可以打开多个二级菜单
  18.                 multiple: false,
  19.                 //初始化打开的
  20.                 openIndex: [-1, 1]
  21.             }
  22.             menuBox.init(config02);

用到的知识点：

1、flexbox（在ie9及以下布局不兼容，但是还是可以正常看到切换效果）。

2、css3 transform配合transition实现箭头的旋转切换。

3、打开菜单：$().slideDown()、关闭菜单：$().slideUp()、切换菜单：$().slideToggle()。有时间我会修改为css3动画实现切换，尽量不用jquery。

4、<i>标签引用图标font-awesome

下面是相关代码：

html：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
  7.         <link rel="stylesheet" href="css/menuBox.css" />
  8.         <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
  9.         <script type="text/javascript" src="js/menuBox.js"></script>
  10.         <title>MenuBox</title>
  11.     </head>
  12.     <style>
  13.         .top {
  14.             background: lightblue;
  15.             min-height: 55px;
  16.         }
  17.     </style>
  18.  
  19.     <body>
  20.         <div id="top" class="top">
  21.             <span>
  22.             var config01 = {<br>
  23.                 &nbsp;&nbsp;menuBoxId: "#menuBox01",<br>
  24.                 &nbsp;&nbsp;multiple: true,<br>
  25.                 &nbsp;&nbsp;openIndex: [0,1]<br>
  26.             }<br>
  27.             menuBox.init(config01);<br><br>
  28.  
  29.             var config02 = {<br>
  30.                 &nbsp;&nbsp;menuBoxId: "#menuBox02",<br>
  31.                 &nbsp;&nbsp;multiple: false,<br>
  32.                 &nbsp;&nbsp;openIndex: [-1, 1]<br>
  33.             }<br>
  34.             menuBox.init(config02);<br>
  35.             </span>
  36.         </div>
  37.         <div id="leftNav" class="left-nav">
  38.             <!--
  39.             作者：15934179313@163.com
  40.             时间：2016-08-03
  41.             描述：第一个手风琴二级菜单
  42.         -->
  43.             <div id="menuBox01" class="menuBox">
  44.                 <ul class="spMenuBox">
  45.                     <li class="spMenuItem">
  46.                         <div class="spMenu">
  47.                             <i class="fa fa-chrome"></i>
  48.                             <span>菜单1</span>
  49.                             <i class="fa fa-2x fa-angle-down"></i>
  50.                         </div>
  51.                         <ul class="subMenuBox">
  52.                             <li><span class="subMenu">菜单1.1</span></li>
  53.                             <li><span class="subMenu">菜单1.2</span></li>
  54.                             <li><span class="subMenu">菜单1.3</span></li>
  55.                         </ul>
  56.                     </li>
  57.                     <li class="spMenuItem">
  58.                         <div class="spMenu">
  59.                             <i class="fa fa-chrome"></i>
  60.                             <span>菜单1</span>
  61.                             <i class="fa fa-2x fa-angle-down"></i>
  62.                         </div>
  63.                         <ul class="subMenuBox">
  64.                             <li><span class="subMenu">菜单1.1</span></li>
  65.                             <li><span class="subMenu">菜单1.2</span></li>
  66.                             <li><span class="subMenu">菜单1.3</span></li>
  67.                             <li><span class="subMenu">菜单1.1</span></li>
  68.                             <li><span class="subMenu">菜单1.2</span></li>
  69.                             <li><span class="subMenu">菜单1.3</span></li>
  70.                         </ul>
  71.                     </li>
  72.                     <li class="spMenuItem">
  73.                         <div class="spMenu">
  74.                             <i class="fa fa-chrome"></i>
  75.                             <span>菜单1</span>
  76.                             <i class="fa fa-2x fa-angle-down"></i>
  77.                         </div>
  78.                         <ul class="subMenuBox">
  79.                             <li><span class="subMenu">菜单1.1</span></li>
  80.                             <li><span class="subMenu">菜单1.2</span></li>
  81.                             <li><span class="subMenu">菜单1.3</span></li>
  82.                             <li><span class="subMenu">菜单1.1</span></li>
  83.                             <li><span class="subMenu">菜单1.2</span></li>
  84.                             <li><span class="subMenu">菜单1.3</span></li>
  85.                             <li><span class="subMenu">菜单1.1</span></li>
  86.                             <li><span class="subMenu">菜单1.2</span></li>
  87.                             <li><span class="subMenu">菜单1.3</span></li>
  88.                         </ul>
  89.                     </li>
  90.                     <li class="spMenuItem">
  91.                         <div class="spMenu">
  92.                             <i class="fa fa-chrome"></i>
  93.                             <span>菜单1</span>
  94.                             <i class="fa fa-2x fa-angle-down"></i>
  95.                         </div>
  96.                         <ul class="subMenuBox">
  97.                             <li><span class="subMenu">菜单1.1</span></li>
  98.                             <li><span class="subMenu">菜单1.2</span></li>
  99.                             <li><span class="subMenu">菜单1.3</span></li>
  100.                         </ul>
  101.                     </li>
  102.                     <li class="spMenuItem">
  103.                         <div class="spMenu">
  104.                             <i class="fa fa-chrome"></i>
  105.                             <span>菜单1</span>
  106.                             <i class="fa fa-2x fa-angle-down"></i>
  107.                         </div>
  108.                         <ul class="subMenuBox">
  109.                             <li><span class="subMenu">菜单1.1</span></li>
  110.                             <li><span class="subMenu">菜单1.2</span></li>
  111.                             <li><span class="subMenu">菜单1.3</span></li>
  112.                             <li><span class="subMenu">菜单1.1</span></li>
  113.                             <li><span class="subMenu">菜单1.2</span></li>
  114.                             <li><span class="subMenu">菜单1.3</span></li>
  115.                         </ul>
  116.                     </li>
  117.                     <li class="spMenuItem">
  118.                         <div class="spMenu">
  119.                             <i class="fa fa-chrome"></i>
  120.                             <span>菜单1</span>
  121.                             <i class="fa fa-2x fa-angle-down"></i>
  122.                         </div>
  123.                         <ul class="subMenuBox">
  124.                             <li><span class="subMenu">菜单1.1</span></li>
  125.                             <li><span class="subMenu">菜单1.2</span></li>
  126.                             <li><span class="subMenu">菜单1.3</span></li>
  127.                             <li><span class="subMenu">菜单1.1</span></li>
  128.                             <li><span class="subMenu">菜单1.2</span></li>
  129.                             <li><span class="subMenu">菜单1.3</span></li>
  130.                             <li><span class="subMenu">菜单1.1</span></li>
  131.                             <li><span class="subMenu">菜单1.2</span></li>
  132.                             <li><span class="subMenu">菜单1.3</span></li>
  133.                         </ul>
  134.                     </li>
  135.                     <li class="spMenuItem">
  136.                         <div class="spMenu">
  137.                             <i class="fa fa-chrome"></i>
  138.                             <span>菜单1</span>
  139.                             <i class="fa fa-2x fa-angle-down"></i>
  140.                         </div>
  141.                         <ul class="subMenuBox">
  142.                             <li><span class="subMenu">菜单1.1</span></li>
  143.                             <li><span class="subMenu">菜单1.2</span></li>
  144.                             <li><span class="subMenu">菜单1.3</span></li>
  145.                         </ul>
  146.                     </li>
  147.                     <li class="spMenuItem">
  148.                         <div class="spMenu">
  149.                             <i class="fa fa-chrome"></i>
  150.                             <span>菜单1</span>
  151.                             <i class="fa fa-2x fa-angle-down"></i>
  152.                         </div>
  153.                         <ul class="subMenuBox">
  154.                             <li><span class="subMenu">菜单1.1</span></li>
  155.                             <li><span class="subMenu">菜单1.2</span></li>
  156.                             <li><span class="subMenu">菜单1.3</span></li>
  157.                             <li><span class="subMenu">菜单1.1</span></li>
  158.                             <li><span class="subMenu">菜单1.2</span></li>
  159.                             <li><span class="subMenu">菜单1.3</span></li>
  160.                         </ul>
  161.                     </li>
  162.                     <li class="spMenuItem">
  163.                         <div class="spMenu">
  164.                             <i class="fa fa-chrome"></i>
  165.                             <span>菜单1</span>
  166.                             <i class="fa fa-2x fa-angle-down"></i>
  167.                         </div>
  168.                         <ul class="subMenuBox">
  169.                             <li><span class="subMenu">菜单1.1</span></li>
  170.                             <li><span class="subMenu">菜单1.2</span></li>
  171.                             <li><span class="subMenu">菜单1.3</span></li>
  172.                             <li><span class="subMenu">菜单1.1</span></li>
  173.                             <li><span class="subMenu">菜单1.2</span></li>
  174.                             <li><span class="subMenu">菜单1.3</span></li>
  175.                             <li><span class="subMenu">菜单1.1</span></li>
  176.                             <li><span class="subMenu">菜单1.2</span></li>
  177.                             <li><span class="subMenu">菜单1.3</span></li>
  178.                         </ul>
  179.                     </li>
  180.                     <li class="spMenuItem">
  181.                         <div class="spMenu">
  182.                             <i class="fa fa-chrome"></i>
  183.                             <span>菜单1</span>
  184.                             <i class="fa fa-2x fa-angle-down"></i>
  185.                         </div>
  186.                         <ul class="subMenuBox">
  187.                             <li><span class="subMenu">菜单1.1</span></li>
  188.                             <li><span class="subMenu">菜单1.2</span></li>
  189.                             <li><span class="subMenu">菜单1.3</span></li>
  190.                         </ul>
  191.                     </li>
  192.                     <li class="spMenuItem">
  193.                         <div class="spMenu">
  194.                             <i class="fa fa-chrome"></i>
  195.                             <span>菜单1</span>
  196.                             <i class="fa fa-2x fa-angle-down"></i>
  197.                         </div>
  198.                         <ul class="subMenuBox">
  199.                             <li><span class="subMenu">菜单1.1</span></li>
  200.                             <li><span class="subMenu">菜单1.2</span></li>
  201.                             <li><span class="subMenu">菜单1.3</span></li>
  202.                             <li><span class="subMenu">菜单1.1</span></li>
  203.                             <li><span class="subMenu">菜单1.2</span></li>
  204.                             <li><span class="subMenu">菜单1.3</span></li>
  205.                         </ul>
  206.                     </li>
  207.                     <li class="spMenuItem">
  208.                         <div class="spMenu">
  209.                             <i class="fa fa-chrome"></i>
  210.                             <span>菜单1</span>
  211.                             <i class="fa fa-2x fa-angle-down"></i>
  212.                         </div>
  213.                         <ul class="subMenuBox">
  214.                             <li><span class="subMenu">菜单1.1</span></li>
  215.                             <li><span class="subMenu">菜单1.2</span></li>
  216.                             <li><span class="subMenu">菜单1.3</span></li>
  217.                             <li><span class="subMenu">菜单1.1</span></li>
  218.                             <li><span class="subMenu">菜单1.2</span></li>
  219.                             <li><span class="subMenu">菜单1.3</span></li>
  220.                             <li><span class="subMenu">菜单1.1</span></li>
  221.                             <li><span class="subMenu">菜单1.2</span></li>
  222.                             <li><span class="subMenu">菜单1.3</span></li>
  223.                         </ul>
  224.                     </li>
  225.                 </ul>
  226.             </div>
  227.             <!--
  228.                 作者：15934179313@163.com
  229.                 时间：2016-08-03
  230.                 描述：第二个手风琴菜单
  231.             -->
  232.             <div id="menuBox02" class="menuBox">
  233.                 <div class="spMenuBox">
  234.                     <div class="spMenuItem">
  235.                         <div class="spMenu">
  236.                             <i class="fa fa-chrome"></i>
  237.                             <span>菜单1</span>
  238.                             <i class="fa fa-2x fa-angle-down"></i>
  239.                         </div>
  240.                         <div class="subMenuBox">
  241.                             <div><span class="subMenu">菜单1.1</span></div>
  242.                             <div><span class="subMenu">菜单1.2</span></div>
  243.                             <div><span class="subMenu">菜单1.3</span></div>
  244.                         </div>
  245.                     </div>
  246.                     <div class="spMenuItem">
  247.                         <div class="spMenu">
  248.                             <i class="fa fa-chrome"></i>
  249.                             <span>菜单1</span>
  250.                             <i class="fa fa-2x fa-angle-down"></i>
  251.                         </div>
  252.                         <div class="subMenuBox">
  253.                             <div><span class="subMenu">菜单1.1</span></div>
  254.                             <div><span class="subMenu">菜单1.2</span></div>
  255.                             <div><span class="subMenu">菜单1.3</span></div>
  256.                         </div>
  257.                     </div>
  258.                     <div class="spMenuItem">
  259.                         <div class="spMenu">
  260.                             <i class="fa fa-chrome"></i>
  261.                             <span>菜单1</span>
  262.                             <i class="fa fa-2x fa-angle-down"></i>
  263.                         </div>
  264.                         <div class="subMenuBox">
  265.                             <div><span class="subMenu">菜单1.1</span></div>
  266.                             <div><span class="subMenu">菜单1.2</span></div>
  267.                             <div><span class="subMenu">菜单1.3</span></div>
  268.                         </div>
  269.                     </div>
  270.                 </div>
  271.             </div>
  272.         </div>
  273.     </body>
  274.     <script>
  275.         $().ready(function() {
  276.             initLeftNavHeight();
  277.             initMenu();
  278.         })
  279.  
  280.         /**初始化左侧导航栏高度**/
  281.         function initLeftNavHeight() {
  282.             initHeight();
  283.  
  284.             function initHeight() {
  285.                 var total = document.documentElement.clientHeight;
  286.                 var topHeight = $("#top").height();
  287.                 $("#leftNav").height(total - topHeight);
  288.             }
  289.  
  290.             document.body.onresize = function() {
  291.                 initHeight();
  292.             }
  293.         }
  294.  
  295.         /**初始化菜单选项**/
  296.         function initMenu() {
  297.             //配置第一个手风琴的基本参数
  298.             var config01 = {
  299.                 //配置菜单的MenuBoxId
  300.                 menuBoxId: "#menuBox01",
  301.                 //是否可以打开多个上级菜单
  302.                 multiple: true,
  303.                 //初始化打开的
  304.                 openIndex: [0,2]
  305.             }
  306.             menuBox.init(config01);
  307.  
  308.             //配置第二个手风琴的基本参数
  309.             var config02 = {
  310.                 //配置菜单的MenuBoxId
  311.                 menuBoxId: "#menuBox02",
  312.                 //是否可以打开多个上级菜单
  313.                 multiple: false,
  314.                 //初始化打开的上级菜单的index数组
  315.                 openIndex: [-1, 1]
  316.             }
  317.             menuBox.init(config02);
  318.         }
  319.     </script>
  320.  
  321. </html>

menuBox.css:

  1. body {
  2.     margin: 0;
  3. }
  4.  
  5. ul {
  6.     list-style: none;
  7.     padding: 0;
  8.     margin: 0;
  9. }
  10.  
  11. .left-nav {
  12.     background: lightgray;
  13.     height: 100%;
  14.     overflow-y: overlay;
  15.     position: absolute;
  16.  
  17.     /**flexbox兼容**/
  18.     display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  19.     display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  20.     display: -ms-flexbox;           /* TWEENER - IE 10 */
  21.     display: -webkit-flex;          /* NEW - Chrome */
  22.     display: flex;
  23.     /**flexbox兼容**/
  24.     -webkit-box-orient: horizontal;
  25.     -webkit-flex-direction: row;
  26.     -moz-flex-direction: row;
  27.     -ms-flex-direction: row;
  28.     -o-flex-direction: row;
  29.     flex-direction: row;
  30. }
  31.  
  32. /**菜单box**/
  33. .menuBox {
  34.     width: 300px;
  35.     margin: 5px;
  36. }
  37.  
  38. /**默认不显示二级菜单**/
  39. .menuBox .subMenuBox {
  40.     display: none;
  41. }
  42.  
  43. /**一级菜单样式**/
  44. .spMenuBox>*>.spMenu {
  45.     align-items: center;
  46.     background: darkslateblue;
  47.     border-bottom: 1px solid lightgray;
  48.     cursor: pointer;
  49.     color: white;
  50.  
  51.     /**flexbox兼容**/
  52.     display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  53.     display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  54.     display: -ms-flexbox;           /* TWEENER - IE 10 */
  55.     display: -webkit-flex;          /* NEW - Chrome */
  56.     display: flex;
  57.     /**flexbox兼容**/
  58.     -webkit-box-orient: horizontal;
  59.     -webkit-flex-direction: row;
  60.     -moz-flex-direction: row;
  61.     -ms-flex-direction: row;
  62.     -o-flex-direction: row;
  63.     flex-direction: row;
  64.     /**flexbox兼容**/
  65.     -webkit-justify-content: space-around;
  66.     -webkit-box-pack: space-around;
  67.     -moz-box-pack: space-around;
  68.     -ms-flex-pack: space-around;
  69.     justify-content: space-around;
  70.     /**user-select兼容**/
  71.     -webkit-user-select: none;
  72.     -moz-user-select: none;
  73.     -ms-user-select: none;
  74.     -o-user-select: none;
  75.     user-select: none;
  76. }
  77.  
  78. /**最后一个一级菜单样式**/
  79. .spMenuBox>*:last-child>.spMenu {
  80.     align-items: center;
  81.     background: darkslateblue;
  82.     border-bottom: 0px;
  83.     color: white;
  84.     cursor: pointer;
  85.  
  86.     /**flexbox兼容**/
  87.     display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  88.     display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  89.     display: -ms-flexbox;           /* TWEENER - IE 10 */
  90.     display: -webkit-flex;          /* NEW - Chrome */
  91.     display: flex;     
  92.  
  93.     /**flexbox兼容**/
  94.     -webkit-box-orient: horizontal;
  95.     -webkit-flex-direction: row;
  96.     -moz-flex-direction: row;
  97.     -ms-flex-direction: row;
  98.     -o-flex-direction: row;
  99.     flex-direction: row;
  100.     /**flexbox兼容**/
  101.     webkit-justify-content: space-around;
  102.     -webkit-box-pack: space-around;
  103.     -moz-box-pack: space-around;
  104.     -ms-flex-pack: space-around;
  105.     justify-content: space-around;
  106.     /**user-select兼容**/
  107.     -webkit-user-select: none;
  108.     -moz-user-select: none;
  109.     -ms-user-select: none;
  110.     -o-user-select: none;
  111.     user-select: none;
  112. }
  113.  
  114. /**箭头切换用动画实现**/
  115. .fa-angle-down {
  116.     -webkit-transition: all 0.5s ease;
  117.     -moz-transition: all 0.5s ease;
  118.     -ms-transition: all 0.5s ease;
  119.     -o-transition: all 0.5s ease;
  120.     transition: all 0.5s ease;
  121. }
  122.  
  123. .spMenuItem.active>.spMenu>.fa-angle-down {
  124.     -webkit-transform: rotate(-180deg);
  125.     -moz-transform: rotate(-180deg);
  126.     -ms-transform: rotate(-180deg);
  127.     -o-transform: rotate(-180deg);
  128.     transform: rotate(-180deg);
  129. }
  130.  
  131. /**二级菜单样式*/
  132. .subMenuBox>*>.subMenu {
  133.     align-items: center;
  134.     background: #ccc;
  135.     border-bottom: 1px solid lightyellow;
  136.     cursor: pointer;
  137.     padding: 5px 10px;
  138.  
  139.     /**flexbox兼容**/
  140.     display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  141.     display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  142.     display: -ms-flexbox;           /* TWEENER - IE 10 */
  143.     display: -webkit-flex;          /* NEW - Chrome */
  144.     display: flex;
  145.     /**flexbox兼容**/
  146.     -webkit-box-orient: horizontal;
  147.     -webkit-flex-direction: row;
  148.     -moz-flex-direction: row;
  149.     -ms-flex-direction: row;
  150.     -o-flex-direction: row;
  151.     flex-direction: row;
  152.     /**user-select兼容**/
  153.     -webkit-user-select: none;
  154.     -moz-user-select: none;
  155.     -ms-user-select: none;
  156.     -o-user-select: none;
  157.     user-select: none;
  158.  
  159. }
  160.  
  161. /**最后一个二级菜单样式**/
  162. .subMenuBox>*:last-child>.subMenu {
  163.     align-items: center;
  164.     background: #ccc;
  165.     border-bottom: 0px;
  166.     cursor: pointer;
  167.     padding: 5px 10px;
  168.  
  169.     /**flexbox兼容**/
  170.     display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  171.     display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  172.     display: -ms-flexbox;           /* TWEENER - IE 10 */
  173.     display: -webkit-flex;          /* NEW - Chrome */
  174.     display: flex;
  175.     /**flexbox兼容**/
  176.     -webkit-box-orient: horizontal;
  177.     -webkit-flex-direction: row;
  178.     -moz-flex-direction: row;
  179.     -ms-flex-direction: row;
  180.     -o-flex-direction: row;
  181.     flex-direction: row;
  182.     /**user-select兼容**/
  183.     -webkit-user-select: none;
  184.     -moz-user-select: none;
  185.     -ms-user-select: none;
  186.     -o-user-select: none;
  187.     user-select: none;
  188. }

 menuBox.js:

  1. /**
  2.  * 配置菜单
  3.  *     示例：
  4.  *    配置基本参数
  5.  *    var config = {
  6.  *        //配置菜单的MenuBoxId
  7.  *        menuBoxId: "#menuBox01",
  8.  *        //是否可以打开多个上级菜单
  9.  *        multiple: true,
  10.  *        //初始化打开的菜单数组
  11.  *        openIndex: [1, 3, 5]
  12.  *    }
  13.  *    menuBox.init(config);
  14.  *
  15.  * @author DarkRanger
  16.  * http: //www.cnblogs.com/wrcold520/
  17.  */
  18.  
  19. ! function($) {
  20.     if($ == undefined) {
  21.         throw new Error("please put your jquery.js top of menuBox.js!")
  22.     }
  23.     var menuBox = function() {};
  24.     //要配置的menuBox的菜单id
  25.     menuBox.menuBoxId = undefined;
  26.     //是否可以显示多个上级菜单的子菜单
  27.     menuBox.multiple = false;
  28.     //默认关闭所有一级菜单
  29.     menuBox.openIndex = [];
  30.  
  31.     //menuBox初始化方法
  32.     menuBox.init = function(config) {
  33.  
  34.         var cntMenuBox = new menuBox();
  35.  
  36.         //定义上级菜单spMenu数组
  37.         var spMenus;
  38.  
  39.         if(config.menuBoxId == undefined) {
  40.             throw new Error("your config has not 'menuBoxId', please make sure your menuBox is existed!");
  41.         } else {
  42.             cntMenuBox.menuBoxId = $(config.menuBoxId) ? config.menuBoxId : undefined;
  43.         }
  44.  
  45.         if(config.multiple == undefined) {
  46.             console.warn("your config has not 'multiple', default value is false which means you can open only one spMenu at the same time!");
  47.         } else {
  48.             cntMenuBox.multiple = config.multiple;
  49.         }
  50.  
  51.         if(config.openIndex == undefined) {
  52.             console.warn("your config has not 'openIndex', default value is a Array which's length is 0!");
  53.         } else if(!config.openIndex instanceof Array) {
  54.             throw new Error("your config 'openIndex' should be a number Array");
  55.         } else {
  56.             cntMenuBox.openIndex = unique(config.openIndex, false);
  57.         }
  58.  
  59.         //确定对应的menuBox
  60.         cntMenuBox.menuBoxId = config.menuBoxId;
  61.         //是否打开其他某一个的时候关闭其他选项
  62.         var closeOthers = !cntMenuBox.multiple;
  63.         //初始化点击事件
  64.         initClickEvent(cntMenuBox, closeOthers);
  65.         //确定上级菜单数组
  66.         spMenus = $(cntMenuBox.menuBoxId + " .spMenu");
  67.         //打开传入的数组
  68.         for(var i in cntMenuBox.openIndex) {
  69.             var index = cntMenuBox.openIndex[i];
  70.             var spMenu = spMenus[index];
  71.             if(spMenu) {
  72.                 openSpMenu(cntMenuBox.menuBoxId, index);
  73.                 if(!cntMenuBox.multiple) {
  74.                     break;
  75.                 }
  76.             }
  77.         }
  78.     }
  79.  
  80.     function unique(arr) {
  81.         var result = [],
  82.             hash = {};
  83.         for(var i = 0, elem;
  84.             (elem = arr[i]) != null; i++) {
  85.             if(!hash[elem]) {
  86.                 result.push(elem);
  87.                 hash[elem] = true;
  88.             }
  89.         }
  90.         return result;
  91.     }
  92.  
  93.     //初始化点击事件
  94.     function initClickEvent(menuBox, closeOthers) {
  95.         $(menuBox.menuBoxId + " .spMenu").on("click", function() {
  96.             var cntSpMenu$ = $(this);
  97.             //要切换的元素
  98.             cntSpMenu$.next().slideToggle();
  99.             cntSpMenu$.parent().toggleClass("active")
  100.  
  101.             var cntSpMenu = cntSpMenu$['context'];
  102.             if(closeOthers == true) {
  103.                 var spMenus = $(menuBox.menuBoxId + " .spMenu");
  104.                 $.each(spMenus, function(index, spMenu) {
  105.                     if(cntSpMenu != spMenu) {
  106.                         closeSpMenu(menuBox.menuBoxId, index);
  107.                     }
  108.                 });
  109.             }
  110.         });
  111.     }
  112.  
  113.     //打开某一个item
  114.     function openSpMenu(menuBoxId, index) {
  115.         //要切换的元素
  116.         var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
  117.         spItem.next().slideDown();
  118.         spItem.parent().addClass("active")
  119.     }
  120.     //关闭某一个item
  121.     function closeSpMenu(menuBoxId, index) {
  122.         //要切换的元素
  123.         var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
  124.         spItem.next().slideUp();
  125.         spItem.parent().removeClass("active")
  126.     }
  127.     //切换某一个item
  128.     function toggleSpMenu(menuBoxId, index) {
  129.         //要切换的元素
  130.         var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
  131.         spItem.next().slideToggle();
  132.         spItem.parent().toggleClass("active")
  133.     }
  134.  
  135.     window.menuBox = menuBox;
  136. }($);

附上源码：

MenuBox

html自定义垂直导航菜单的更多相关文章

  1. html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）

    这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...

  2. html自定义垂直导航菜单（加强版--自定义传入menu参数，支持JSONArray、JSArray、JSONObject、JSObject）

    在上一篇中我简单写了个html自定义垂直导航菜单,缺点很明显,里面的数据是固定死的,不能动态更改数据. 这里我重写了一个修改版的垂直二级导航菜单,将原先的menuBox.init(config);修改 ...

  3. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  4. Android开发之自定义局部导航菜单

    如今,要实现导航功能方案有很多.比如: 1.用3.0+自带的Toolbar + Fragment导航. 2.用Tabhost实现导航.小弟学浅,就只用过这两种方案实现导航. 但是这两种方案都有一个很明 ...

  5. h5+css 垂直导航菜单

    http://blog.csdn.net/baidu_32731497/article/details/51814427

  6. 为SharePoint网站创建自定义导航菜单

    转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...

  7. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

  8. ABP之展现层（导航菜单）

    基本的增删改查已经粗糙的结束了,接下来就是要方便的展示了,也就是导航菜单.在Abp中已经对导航栏的设置进行了相应的封装(Abp.Application.Navigation),可以方便我们快速的将自己 ...

  9. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

随机推荐

  1. Java Thread.join()详解--父线程等待子线程结束后再结束

    目录(?)[+] 阅读目录 一.使用方式. 二.为什么要用join()方法 三.join方法的作用 join 四.用实例来理解 打印结果: 打印结果: 五.从源码看join()方法   join是Th ...

  2. .NET中的程序集

    参考:http://blog.sina.com.cn/s/blog_7ade159d0102wmg9.html 程序集(Assembly,装配件,.NET程序集) 程序集是应用程序的部署单元,.NET ...

  3. 封闭类------新标准c++程序设计

      封闭类:  一个类的成员变量如果是另一个类的对象,就称之为“成员对象”.包含成员对象的类叫封闭类. #include<iostream> using namespace std; cl ...

  4. h2数据库 安装部署

    1.下载linux下的包,即全平台,网址:http://www.h2database.com/html/download.html 选择Platform-Independent Zip 2.把这个包上 ...

  5. 苹果开发者账号提示“Unable to verify mobile phone number”的解决方案

    在注册苹果开发者账号时,会提示:"Unable to verify mobile phone number.".顾名思义,没有有效的手机号码. 解决方案: 进入到Your Appl ...

  6. dubbo 面试题

      dubbo是什么 dubbo是一个分布式框架,远程服务调用的分布式框架,其核心部分包含:集群容错:提供基于接口方法的透明远程过程调用,包括多协议支持,以及软负载均衡,失败容错,地址路由,动态配置等 ...

  7. 洛谷P1550 [USACO08OCT]打井Watering Hole

    P1550 [USACO08OCT]打井Watering Hole 题目背景 John的农场缺水了!!! 题目描述 Farmer John has decided to bring water to ...

  8. Python3之requests模块

    Python标准库中提供了:urllib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最简单的任务. 发送G ...

  9. 2019.3.7考试T2 离线数论？？

    $ \color{#0066ff}{ 题目描述 }$ 一天,olinr 在 luogu.org 刷题,一点提交,等了一分钟之后,又蛙又替. olinr 发动了他的绝招,说:"为啥啊???&q ...

  10. eclipse的一些快捷键记录

    查看所有快捷键:Ctrl + Shift + L Ctrl + Shift + F:格式化(关闭搜狗输入法的所有快捷键) Alt + /:智能提示,自动补全 Ctrl + / :添加单行注释(取消:C ...