首页>>导航菜单>>移动端边栏菜单 可以上下左右任意位置展开菜单(2020-03-14)

移动端边栏菜单 可以上下左右任意位置展开菜单

移动端边栏菜单 可以上下左右任意位置展开菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">  
  2.             <h3>Menu</h3>  
  3.             <a href="#">Celery seakale</a>  
  4.             <a href="#">Dulse daikon</a>  
  5.             <a href="#">Zucchini garlic</a>  
  6.             <a href="#">Catsear azuki bean</a>  
  7.             <a href="#">Dandelion bunya</a>  
  8.             <a href="#">Rutabaga</a>  
  9.         </nav>  
  10.         <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">  
  11.             <h3>Menu</h3>  
  12.             <a href="#">Celery seakale</a>  
  13.             <a href="#">Dulse daikon</a>  
  14.             <a href="#">Zucchini garlic</a>  
  15.             <a href="#">Catsear azuki bean</a>  
  16.             <a href="#">Dandelion bunya</a>  
  17.             <a href="#">Rutabaga</a>  
  18.         </nav>  
  19.         <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">  
  20.             <h3>Menu</h3>  
  21.             <a href="#">Celery seakale</a>  
  22.             <a href="#">Dulse daikon</a>  
  23.             <a href="#">Zucchini garlic</a>  
  24.             <a href="#">Catsear azuki bean</a>  
  25.             <a href="#">Dandelion bunya</a>  
  26.             <a href="#">Rutabaga</a>  
  27.             <a href="#">Celery seakale</a>  
  28.             <a href="#">Dulse daikon</a>  
  29.             <a href="#">Zucchini garlic</a>  
  30.             <a href="#">Catsear azuki bean</a>  
  31.             <a href="#">Dandelion bunya</a>  
  32.             <a href="#">Rutabaga</a>  
  33.         </nav>  
  34.         <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">  
  35.             <h3>Menu</h3>  
  36.             <a href="#">Celery seakale</a>  
  37.             <a href="#">Dulse daikon</a>  
  38.             <a href="#">Zucchini garlic</a>  
  39.             <a href="#">Catsear azuki bean</a>  
  40.             <a href="#">Dandelion bunya</a>  
  41.             <a href="#">Rutabaga</a>  
  42.             <a href="#">Celery seakale</a>  
  43.             <a href="#">Dulse daikon</a>  
  44.             <a href="#">Zucchini garlic</a>  
  45.             <a href="#">Catsear azuki bean</a>  
  46.             <a href="#">Dandelion bunya</a>  
  47.             <a href="#">Rutabaga</a>  
  48.         </nav>  
  49.         <div class="container">  
  50.             <div class="main">  
  51.                 <section>  
  52.                     <h2>Slide Menus</h2>  
  53.                     <!-- Class "cbp-spmenu-open" gets applied to menu -->  
  54.                     <button id="showLeft">Show/Hide Left Slide Menu</button>  
  55.                     <button id="showRight">Show/Hide Right Slide Menu</button>  
  56.                     <button id="showTop">Show/Hide Top Slide Menu</button>  
  57.                     <button id="showBottom">Show/Hide Bottom Slide Menu</button>  
  58.                 </section>  
  59.                 <section class="buttonset">  
  60.                     <h2>Push Menus</h2>  
  61.                     <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->  
  62.                     <button id="showLeftPush">Show/Hide Left Push Menu</button>  
  63.                     <button id="showRightPush">Show/Hide Right Push Menu</button>  
  64.                 </section>  
  65.             </div>  
  66.         </div>  

 

JavaScript Code
  1. var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),  
  2.                 menuRight = document.getElementById( 'cbp-spmenu-s2' ),  
  3.                 menuTop = document.getElementById( 'cbp-spmenu-s3' ),  
  4.                 menuBottom = document.getElementById( 'cbp-spmenu-s4' ),  
  5.                 showLeft = document.getElementById( 'showLeft' ),  
  6.                 showRight = document.getElementById( 'showRight' ),  
  7.                 showTop = document.getElementById( 'showTop' ),  
  8.                 showBottom = document.getElementById( 'showBottom' ),  
  9.                 showLeftPush = document.getElementById( 'showLeftPush' ),  
  10.                 showRightPush = document.getElementById( 'showRightPush' ),  
  11.                 body = document.body;  
  12.   
  13.             showLeft.onclick = function() {  
  14.                 classie.toggle( this, 'active' );  
  15.                 classie.toggle( menuLeft, 'cbp-spmenu-open' );  
  16.                 disableOther( 'showLeft' );  
  17.             };  
  18.             showRight.onclick = function() {  
  19.                 classie.toggle( this, 'active' );  
  20.                 classie.toggle( menuRight, 'cbp-spmenu-open' );  
  21.                 disableOther( 'showRight' );  
  22.             };  
  23.             showTop.onclick = function() {  
  24.                 classie.toggle( this, 'active' );  
  25.                 classie.toggle( menuTop, 'cbp-spmenu-open' );  
  26.                 disableOther( 'showTop' );  
  27.             };  
  28.             showBottom.onclick = function() {  
  29.                 classie.toggle( this, 'active' );  
  30.                 classie.toggle( menuBottom, 'cbp-spmenu-open' );  
  31.                 disableOther( 'showBottom' );  
  32.             };  
  33.             showLeftPush.onclick = function() {  
  34.                 classie.toggle( this, 'active' );  
  35.                 classie.toggle( body, 'cbp-spmenu-push-toright' );  
  36.                 classie.toggle( menuLeft, 'cbp-spmenu-open' );  
  37.                 disableOther( 'showLeftPush' );  
  38.             };  
  39.             showRightPush.onclick = function() {  
  40.                 classie.toggle( this, 'active' );  
  41.                 classie.toggle( body, 'cbp-spmenu-push-toleft' );  
  42.                 classie.toggle( menuRight, 'cbp-spmenu-open' );  
  43.                 disableOther( 'showRightPush' );  
  44.             };  
  45.   
  46.             function disableOther( button ) {  
  47.                 if( button !== 'showLeft' ) {  
  48.                     classie.toggle( showLeft, 'disabled' );  
  49.                 }  
  50.                 if( button !== 'showRight' ) {  
  51.                     classie.toggle( showRight, 'disabled' );  
  52.                 }  
  53.                 if( button !== 'showTop' ) {  
  54.                     classie.toggle( showTop, 'disabled' );  
  55.                 }  
  56.                 if( button !== 'showBottom' ) {  
  57.                     classie.toggle( showBottom, 'disabled' );  
  58.                 }  
  59.                 if( button !== 'showLeftPush' ) {  
  60.                     classie.toggle( showLeftPush, 'disabled' );  
  61.                 }  
  62.                 if( button !== 'showRightPush' ) {  
  63.                     classie.toggle( showRightPush, 'disabled' );  
  64.                 }  
  65.             }  

 


原文地址:http://www.freejs.net/article_daohangcaidan_842.html