|
|
| Line 144: |
Line 144: |
| | }); | | }); |
| | </script> | | </script> |
| - |
| |
| - | <!--CLASSIE-->
| |
| - | ( function( window ) {
| |
| - |
| |
| - | 'use strict';
| |
| - |
| |
| - | function classReg( className ) {
| |
| - | return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
| |
| - | }
| |
| - |
| |
| - | 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 = {
| |
| - | hasClass: hasClass,
| |
| - | addClass: addClass,
| |
| - | removeClass: removeClass,
| |
| - | toggleClass: toggleClass,
| |
| - | has: hasClass,
| |
| - | add: addClass,
| |
| - | remove: removeClass,
| |
| - | toggle: toggleClass
| |
| - | };
| |
| - |
| |
| - | })( window );
| |
| - |
| |
| - | <!--SLIDING SIDE MENU-->
| |
| - | var body = document.body,
| |
| - | mask = document.createElement("div"),
| |
| - | toggleSlideLeft = document.querySelector( ".toggle-slide-left" ),
| |
| - | toggleSlideRight = document.querySelector( ".toggle-slide-right" ),
| |
| - | toggleSlideTop = document.querySelector( ".toggle-slide-top" ),
| |
| - | toggleSlideBottom = document.querySelector( ".toggle-slide-bottom" ),
| |
| - | togglePushLeft = document.querySelector( ".toggle-push-left" ),
| |
| - | togglePushRight = document.querySelector( ".toggle-push-right" ),
| |
| - | togglePushTop = document.querySelector( ".toggle-push-top" ),
| |
| - | togglePushBottom = document.querySelector( ".toggle-push-bottom" ),
| |
| - | slideMenuLeft = document.querySelector( ".slide-menu-left" ),
| |
| - | slideMenuRight = document.querySelector( ".slide-menu-right" ),
| |
| - | slideMenuTop = document.querySelector( ".slide-menu-top" ),
| |
| - | slideMenuBottom = document.querySelector( ".slide-menu-bottom" ),
| |
| - | pushMenuLeft = document.querySelector( ".push-menu-left" ),
| |
| - | pushMenuRight = document.querySelector( ".push-menu-right" ),
| |
| - | pushMenuTop = document.querySelector( ".push-menu-top" ),
| |
| - | pushMenuBottom = document.querySelector( ".push-menu-bottom" ),
| |
| - | activeNav
| |
| - | ;
| |
| - | mask.className = "mask";
| |
| - |
| |
| - | /* slide menu left */
| |
| - | toggleSlideLeft.addEventListener( "click", function(){
| |
| - | classie.add( body, "sml-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "sml-open";
| |
| - | } );
| |
| - |
| |
| - | /* slide menu right */
| |
| - | toggleSlideRight.addEventListener( "click", function(){
| |
| - | classie.add( body, "smr-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "smr-open";
| |
| - | } );
| |
| - |
| |
| - | /* slide menu top */
| |
| - | toggleSlideTop.addEventListener( "click", function(){
| |
| - | classie.add( body, "smt-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "smt-open";
| |
| - | } );
| |
| - |
| |
| - | /* slide menu bottom */
| |
| - | toggleSlideBottom.addEventListener( "click", function(){
| |
| - | classie.add( body, "smb-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "smb-open";
| |
| - | } );
| |
| - |
| |
| - | /* push menu left */
| |
| - | togglePushLeft.addEventListener( "click", function(){
| |
| - | classie.add( body, "pml-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "pml-open";
| |
| - | } );
| |
| - |
| |
| - | /* push menu right */
| |
| - | togglePushRight.addEventListener( "click", function(){
| |
| - | classie.add( body, "pmr-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "pmr-open";
| |
| - | } );
| |
| - |
| |
| - | /* push menu top */
| |
| - | togglePushTop.addEventListener( "click", function(){
| |
| - | classie.add( body, "pmt-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "pmt-open";
| |
| - | } );
| |
| - |
| |
| - | /* push menu bottom */
| |
| - | togglePushBottom.addEventListener( "click", function(){
| |
| - | classie.add( body, "pmb-open" );
| |
| - | document.body.appendChild(mask);
| |
| - | activeNav = "pmb-open";
| |
| - | } );
| |
| - |
| |
| - | /* hide active menu if mask is clicked */
| |
| - | mask.addEventListener( "click", function(){
| |
| - | classie.remove( body, activeNav );
| |
| - | activeNav = "";
| |
| - | document.body.removeChild(mask);
| |
| - | } );
| |
| - |
| |
| - | /* hide active menu if close menu button is clicked */
| |
| - | [].slice.call(document.querySelectorAll(".close-menu")).forEach(function(el,i){
| |
| - | el.addEventListener( "click", function(){
| |
| - | classie.remove( body, activeNav );
| |
| - | activeNav = "";
| |
| - | document.body.removeChild(mask);
| |
| - | } );
| |
| - | });
| |
| - |
| |
| - | })( window );
| |
| | | | |
| | </script> | | </script> |
| | </html> | | </html> |
"
