JavaScript code for hiding sliding menu effects

A set of fixed menus that can be slide out from the edge of any page. The slides can also be used on the left or right of the body from the left and right sides, respectively, so they are "pushed ".

For example, how to trigger the enable and disable menus and some media queries.

HTML code

<! -- Body has the class "white-spmenu-push" -->
<Nav class = "white-spmenu White-spmenu-vertical white-spmenu-left" id = "cbp-spmenu-s1">
<H3> Menu <A href = "#"> Celery seakale </a>
<A href = "#"> Dulse daikon </a>
<A href = "#"> Zucchini garlic </a>
<A href = "#"> Catsear azuki bean </a>
<A href = "#"> Dandelion bunya </a>
<A href = "#"> Rutabaga </a>
</Nav>
<Nav class = "white-spmenu White-spmenu-vertical white-spmenu-right" id = "cbp-spmenu-s2">
<H3> Menu <A href = "#"> Celery seakale </a>
<A href = "#"> Dulse daikon </a>
<A href = "#"> Zucchini garlic </a>
<A href = "#"> Catsear azuki bean </a>
<A href = "#"> Dandelion bunya </a>
<A href = "#"> Rutabaga </a>
</Nav>
<Nav class = "white-spmenu White-spmenu-horizontal white-spmenu-top" id = "cbp-spmenu-s3">
<H3> Menu <A href = "#"> Celery seakale </a>
<A href = "#"> Dulse daikon </a>
<A href = "#"> Zucchini garlic </a>
<A href = "#"> Catsear azuki bean </a>
<A href = "#"> Dandelion bunya </a>
<A href = "#"> Rutabaga </a>
<A href = "#"> Celery seakale </a>
<A href = "#"> Dulse daikon </a>
<A href = "#"> Zucchini garlic </a>
<A href = "#"> Catsear azuki bean </a>
<A href = "#"> Dandelion bunya </a>
<A href = "#"> Rutabaga </a>
</Nav>
<Nav class = "white-spmenu White-spmenu-horizontal white-spmenu-bottom" id = "cbp-spmenu-s4">
<H3> Menu <A href = "#"> Celery seakale </a>
<A href = "#"> Dulse daikon </a>
<A href = "#"> Zucchini garlic </a>
<A href = "#"> Catsear azuki bean </a>
<A href = "#"> Dandelion bunya </a>
<A href = "#"> Rutabaga </a>
<A href = "#"> Celery seakale </a>
<A href = "#"> Dulse daikon </a>
<A href = "#"> Zucchini garlic </a>
<A href = "#"> Catsear azuki bean </a>
<A href = "#"> Dandelion bunya </a>
<A href = "#"> Rutabaga </a>
</Nav>
<Div class = "container">
<Div class = "main">
<Section>
<H2> Slide Menus <! -- Class "white-spmenu-open" gets applied to menu -->
<Button id = "showLeft"> Show/Hide Left Slide Menu </button>
<Button id = "showRight"> Show/Hide Right Slide Menu </button>
<Button id = "showTop"> Show/Hide Top Slide Menu </button>
<Button id = "showBottom"> Show/Hide Bottom Slide Menu </button>
</Section>
<Section class = "buttonset">
<H2> Push Menus <! -- Class "white-spmenu-open" gets applied to menu and "White-spmenu-push-toleft" or "white-spmenu-push-toright" to the body -->
<Button id = "showLeftPush"> Show/Hide Left Push Menu </button>
<Button id = "showRightPush"> Show/Hide Right Push Menu </button>
</Section>
</Div>
</Div>

CSS code

/* General styles for all menus */
. Cbp-spmenu {
Background: # 47a3da;
Position: fixed;
}
. Cbp-spmenu h3 {
Color: # afdefa;
Font-size: 1.9em;
Padding: 20px;
Margin: 0;
Font-weight: 300;
Background: #0d77b6;
}
. Cbp-spmenu {
Display: block;
Color: # fff;
Font-size: 1.1em;
Font-weight: 300;
}
. Cbp-spmenu a: hover {
Background: # 258mcm;
}
. White-spmenu a: active {
Background: # afdefa;
Color: # 47a3da;
}
/* Orientation-dependent styles for the content of the menu */
. White-spmenu-vertical {
Width: 240px;
Height: 100%;
Top: 0;
Z-index: 1000;
}
. White-spmenu-vertical {
Border-bottom: 1px solid # 258mcm;
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 # 258mcm;
}
/* Vertical menu that slides from the 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;
}
/* Horizontal menu that slides from the top or bottom */
. White-spmenu-top {
Top:-150px;
}
. White-spmenu-bottom {
Bottom:-150px;
}
. Cbp-spmenu-top.cbp-spmenu-open {
Top: 0px;
}
. Cbp-spmenu-bottom.cbp-spmenu-open {
Bottom: 0px;
}
/* Push classes applied to the body */
. Cbp-spmenu-push {
Overflow-x: hidden;
Position: relative;
Left: 0;
}
. Cbp-spmenu-push-toright {
Left: 240px;
}
. Cbp-spmenu-push-toleft {
Left:-240px;
}
/* Transitions */
. White-spmenu,
. Cbp-spmenu-push {
-Webkit-transition: all 0.3 s elapsed;
-Moz-transition: all 0.3 s elapsed;
Transition: all 0.3 s elapsed;
}
/* Example media queries */
@ Media screen and (max-width: 55.1875em ){
. Cbp-spmenu-horizontal {
Font-size: 75%;
Height: 110px;
    }
. White-spmenu-top {
Top:-110px;
    }
. White-spmenu-bottom {
Bottom:-110px;
    }
}
@ Media screen and (max-height: 26.375em ){
. White-spmenu-vertical {
Font-size: 90%;
Width: Pixel px;
    }
. White-spmenu-left,
. Cbp-spmenu-push-toleft {
Left:-pixel px;
    }
. Cbp-spmenu-right {
Right:-pixel px;
    }
. Cbp-spmenu-push-toright {
Left: Pixel px;
    }
}
JavaScript code
Var menuLeft = document. getElementById ('white-spmenu-s1 '),
MenuRight = document. getElementById ('white-spmenu-s2 '),
MenuTop = document. getElementById ('white-spmenu-s3 '),
MenuBottom = document. getElementById ('white-spmenu-s4 '),
ShowLeft = document. getElementById ('showleft '),
ShowRight = document. getElementById ('showright '),
ShowTop = document. getElementById ('showtop '),
ShowBottom = document. getElementById ('showbottom '),
ShowLeftPush = document. getElementById ('showleftpush '),
ShowRightPush = document. getElementById ('showrightpushpush '),
Body = document. body;
ShowLeft. onclick = function (){
Classie. toggle (this, 'active ');
Classie. toggle (menuLeft, 'white-spmenu-open ');
DisableOther ('showleft ');
};
ShowRight. onclick = function (){
Classie. toggle (this, 'active ');
Classie. toggle (menuRight, 'white-spmenu-open ');
DisableOther ('showright ');
};
ShowTop. onclick = function (){
Classie. toggle (this, 'active ');
Classie. toggle (menuTop, 'white-spmenu-open ');
DisableOther ('showtop ');
};
ShowBottom. onclick = function (){
Classie. toggle (this, 'active ');
Classie. toggle (menuBottom, 'white-spmenu-open ');
DisableOther ('showbottom ');
};
ShowLeftPush. onclick = function (){
Classie. toggle (this, 'active ');
Classie. toggle (body, 'white-spmenu-push-toright ');
Classie. toggle (menuLeft, 'white-spmenu-open ');
DisableOther ('showleftpush ');
};
ShowRightPush. onclick = function (){
Classie. toggle (this, 'active ');
Classie. toggle (body, 'white-spmenu-push-toleft ');
Classie. toggle (menuRight, 'white-spmenu-open ');
DisableOther ('showrightpush ');
};
Function disableOther (button ){
If (button! = 'Showleft '){
Classie. toggle (showLeft, 'disabled ');
    }
If (button! = 'Showright '){
Classie. toggle (showRight, 'disabled ');
    }
If (button! = 'Showtop '){
Classie. toggle (showTop, 'disabled ');
    }
If (button! = 'Showbottom '){
Classie. toggle (showBottom, 'disabled ');
    }
If (button! = 'Showleftpush '){
Classie. toggle (showLeftPush, 'disabled ');
    }
If (button! = 'Showrightpush '){
Classie. toggle (showRightPush, 'disabled ');
    }
}