javascript - Mobile slide menu scrollable -
i'm using classie.js sliding menu mobile phones site. it's working great! 1 problem:
my menu long mobile show menu items @ once. how can make vertical menu scrollable? when scroll while menu open page scrolls. want menu scroll down...
hope can me out..
html:
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1"> <h3> <img id="showleftpush2" src="../images/banner_logo3.png" alt="logo stilld"></h3> <a href="../">home</a> <a href="../portfolio/">portfolio</a> <a href="../testimonials/">testimonials</a> <a href="../blog/">blog</a> <a href="../contact/">contact</a> </nav> <div class="container"> <section class="buttonset"> <div id="mobile-header"> <a id="showleftpush"><div id="responsive-menu-button2">menu</div></a> </div> </section> </div> </div> <script src="../js/classie.js"></script> <script> var menuleft = document.getelementbyid( 'cbp-spmenu-s1' ), menuright = document.getelementbyid( 'cbp-spmenu-s2' ), menutop = document.getelementbyid( 'cbp-spmenu-s3' ), menubottom = document.getelementbyid( 'cbp-spmenu-s4' ), showleftpush = document.getelementbyid( 'showleftpush' ), body = document.body; showleftpush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toright' ); classie.toggle( menuleft, 'cbp-spmenu-open' ); disableother( 'showleftpush' ); }; function disableother( button ) { if( button !== 'showleftpush' ) { classie.toggle( showleftpush, 'disabled' ); } } </script> css:
/* general styles menus */ .cbp-spmenu { background: #383b45; position: fixed; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } .cbp-spmenu h3 { color: #afdefa; font-size: 1.9em; padding: 20px; margin: 0; margin-top: 20px; font-weight: 300; display: block; margin-left: auto; margin-right: auto; width: 90px; } .cbp-spmenu { display: block; color: #fff; letter-spacing: 0.5px; line-height: 35px; font-weight: 100; text-decoration: none; font-family: 'open sans', sans-serif; font-size: 17px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } .cbp-spmenu a:hover { background: #2d2e32; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } .cbp-spmenu a:active { background: #63666f; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } /* orientation-dependent styles content of menu */ .cbp-spmenu-vertical { width: 240px; height: 100%; top: 0; z-index: 1000; } .cbp-spmenu-vertical { border-bottom: 1px solid #2d2e32; padding: 1em; } .cbp-spmenu-horizontal { width: 100%; height: 150px; left: 0; z-index: 1000; overflow: hidden; } .cbp-spmenu-horizontal h3 { height: 100%; width: 20%; float: left; } .cbp-spmenu-horizontal { float: left; width: 20%; padding: 0.8em; border-left: 1px solid #258ecd; } /* vertical menu slides left or right */ .cbp-spmenu-left { left: -240px; } .cbp-spmenu-right { right: -240px; } .cbp-spmenu-left.cbp-spmenu-open { left: 0px; } .cbp-spmenu-right.cbp-spmenu-open { right: 0px; } /* push classes applied body */ .cbp-spmenu-push { overflow-x: hidden; position: relative; left: 0; } .cbp-spmenu-push-toright { left: 240px; } .cbp-spmenu-push-toleft { left: -240px; } /* transitions */ .cbp-spmenu, .cbp-spmenu-push { -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; } /* example media queries */ @media screen , (max-width: 55.1875em){ .cbp-spmenu-horizontal { font-size: 75%; height: 110px; } .cbp-spmenu-top { top: -110px; } .cbp-spmenu-bottom { bottom: -110px; } } @media screen , (max-height: 26.375em){ .cbp-spmenu-vertical { font-size: 90%; width: 190px; } .cbp-spmenu-left, .cbp-spmenu-push-toleft { left: -190px; } .cbp-spmenu-right { right: -190px; } .cbp-spmenu-push-toright { left: 190px; } } jquery:
/*! * classie - class helper functions * bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true */ ( function( window ) { 'use strict'; // class helper functions bonzo https://github.com/ded/bonzo function classreg( classname ) { return new regexp("(^|\\s+)" + classname + "(\\s+|$)"); } // classlist support class management // altho fair, api sucks because won't accept multiple classes @ once var hasclass, addclass, removeclass; if ( 'classlist' in document.documentelement ) { hasclass = function( elem, c ) { return elem.classlist.contains( c ); }; addclass = function( elem, c ) { elem.classlist.add( c ); }; removeclass = function( elem, c ) { elem.classlist.remove( c ); }; } else { hasclass = function( elem, c ) { return classreg( c ).test( elem.classname ); }; addclass = function( elem, c ) { if ( !hasclass( elem, c ) ) { elem.classname = elem.classname + ' ' + c; } }; removeclass = function( elem, c ) { elem.classname = elem.classname.replace( classreg( c ), ' ' ); }; } function toggleclass( elem, c ) { var fn = hasclass( elem, c ) ? removeclass : addclass; fn( elem, c ); } window.classie = { // full names hasclass: hasclass, addclass: addclass, removeclass: removeclass, toggleclass: toggleclass, // short names has: hasclass, add: addclass, remove: removeclass, toggle: toggleclass }; })( window );
fixed myself:
overflow-y: scroll;
Comments
Post a Comment