7+ JavaScript Sliding Menu Examples

This post contains a total of 7+ Hand-Picked JavaScript Sliding Menu Examples with Source Code. All these Sliding menus are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Sliding Menu Examples

1. By Ricardo Velarde

Made by Ricardo Velarde. Sliding menu with Slide Cards. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css'>
  
<style>
body {
	/*Removing touch highlights on smartphones*/
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-family: 'Rubik', sans-serif;
	background-color: #14051f;
	opacity: 1;
    transition: 1s opacity;
}
body.fade-out {
    opacity: 0;
    transition: none;
}

.swiper-wrapper .swiper-slide:nth-child(1) {
  	width: 100vw;
	height: 100%;
}
.swiper-slide {
	width: 40%;
}
.hide-cover {
	transform: translate(-50%, 0);
	-webkit-transition-delay: 2.5s;
    transition-delay: 2.5s;
	-webkit-transition: all 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  	transition:         all 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 
}
.show-cover {
	transform: translate(0, 0);
	-webkit-transition-delay: 1s;
    transition-delay: 1s;
	-webkit-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  	transition:         all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 
}
/*-------------------------------------------------------*/
/* Please Rotate Device
/*-------------------------------------------------------*/
.rotate-device-wrapper {
	display: none;
}
.rotate-device-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #cd2e42;
	z-index: 10;
}
.rotate-device-wrapper p {
	color: #f5f5f5;
	text-transform: uppercase;
	text-align: center;
}
.rotate-device-wrapper p:first-child {
	font-weight: 900;
	font-size: 50px;
	line-height: 40px;
	margin-bottom: 10px;
}
.rotate-device-wrapper p:nth-child(2) {
	font-size: 30px;
	letter-spacing: -0.9px;
	word-spacing: 2px;
	margin-top: -1px;
}
.rotate-device-wrapper .rotate_icon {
	width: 80px;
	height: auto;
}

/*-------------------------------------------------------*/
/* Social
/*-------------------------------------------------------*/
.social-grp {
	width: 75px;
	height: auto;
	margin-top: 25px;
}
.rfa-fb-icon,
.rfa-tw-icon {
	width: 30px;
}
.rfa-fb-icon {
	float: left;
}
.rfa-tw-icon {
	float: right;
}

/*-------------------------------------------------------*/
/* Homepage
/*-------------------------------------------------------*/
.rfa-sl-container-start {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	z-index: 6;
}
.rfa-sl-container-start h1 {
	font-weight: 900;
	text-transform: uppercase;
	overflow: hidden;
}
.rfa-sl-container-start h1,
.rfa-sl-container-start p {
	color: #f5f5f5;
	z-index: 2;
}
.rfa-sl-container-start p {
	font-weight: 300;
}
.rfa-sl-container-start .subText {
	font-size: 25px;
    line-height: 25px;
}
.rfa-sl-container-start .author {
	margin-bottom: 10px;
}
.hp-cta-wrapper {
	position: relative;
	width: 290px;
	height: 48px;
	z-index: 2;
}
.rfa-hp-btn .button {
	left: 0;
	transform: translate(0, 0);
	bottom: initial;
	margin-left: 0;
}

.rfa-hp-btn {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	padding: 0.3em 0;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: absolute;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	outline: none;
	cursor: pointer;
	text-align: left;
	text-transform: uppercase;
    font-size: 17px;
	font-weight: 700;
}
.cta-arrow {
	width: 30px;
	fill:#f5f5f5;
	display: inline-block;
}


/*-------------------------------------------------------*/
/* Sliiide Menu
/*-------------------------------------------------------*/
.fan-rfa--hamburger-icon {
	z-index: 2;
	width: 30px;
	height: auto;
	fill: #f5f5f5;
	-webkit-transition: fill 250ms;
    transition: fill 250ms;
}
.fan-rfa--hamburger-icon:hover,
.white-Bkg-hamburger-menu-color:hover {
	fill: #cd2e42;
}
.white-Bkg-hamburger-menu-color,
.drop-down-menu--close {
	fill: #14051f;
	-webkit-transition: fill 250ms;
    transition: fill 250ms;
}
.drop-down-menu--close {
	width: 20px;
	height: auto;
}
.drop-down-menu--close:hover {
	fill: #f5f5f5;
}
.fan-rfa--hamburger-icon {
	right: 20px;
}
.fan-rfa--hamburger-icon,
.drop-down-menu--close {
	position: absolute;
	top: 20px;
}
.sliding-menu {
	position: absolute;
	height: 100%;
	visibility: hidden;
	z-index: 5;
	background-color: #cd2e42;
	display: flex;
	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
}
.sliding-menu > a {
	text-decoration: none;
}
.sliding-menu h3,
.sliding-menu > a p {
	text-align: center;
	color: #fff;
}
.sliding-menu h3 {
	font-size: 12px;
	font-weight: 500;
    letter-spacing: 1.716px;
	text-transform: uppercase;
}
.sliding-menu > a p {
	font-size: 30px;
    line-height: 40px;
	margin: 5px 0;
	letter-spacing: -1px;
}

/*-------------------------------------------------------*/
/* Button Style: Winona 
/*-------------------------------------------------------*/
.button {
	max-width: 250px;
	display: block;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: absolute;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
	font-family: 'Rubik', sans-serif;
}
.button--winona {
	overflow: hidden;
	padding: 0;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona::after {
	content: attr(data-text);
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	color: #f5f5f5;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.button--winona > span {
	display: block;
}
.button--winona.button--inverted {
	color: #14051f;
}
.button--winona.button--inverted:after {
	color: #14051f;
}
.button--winona::after,
.button--winona > span {
	padding: 10px 30px;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona:hover {
	border-color: #f5f5f5;
	background-color: rgba(20, 5, 31, 0.1);
}
.button--winona.button--inverted:hover {
	border-color: #14051f;
	background-color: #14051f;
}
.button--winona:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button--winona:hover > span {
	opacity: 0;
	-webkit-transform: translate3d(0, -25%, 0);
	transform: translate3d(0, -25%, 0);
}

/* Button Style: Borders */
.button--border-thin {
	border: 1px solid;
}
.button--round-s {
	border-radius: 5px;
}

.chap-btn--a,
.chap-btn--a:visited {
	color: #f5f5f5;
}

/*-------------------------------------------------------*/
/* COUNTER
/*-------------------------------------------------------*/
.counter-grp {
	position: absolute;
	left: 50%;
	bottom: 8%;
	transform: translate(-50%, 0);
	width: 120px;
    height: 25px;
	text-align: center;
	z-index: 2;
	display: flex;
	flex-direction: row;
}
.counter-grp .slide-links-container {
	top: 0;
	height: auto;
    width: auto;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	z-index: 2;
}
.counter-grp .slide-links-container p {
	margin: 0;
}
.counter-grp .slide-links-container a {
	color: #cd2e42;
}

/*-------------------------------------------------------*/
/* Swiper Slides
/*-------------------------------------------------------*/
 .swiper-container {
	width: 100%;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}
.rfa-slide-container {
	position: relative;
	height: 100vh;
	width: 100%;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.rfa-chap-sect-slide,
.chapter-content--slide {
	display: flex;
	flex-direction: column;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
	min-width: 320px;
}
.rfa-chap-sect-slide h3 {
	text-align: center;
	font-weight: 900;
	text-transform: uppercase;
	color: #f5f5f5;
	min-width: 290px;
}


/* Swiper Pagination */
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 15px;
	background: #ffffff;
}
.swiper-pagination-bullet {
	position: relative;
}
.swiper-pagination-bullet-active:after {
	content: "";
	position: absolute;
	width: 18px;
    height: 18px;
	border: 1px solid #fff;
	border-radius: 50%;
	top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.swiper-pagination-bullet-active {
	background: #f5f5f5;
}

.rfa-chap-sect-slide {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
	background-color: #cd2e42;
}
.slide__intro {
	background-color: aqua;
}

.slide__chap1 {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/chapterImg_1.png');
}
.slide__chap2 {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/chapterImg_2.png');
}
.slide__chap3 {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/chapterImg_3.png');
}
.slide__chap4 {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/chapterImg_4.png');
}
.slide__chap5 {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/chapterImg_5.jpg');
}

.slide4,
.slide5,
.slide6, 
.slide7 {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/mobile_cover.jpg');
}

.hide-swiper-pagination {
	opacity: 0;
	-webkit-transition: opacity 300ms;
    transition: opacity 300ms;
}
.add-swiper-pagination {
	opacity: 1;
	-webkit-transition: opacity 300ms;
    transition: opacity 300ms;
}

/*-------------------------------------------------------*/
/* Chapter Content
/*-------------------------------------------------------*/
.chapter-content--slide {
	background: url();
	background-color: #f5f5f5;
	height: 100vh;
}
.chapter-content {
	height: auto;
    width: 100%;
	overflow-y: auto;
}
.chaptercontent-paragraph--top {
	padding: 100px 0 0 0;
}
.chaptercontent-paragraph--bottom {
	padding: 0 0 100px 0;
}
.chaptercontent-paragraph--center {
	padding: 100px 0;
	margin: 0 auto;
}
.gradient {
	position: absolute;
	height: 110px;
	width: 100%;
	bottom: 0;
	background-image: linear-gradient(0deg,#f5f5f5,hsla(37,87%,97%,0));
}
.chapter-content--gfx {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}
.chaptercontent--paragraph-med-gfx {
	padding-top: 30px;
}
.chaptercontent--paragraph-lg-gfx {
	padding-top: 30px;
	padding-bottom: 100px;
}
/*--------------------------

     Media Queries 

--------------------------*/
/*    Mobile    */

@media only screen and (min-width: 320px) {
    /* 320px */
	
	/*-------------------------------------------------------*/
	/* Video: 320
	/*-------------------------------------------------------*/
	.video-wrapper {
		position: relative;
		width: 70%;
		height: auto;
		z-index: 2;
	}
	.bkg_gfx_1 {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;	
		height: 100%;
		width: 100%;
		background-image: url('../img/BkgGfx_video.png');
		background-size: cover;
		background-position: top;
		background-repeat: no-repeat;
	}
	
	/*-------------------------------------------------------*/
	/* Please Rotate Device: 320
	/*-------------------------------------------------------*/
	.mobile .rotate-device-wrapper {
		display: none;
	}
	
	/*-------------------------------------------------------*/
	/* Sliiide Menu: 320
	/*-------------------------------------------------------*/
	.sliding-menu h3 {
		margin: 0 0 10px 0;
	}
	.mobile .drop-down-menu--close {
		right: 20px;
	}
	.drop-down-menu--close {
		right: 40px;
	}
	
	/*-------------------------------------------------------*/
	/* Homepage: 320
	/*-------------------------------------------------------*/
	.rfa-sl-container-start h1 {
		display: block;
		width: 290px;
		font-size: 50px;
		line-height: 0.88;
		letter-spacing: -1.99px;
		word-spacing: 6px;
		position: relative;
		margin-bottom: 5px;
    	z-index: 1;
	}
	.rfa-sl-container-start p {
		width: 290px;
		margin-top: 0;
		line-height: 20px;
	}
	.rfa-sl-container-start--bkg-img {
		position: absolute;
		background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/mobile_cover.jpg');
		background-size: cover;
		background-position: center;
		height: 100%;
		width: 100%;
		background-color: #cd2e42;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0
	}
	.rfa-sl-container-start .author {
		margin-top: 50px;
	}
	
	/*-------------------------------------------------------*/
	/* Chapter Content: 320
	/*-------------------------------------------------------*/
	/* Med GFX */
	.med-gfx {
		width: 300px;
		height: 213px;
		margin: 0 auto;
		background-image: url('../img/bp_01.png');
	}
	.lg-gfx {
		width: 300px;
		height: 270px;
		margin: 0 auto;
		background-image: url('../img/bp_02.png');
	}
	.chapter-content .gfx-wrapper {
		padding-top: 63px;
	}
	.chaptercontent--paragraph {
		width: 240px;
		max-width: 82%;
		margin: 0 auto 30px;
		line-height: 25px;
	}
	
	/*-------------------------------------------------------*/
	/* Swiper Slides: 320
	/*-------------------------------------------------------*/
	.rfa-chap-sect-slide {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.rfa-chap-sect-slide h3 {
		width: 290px;
		font-size: 35.35px;
		line-height: 0.9;
		letter-spacing: 0;
		word-spacing: 6px;
	}
	.dt-rfa--text-prev-btn,
	.dt-rfa--text-next-btn {
		display: none;
		opacity: 0;
	}
	.fandom--next-btn,
	.fandom--prev-btn {
		top: initial;
		bottom: 9.3%;
		right: 20px;
		height: 75%;
		width: 45px;
		margin-top: 0;
		background-image: none;
		cursor: none;
	}
	.fandom--next-btn,
	.fandom--prev-btn {
		background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/arrow_icon.svg');
		background-position: 0 100%;
		background-size: 45%;
	}
	.fandom--prev-btn {
		transform: scaleX(-1);
	}
	.swiper-button-next, 
	.swiper-button-prev {
		opacity: 1;
		-webkit-transition: opacity 250ms;
    	transition: opacity 250ms;
	}
	.swiper-button-next.swiper-button-disabled, 
	.swiper-button-prev.swiper-button-disabled {
		opacity: 0;
	}

	/* Swiper Pagination */
	.swiper-container-horizontal>.swiper-pagination-bullets, 
	.swiper-pagination-custom, .swiper-pagination-fraction {
		bottom: 10%;
	}
	
	/*-------------------------------------------------------*/
	/* Button Style: Winona 320
	/*-------------------------------------------------------*/
	.button {
		min-width: 170px;
		bottom: 20%;
		left: 50%;
		transform: translate(-50%, 0);
	}
	
}

@media only screen and (min-width: 375px) {
    /* 375 */
	
	/*-------------------------------------------------------*/
	/* Homepage: 375
	/*-------------------------------------------------------*/
	.rfa-sl-container-start h1,
	.rfa-sl-container-start p,
	.hp-cta-wrapper {
		width: 310px;
	}
	.rfa-sl-container-start h1 {
		font-size: 51.5px;
	}
	
	/*-------------------------------------------------------*/
	/* Swiper: 375
	/*-------------------------------------------------------*/
	.swiper-slide h3 {
		width: 340px;
	}
	
	/* Swiper Pagination*/
	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}
	.swiper-pagination-bullet-active:after {
		height: 23px;
		width: 23px;
	}
	
	/*-------------------------------------------------------*/
	/* Chapter Content: 375
	/*-------------------------------------------------------*/
	.chaptercontent--paragraph {
		width: 280px;
	}

}

@media only screen and (min-width: 414px) {
    /* 414 */
	
	/*-------------------------------------------------------*/
	/* Swiper: 414
	/*-------------------------------------------------------*/
	
	/* Swiper Pagination: 414*/
	.swiper-container-horizontal>.swiper-pagination-bullets, 
	.swiper-pagination-custom, 
	.swiper-pagination-fraction {
		bottom: 12%;
	}

}

@media only screen and (min-width: 568px) {
    /* 568 */
	
	/*-------------------------------------------------------*/
	/* Please Rotate Device: 568
	/*-------------------------------------------------------*/
	.mobile .rotate-device-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		align-items: center;
	}
	
	/*-------------------------------------------------------*/
	/* Swiper: 568
	/*-------------------------------------------------------*/
	.slide-links-container {
		width: 399px;
	}
	
}

@media only screen and (min-width: 667px) {
    /* 667px */
	
	/*-------------------------------------------------------*/
	/* Swiper: 667
	/*-------------------------------------------------------*/
	/* Cards */
	.rfa-chap-sect-slide {
		top: 50%;
		transform: translate(0, -50%);
		-webkit-transition: height 300ms;
    	transition: height 300ms;
	}
	.rfa-chap-sect-wrapper .swiper-slide-prev, 
	.rfa-chap-sect-wrapper .swiper-slide-next {
		height: 80%;
		background-color: #cd2e42;
		-webkit-transition: height 300ms;
    	transition: height 300ms;
	}
	.swiper-slide-prev .slide-cover,
	.swiper-slide-next .slide-cover,
	.slide-cover {
		background-color: #cd2e42;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 2;
		opacity: 0.75;
		-webkit-transition: opacity 300ms;
    	transition: opacity 300ms;
	}
	.swiper-slide-active .slide-cover {
		position: absolute;
		opacity: 0;
		-webkit-transition: opacity 300ms, transform 310ms 100ms;
    	transition: opacity 300ms, transform 310ms 100ms;
		height: 100%;
		width: 100%;
		background-color: #cd2e42;
		z-index: 2;
		transform: scale(0);
	}
	
}

@media only screen and (min-width: 736px) {
    /* 736px */
	
	/*-------------------------------------------------------*/
	/* Homepage: 736
	/*-------------------------------------------------------*/
	.rfa-sl-container-start h1 {
		font-size: 71.5px;
	}
	.rfa-sl-container-start h1, 
	.rfa-sl-container-start p, 
	.hp-cta-wrapper {
		width: 445px;
	}
	
	/*-------------------------------------------------------*/
	/* Swiper: 736
	/*-------------------------------------------------------*/
	
}

/*Tablet*/

@media only screen and (min-width: 768px) {
    /* 768 */
	
	/*-------------------------------------------------------*/
	/* Please Rotate Device: 768
	/*-------------------------------------------------------*/
	.mobile .rotate-device-wrapper {
		display: none;
	}
	
	/*-------------------------------------------------------*/
	/* Homepage: 768
	/*-------------------------------------------------------*/
	.rfa-sl-container-start--bkg-img {
		background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/Dt_Cover.png');
	}
	
	/*-------------------------------------------------------*/
	/* Chapter Content: 768
	/*-------------------------------------------------------*/
	.chapter-content--slide {
		height: 100%;
	}
	.chaptercontent--paragraph {
		width: 400px;
	}
	.med-gfx {
		width: 400px;
    	height: 335px;
	}
	.lg-gfx {
		width: 400px;
    	height: 400px;
	}
	.gradient {
		display: none;
	}

	
	/*-------------------------------------------------------*/
	/* Swiper: 768
	/*-------------------------------------------------------*/
	.rfa-chap-sect-slide {
		height: 80%;
	}
	.rfa-chap-sect-wrapper .swiper-slide-prev, 
	.rfa-chap-sect-wrapper .swiper-slide-next {
		height: 70%;
	}
	.slide-links-container {
		width: 549px;
	}
	.fandom--prev-btn,
	.fandom--next-btn {
		display: none;
		opacity: 0;
	}
	.dt-rfa--text-prev-btn,
	.dt-rfa--text-next-btn {
		top: 91.5%;
		display: block;
		opacity: 1;
		background-image: none;
	}
	.dt-rfa--text-prev-btn {
		left: 90px;
	}
	.dt-rfa--text-next-btn {
		right: 90px;
	}
	.swiper-slide h3 {
		width: 300px;
	}
	
	/* Swiper Pagination: 768 */
	.swiper-container-horizontal>.swiper-pagination-bullets, 
	.swiper-pagination-custom, 
	.swiper-pagination-fraction {
		bottom: 15%;
	}

}

@media only screen and (min-width: 812px) {
	/* 812 */
	
	/*-------------------------------------------------------*/
	/* Please Rotate Device: 812
	/*-------------------------------------------------------*/
	.mobile .rotate-device-wrapper {
		display: flex;
	}
	
}

/*    Desktop    */

@media only screen and (min-width: 1024px) {
    /* 1024 */
	
	/*-------------------------------------------------------*/
	/* Video: 1024
	/*-------------------------------------------------------*/
	.video-wrapper {
		width: 70%;
		max-width: 1040px;
		height: auto;
	}
	.bkg_gfx_1 {
		background: url();
		background-color: #f5f5f5;
	}
	
	/*-------------------------------------------------------*/
	/* Please Rotate Device: 1024
	/*-------------------------------------------------------*/
	.mobile .rotate-device-wrapper {
		display: none;
	}
	.slide-links-container {
		width: 60px;
	}
	
	/* Swiper Pagination: 768 */
	.swiper-container-horizontal>.swiper-pagination-bullets, 
	.swiper-pagination-custom, 
	.swiper-pagination-fraction {
		bottom: 12%;
	}
	
}

@media only screen and (min-width: 1140px) {
    /* 1140 */
	
	/*-------------------------------------------------------*/
	/* Swiper: 1140
	/*-------------------------------------------------------*/
	.rfa-chap-sect-wrapper .swiper-slide-prev, 
	.rfa-chap-sect-wrapper .swiper-slide-next {
		height: 70%;
	}
	.swiper-slide h3 {
		width: 390px;
	}
	.rfa-chap-sect-slide h3 {
		font-size: 45px;
	}
	
	/*-------------------------------------------------------*/
	/* Chapter Content: 1140
	/*-------------------------------------------------------*/
	.chaptercontent--paragraph {
		width: 550px;
	}
	
}

@media only screen and (min-width: 1440px) {
    /* 1440 */
}

@media only screen and (min-width: 1662px) {
    /* 1662px */
	
	/*-------------------------------------------------------*/
	/* Homepage: 1662
	/*-------------------------------------------------------*/
	.rfa-sl-container-start h1 {
		font-size: 94.5px;
	}
	.rfa-sl-container-start h1, .rfa-sl-container-start p, .hp-cta-wrapper {
		width: 590px;
	}
}
</style>
</head>
<body>
  <!-- Rotate Device -->
		<div class="rotate-device-wrapper">
			<p>Please</p>
			<p>Rotate Your Device</p>
			<div class="rotate_icon">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.13 272.53">
				  <path d="M23.4 73.68C45 36.31 84 10.31 127 7.31c45-3 88 16 115 54 21 31 29 67 21.2 102.41M7.82 151.43A129.86 129.86 0 0 1 7 136.81M19.35 192.07a129.21 129.21 0 0 1-6.44-16.47M42 225.31a130.4 130.4 0 0 1-14-17.79M78.3 252.49a128.31 128.31 0 0 1-18.52-11.38M122.61 265.53a129.41 129.41 0 0 1-20.38-3.86M177.55 259.49a130 130 0 0 1-16.82 4.42M224.71 231.42a129.58 129.58 0 0 1-16.83 13.25M255 188.61a129.88 129.88 0 0 1-12.81 22.76" fill="none" stroke="#14051f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14"/>
				  <path fill="none" stroke="#14051f" stroke-linecap="round" stroke-linejoin="round" stroke-width="14" d="M88 75.31H22v-66"/>
				</svg>
			</div>
		</div>
		
    	<!-- Hamburger Icon -->
		<div id="sliiider-toggle" class="fan-rfa--hamburger-icon">
			<svg data-name="hamburger Menu Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 321.5">
				<rect width="448" height="65" rx="32" ry="32"/>
				<rect y="127.5" width="448" height="65" rx="32" ry="32"/>
				<rect y="256.5" width="448" height="65" rx="32" ry="32"/>
			</svg>
		</div>
		
		<!-- Drop down Menu -->
		<div class="sliding-menu">
			<!-- Close drop down menu -->
			<div class="drop-down-menu--close slider-exit">
				<svg data-name="Close Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 336.16 336.16">
					<rect x="-55.92" y="135.58" width="448" height="65" rx="32" ry="32" transform="rotate(-45 168.08 168.079)"/>
					<rect x="-55.92" y="135.58" width="448" height="65" rx="32" ry="32" transform="rotate(45 168.079 168.08)"/>
				</svg>
			</div>
			
			<h3>Chapters</h3>
			<a href="index.html#blackPanther"><p>Black Panther</p></a>
			<a href="index.html#storm"><p>Wakanda</p></a>
			<a href="index.html#lukeCage"><p>T’Challa’s Look</p></a>
			<a href="index.html#bishop"><p>Wakandan Wardrobe</p></a>
			<a href="index.html#blade"><p>Beyond Black Panther</p></a>
			<div class="social-grp">
				<a href="#">
					<svg id="" class="rfa-fb-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.71 36.71">
					  <title>FB</title>
					  <path id="Facebook" d="M36.71,34.68a2,2,0,0,1-2,2H25.33V22.49H30.1L30.82,17H25.33V13.42c0-1.61.45-2.7,2.75-2.7H31v-5a41.29,41.29,0,0,0-4.28-.22c-4.23,0-7.12,2.59-7.12,7.33V17H14.82v5.54h4.79V36.71H2a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0H34.69a2,2,0,0,1,2,2Z" fill="#ffffff"/>
					</svg>
				</a>
				
				<a href="#">
					<svg id="" class="rfa-tw-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.45 31.21">
					  <title>TW</title>
					  <path id="Twitter" d="M36.42.58a15.43,15.43,0,0,1-4.88,1.91A7.59,7.59,0,0,0,25.93,0a7.78,7.78,0,0,0-7.68,7.88,7.5,7.5,0,0,0,.2,1.79A21.63,21.63,0,0,1,2.61,1.44a8,8,0,0,0-1,4A7.9,7.9,0,0,0,5,12,7.67,7.67,0,0,1,1.5,11v.1A7.83,7.83,0,0,0,7.67,18.8a7.09,7.09,0,0,1-2,.28,7.67,7.67,0,0,1-1.45-.14,7.71,7.71,0,0,0,7.18,5.47,15.21,15.21,0,0,1-9.55,3.37A13.84,13.84,0,0,1,0,27.67a21.32,21.32,0,0,0,11.78,3.54c14.13,0,21.86-12,21.86-22.42,0-.34,0-.68,0-1a15.51,15.51,0,0,0,3.83-4.08A14.52,14.52,0,0,1,33,4.93,7.8,7.8,0,0,0,36.42.58Z" fill="#ffffff"/>
					</svg>
				</a>
			</div>
		</div>
		
       <!-- Slider -->
        <div class="swiper-container rfa-slide-container rfa-slide-container--chapter-select">

			<!-- Slide Content -->
			<div class="swiper-wrapper rfa-chap-sect-wrapper">
				<!-- Slides -->
				<div id="rfaCover" class="swiper-slide slide__chap0" data-hash="">
					<div class="rfa-sl-container-start">
						<h1>The World of Black Panther</h1>
						<p class="subText">Tribalism Meets Technology</p>
						<p class="author">Written by  Karla Clark <br>and Lawrence Yee</p>

						<div class="hp-cta-wrapper">
							<a data-menuanchor="firstPage" class="chap-btn--a" href="index.html#blackPanther">
								<button class="rfa-hp-btn" data-text="">
									<span>Start Reading </span>
									<div class="cta-arrow">
										<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 627.2 227.4" xml:space="preserve" enable-background="new 0 0 627.2 227.4"><style type="text/css">
											.st0{fill:#f5f5f5;}
										</style><line class="st0" x1="14.1" y1="113.7" x2="613.2" y2="113.7"/><path d="M613.2 127.8H14.1c-7.8 0-14.1-6.3-14.1-14.1s6.3-14.1 14.1-14.1h599.1c7.8 0 14.1 6.3 14.1 14.1S620.9 127.8 613.2 127.8z"/><line class="st0" x1="513.6" y1="14.1" x2="613.2" y2="113.7"/><path d="M613.2 127.7c-3.6 0-7.2-1.4-9.9-4.1L503.6 24c-5.5-5.5-5.5-14.4 0-19.9 5.5-5.5 14.4-5.5 19.9 0l99.6 99.6c5.5 5.5 5.5 14.4 0 19.9C620.4 126.4 616.8 127.7 613.2 127.7z"/><line class="st0" x1="613.2" y1="113.7" x2="513.6" y2="213.3"/><path d="M513.6 227.4c-3.6 0-7.2-1.4-9.9-4.1 -5.5-5.5-5.5-14.4 0-19.9l99.6-99.6c5.5-5.5 14.4-5.5 19.9 0 5.5 5.5 5.5 14.4 0 19.9l-99.6 99.6C520.8 226 517.2 227.4 513.6 227.4z"/></svg>
									</div>
								</button>
							</a>
						</div>
						<div class="rfa-sl-container-start--bkg-img"></div>
					</div>
				</div>
				
				<div class="swiper-slide rfa-chap-sect-slide slide__chap1" data-hash="blackPanther">
					<div class="slide-cover"></div>
					<h3>Black Panther</h3>
					
					<a class="chap-btn--a" href="chapter1.html">
						<button class="button button--winona button--border-thin button--round-s" data-text="Read Chapter">
							<span>Read Chapter</span>
						</button>
					</a>
				</div>
				<div class="swiper-slide rfa-chap-sect-slide slide__chap2" data-hash="storm">
					<div class="slide-cover"></div>
					<h3>WAKANDA</h3>
					
					<a class="chap-btn--a" href="chapter1.html">
						<button class="button button--winona button--border-thin button--round-s" data-text="Read Chapter">
							<span>Read Chapter</span>
						</button>
					</a>
				</div>
				<div class="swiper-slide rfa-chap-sect-slide slide__chap3" data-hash="lukeCage">
					<div class="slide-cover"></div>
					<h3>HOW TRADITION AND FUTURISM INSPIRE T’CHALLA’S LOOK</h3>
					
					<a class="chap-btn--a" href="chapter1.html">
						<button class="button button--winona button--border-thin button--round-s" data-text="Read Chapter">
							<span>Read Chapter</span>
						</button>
					</a>
				</div>
				<div class="swiper-slide rfa-chap-sect-slide slide__chap4" data-hash="bishop">
					<div class="slide-cover"></div>
					<h3>WHAT INSPIRES THE WAKANDAN WARDROBE</h3>
					
					<a class="chap-btn--a" href="chapter1.html">
						<button class="button button--winona button--border-thin button--round-s" data-text="Read Chapter">
							<span>Read Chapter</span>
						</button>
					</a>
				</div>
				<div class="swiper-slide rfa-chap-sect-slide slide__chap5" data-hash="blade">
					<div class="slide-cover"></div>
					<h3>AFROCENTRIC AESTHETICS BEYOND BLACK PANTHER</h3>
					
					<a class="chap-btn--a" href="chapter1.html">
						<button class="button button--winona button--border-thin button--round-s" data-text="Read Chapter">
							<span>Read Chapter</span>
						</button>
					</a>
				</div>
			</div>

			<!-- If we need pagination -->
			<div id="rfaPagePagination" class="swiper-pagination hide-swiper-pagination"></div>
		</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/sliiide.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
      <script>
$(document).ready(function () {

  "use strict";

  $('body').removeClass('fade-out');

  /* Drop down menu
  -------------------------------------------------------*/
  var menu = $('.sliding-menu').sliiide({
    place: 'top',
    toggle: '#sliiider-toggle',
    exit_selector: ".slider-exit",
    animation_duration: "0.9s",
    animation_curve: "cubic-bezier(0.23, 1, 0.32, 1)",
    body_slide: false,
    no_scroll: true,
    auto_close: true });

  menu.activate();
  menu.deactivate();


  /* Swiper Slides 1
  -------------------------------------------------------*/
  var mySwiper = new Swiper('.rfa-slide-container--chapter-select', {
    direction: 'horizontal',
    keyboardControl: true,
    paginationType: 'bullets',
    pagination: '.swiper-pagination',
    paginationClickable: true,
    breakpoints: {
      320: {
        slidesPerView: 1,
        spaceBetween: 0,
        centeredSlides: false },

      414: {
        slidesPerView: 1,
        spaceBetween: 0,
        centeredSlides: false },

      1024: {
        //slidesPerView: 2.2,
        slidesPerView: 'auto',
        spaceBetween: 50,
        centeredSlides: true },

      2560: {
        //slidesPerView: 2.2,
        slidesPerView: 'auto',
        spaceBetween: 50,
        centeredSlides: true } },



    mousewheelControl: true,
    spaceBetween: 0,

    hashnav: true,
    hashnavWatchState: true,

    'onInit': function () {
      console.log('Hey Guys');
    } });

  /* Swiper Slides 2
  -------------------------------------------------------*/
  var mySwiperTwo = new Swiper('.rfa-slide-container--chapter', {
    slidesPerView: 1,
    direction: 'horizontal',
    keyboardControl: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    mousewheelControl: true,
    spaceBetween: 0,
    hashnav: true,
    hashnavWatchState: true });


  /* Swiper Two-way Nav Control
  -------------------------------------------------------*/
  var slideLinks = new Swiper('.slide-links-container', {
    direction: 'horizontal',
    spaceBetween: 0,
    centeredSlides: true,
    slidesPerView: 1,
    effect: 'fade',
    fade: { crossFade: true } });

  mySwiperTwo.params.control = slideLinks;
  slideLinks.params.control = mySwiperTwo;




  mySwiper.on('onSlideChangeStart', function () {

    if (mySwiper.activeIndex > 0) {
      $('#rfaPagePagination').
      removeClass('hide-swiper-pagination').
      addClass('add-swiper-pagination');


    } else {
      $('#rfaPagePagination').
      addClass('hide-swiper-pagination').
      removeClass('add-swiper-pagination');
    }
  });

  /* Mobile Detect
     -------------------------------------------------------*/
  if (/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent || navigator.vendor || window.opera)) {
    $('html').addClass('mobile');
  } else
  {
    $('html').removeClass('mobile');

    mySwiper.on('onSlideChangeStart', function () {

      if (mySwiper.activeIndex > 0) {
        $('#rfaCover').
        removeClass('show-cover').
        addClass('hide-cover');
      } else {
        $('#rfaCover').
        addClass('show-cover').
        removeClass('hide-cover');
      }
    });
  }
});
    </script>
</body>
</html>

2. By Greg Klein

Made by Greg Klein. Simple JavaScript Sliding menu with Icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Oleo+Script);
div {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #2c3e50;
  font-family: "Open Sans", sans-serif;
  color: #fff;
}

h1 {
  padding: 0 20px;
  font-family: "Oleo Script", sans-serif;
  font-size: 4em;
  border-top: 5px solid;
  border-bottom: 5px solid;
}

a {
  text-decoration: none;
  color: inherit;
}

.fadeInDown {
  opacity: 1 !important;
  transform: translateY(40px) !important;
}

#menu-btn {
  position: absolute;
  top: 50px;
  right: 20px;
  padding: 10px 20px;
  border: 1px solid transparent;
  /* To avoid icon movement on hover */
  font-weight: 300;
  user-select: none;
  transition: border-color 0.3s;
  transform: translateY(-50%);
}
#menu-btn i {
  margin-left: 10px;
}
#menu-btn:hover {
  cursor: pointer;
  border-color: #fff;
}

#menu__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 9999;
  background-color: #152A38;
  box-shadow: -2px 2px 20px rgba(0, 0, 0, 0.5);
  user-select: none;
  transform: translateX(300px);
  transition: transform 0.5s;
}

.menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  top: 40px;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item {
  width: 100%;
  height: 60px;
  opacity: 0;
  transform: translateY(0);
  transition: all 0.3s;
}
.menu-item:hover {
  background-color: #29435C;
}
.menu-item i {
  margin: 0 10px;
}
.menu-item a {
  display: inline-block;
  width: 100%;
  height: 70px;
  padding-left: 50px;
  line-height: 70px;
}

.menu__close {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  transition: transform 0.5s;
}
.menu__close:hover {
  cursor: pointer;
}
</style>
</head>
<body>
  <div id="menu-btn" onClick="showMenu(true)">MENU<i class="fa fa-bars"></i></div>
<h1>Sliding Menu</h1>
<div id="menu__panel">
  <i id="menu__close" class="menu__close fa fa-angle-left fa-2x" onClick="showMenu(false)"></i>
  <ul class="menu">
    <li class="menu-item"><a href="#home"><i class="fa fa-home fa-2x"></i>HOME</a></li>
    <li class="menu-item"><a href="#team"><i class="fa fa-users fa-2x"></i>TEAM</a></li>
    <li class="menu-item"><a href="#products"><i class="fa fa-cubes fa-2x"></i>PRODUCTS</a></li>
    <li class="menu-item"><a href="#pricing"><i class="fa fa-shopping-cart fa-2x"></i>PRICING</a></li>
    <li class="menu-item"><a href="#contact"><i class="fa fa-envelope fa-2x"></i>CONTACT</a></li>
  </ul>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script>
function showMenu(menu) {

  var angle = '0deg',
  slide = '300px';

  if (menu) {
    angle = '180deg';
    slide = '0';
  }

  // Slide panel
  $("#menu__panel").css({
    transform: "translateX(" + slide + ")" });


  // Rotate icon
  setTimeout(function () {
    $("#menu__close").css({
      transform: "rotate(" + angle + ")" });

  }, 300);

  // Animate menu items
  $(".menu-item").each(function (i) {
    var row = $(this);
    setTimeout(function () {
      menu && row.addClass('fadeInDown');
      !menu && row.removeClass('fadeInDown');
    }, 100 * i);
  });

}
    </script>
</body>
</html>

3. By Romain Chemartin

Made by Romain Chemartin. Responsive Sliding menu with Icon animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
.sliding-navbar{
    position: absolute;
    top:0;
    left:-400px;
    height: 100vh;
    width: 400px;
    background: #333;
    transition: left 0.8s ease-in-out;
    z-index: 300;
}
.sliding-navbar--open{
    left: 0px;
}
.mask{
    position:absolute;
    top: 0px;
    left:0px;
    height: 100vh;
    width:100%;
    background: #333;
    opacity:0.8;
    z-index: -100;
}
.show{
    z-index: 200;
}
.brand{
    text-decoration: none;
    color: #fff;
    display: block;
    width: 140px;
    margin: 20px auto 0 auto;
    font-family:sans-serif;
    transition: color 0.2s ease-in-out;
}
.brand:hover{
    color: #ccc;
}
.navbar--items{
    list-style-type: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.navbar--item{
    margin: 20px;
    letter-spacing: 1px;
    color: white;
    font-family:sans-serif;
    text-transform: uppercase;
}
.hamburger-menu {
    z-index: 999;
    position: absolute;
    top: 30px;
    right: 30px;
    margin: auto;
    width: 40px;
    height: 30px;
    cursor: pointer;
}
.hamburger {
    position: relative;
    transform: translateY(10px);
    background: white;
    transition: all 0ms 300ms;
}
.hamburger,
.hamburger:after,
.hamburger:before {
    width: 40px;
    height: 3px;
}
.hamburger:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    background: white;
    transition: bottom 0.3s ease-in-out;
}
.hamburger:after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    background: white;
    transition: top 0.3s ease-in-out;
}
.menu-opened:before {
    bottom: 3px;
    transition: bottom 0.3s ease-in-out;
}
.menu-opened:after {
    top: 3px;
    transition: top 0.3s ease-in-out;
}
/* useless shit */
*{
    margin:0;
    padding:0;
}
.main-content{
    height:100vh;
    min-width:100%;
    background: linear-gradient(45deg, #FEAC5E,#C779D0,#4BC0C8 );
}
.desc{
    color: white;
    font-family:sans-serif;
    font-weight:bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
        position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>
  <div class="hamburger-menu">
  <div class="hamburger"></div>
</div>
<navbar class="sliding-navbar">
  <a href="http://romainchemartin.com" class="brand">Romain Chemartin</a>
  <ul class="navbar--items">
    <li class="navbar--item">Item 1</li>
    <li class="navbar--item">Item 2</li>
    <li class="navbar--item">Item 3</li>
  </ul>
</navbar>
<div class="mask"></div>
<section class="main-content">
  <div class="content-wrapper">
    <p class="desc">Sliding menu</p>
  </div>
</section>
</body>
  <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
      <script>
$(function () {
  $('.hamburger-menu').click(function () {
    $('.sliding-navbar').toggleClass('sliding-navbar--open');
    $('.mask').toggleClass('show');
    $('.hamburger').toggleClass('menu-opened');
  });

  $('.mask').click(function () {
    $('.sliding-navbar').toggleClass('sliding-navbar--open');
    $('.mask').removeClass('show');
    $('.hamburger').toggleClass('menu-opened');
  });
});
    </script>
</body>
</html>

4. By Aaron Fischer

Made by Aaron Fischer. Slide Out mobile Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/* STYLES */
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: 1px;
  font-size: 16px;
}

h2 {
  font-weight: 200;
}

.slideItWrapper {
  position: relative;
}

.slideIt {
  left: 8px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  background-color: #7E64BF;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 40px;
  position: relative;
}
.slideIt span {
  font-size: 20px;
  left: 6px;
  top: -3px;
  position: absolute;
  text-align: center;
  text-indent: -9999px;
  display: block;
  height: 100%;
  width: 100%;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  height: 100%;
  left: 0;
  overflow: hidden;
  background-image: url("http://purplerockscissors.com/wp-content/themes/prpl/images/casestudies/bg-controls.png");
  background-size: 150%;
  background-position: 4px 7px;
}
.slideIt span.open {
  background-position: 4px 7px;
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.slideIt span.close {
  background-position: -19px 7px;
  opacity: 0;
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}
.slideIt.active .close {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.slideIt.active .open {
  opacity: 0;
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}
.slideIt:before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -13px;
  top: 10px;
  border-top: 5px solid transparent;
  border-right: 10px solid #7E64BF;
  border-bottom: 5px solid transparent;
}
.slideIt:hover:before {
  left: -9px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

section {
  width: 500px;
  margin: 0 auto;
}

/* REQUIRED */
#pageslide {
  /* These styles MUST be included. Do not change. */
  display: none;
  position: absolute;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  /* Specify the width of your pageslide here */
  width: 240px;
  /* styles */
  background: #7E64BF;
  left: -240px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#pageslide h3 {
  font-size: 1.8em;
  margin: 0;
  padding: 20px;
  font-weight: 300;
  color: #fff;
}
#pageslide ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#pageslide li a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  line-height: 3.5;
  padding: 0 20px;
  cursor: pointer;
  border-bottom: 1px solid #594786;
  text-decoration: none;
}
#pageslide li a:hover {
  background: #6E58A6;
}
</style>
</head>
<body>
  <div class="wrapper">
<div class="slideItWrapper">
  <a href="#modal" class="slideIt">
    <span class="open">open</span>
    <span class="close">close</span>
  </a>
</div>
<section>
  <h2>Hello World!</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p>
</section>
<aside id="pageslide">
<div id="modal">
  <h3>Menu!</h3>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
  <a class="close" href="#">Close</a>
</div>
</aside>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  var slideWidth = $('#pageslide').outerWidth(); //grab width of the sliding menu so that this can be controlled in the css only

  $('.slideIt, #pageslide a.close').on("click", function () {//click function
    $('.slideIt').toggleClass('active'); //toggle the active close vs open icon

    if ($('#pageslide').is(':visible')) {//if visible then hide it 
      $('#pageslide').animate({
        left: '-' + slideWidth },
      400, function () {
        $('#pageslide').hide();
      });
      $('.wrapper').animate({
        marginLeft: '0' },
      400);
      $('.slideIt span').text('☰');
    } else
    {//else show it
      $('#pageslide').show().animate({
        left: '0' },
      400);
      $('.wrapper').animate({
        marginLeft: slideWidth },
      400);
    }
  });

});
    </script>
</body>
</html>

5. By Sikriti Dakua

Made by Sikriti Dakua. Javascript Sliding menu with Wave animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
  
<style>
* {
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
	background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
	
}

nav {
    overflow: hidden;
    position: relative;
    transform: translateX(-300px);
    height: 100%;
    width: 400px;
    transition: all 800ms cubic-bezier(.8, 0, .33, 1);
    border-radius: 0% 0% 100% 50%;
}

nav.nav-open {
    transform: translateX(0px);
    border-radius: 0% 0% 0% 0%;
	 background: rgba(255, 255, 255, 0.6);
}

nav .menu-btn {
    position: absolute;
    top: 10%;
    right: 5%;
    padding: 0;
    width: 30px;
    cursor: pointer;
    z-index: 2;
}

nav .menu-btn .line {
    padding: 0;
    width: 30px;
    background: #fff;
    height: 2px;
    margin: 5px 0;
    transition: all 700ms cubic-bezier(.9, 0, .33, 1);
}

nav .menu-btn .line.line--1 {
    width: 30px;
    transform: rotate(0) translateY(0);
}

nav .menu-btn .line.line--1.line-cross {
    width: 30px;
    transform: rotate(45deg) translateY(10px);
	 background: rgba(0,0,0,0.6);
}

nav .menu-btn .line.line--2 {
    width: 28px;
    transform: translateX(0);
}

nav .menu-btn .line.line--2.line-fade-out {
    width: 28px;
    transform: translate(30px);
    opacity: 0;
}

nav .menu-btn .line.line--3 {
    width: 20px;
    transform: rotate(0) translateY(0);
}

nav .menu-btn .line.line--3.line-cross {
    width: 30px;
    transform: rotate(-45deg) translateY(-10px);
	 background: rgba(0,0,0,0.6);
}

nav .nav-links {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 900ms cubic-bezier(.9, 0, .33, 1);
}

nav .nav-links.fade-in {
    opacity: 1;
    transform: translateX(0px);
}

nav .nav-links .link {
    margin: 20px 0;
    text-decoration: none;
    font-family: sans-serif;
    color: rgba(0,0,0,0.9);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
    transition: all 300ms cubic-bezier(.9, 0, .33, 1);
}

nav .nav-links .link:hover {
    color: rgba(0, 0, 0, .5);
}


.inform{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, 0.8);
	font-size: 2rem;
	font-family: sans-serif;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
}
a{
	margin: 0 20px;
	color: #fff;
	font-size: 2rem;
	transition: all 400ms ease;
}

a:hover{
	color: #222;
}
</style>
</head>
<body>
  <nav>
	<div class="menu-btn">
		<div class="line line--1"></div>
		<div class="line line--2"></div>
		<div class="line line--3"></div>
	</div>

	<div class="nav-links">
		<a href="" class="link">Home</a>
		<a href="" class="link">Contact</a>
		<a href="" class="link">Profile</a>
		<a href="" class="link">About</a>
	</div>
</nav>


<div class="inform">
	Sliding Menu
</div>

<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>
      <script>
var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('nav .menu-btn .line--1');
var lineTwo = document.querySelector('nav .menu-btn .line--2');
var lineThree = document.querySelector('nav .menu-btn .line--3');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
  nav.classList.toggle('nav-open');
  lineOne.classList.toggle('line-cross');
  lineTwo.classList.toggle('line-fade-out');
  lineThree.classList.toggle('line-cross');
  link.classList.toggle('fade-in');
});
    </script>
</body>
</html>

6. By Yago EstΓ©vez

Made by Yago EstΓ©vez. Easy Sliding Menu with Animated Button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
/*
 * MENU BUTTON
 */
@import url("https://fonts.googleapis.com/css?family=K2D");
.menu__toggler {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {
  position: absolute;
  content: "";
  width: 28px;
  height: 2.5px;
  background: #fafafa;
  border-radius: 20px;
  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before {
  top: -8px;
}
.menu__toggler span::after {
  top: 8px;
}
.menu__toggler.active > span {
  background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {
  background: #005c9c;
  top: 0px;
}
.menu__toggler.active > span::before {
  transform: rotate(-225deg);
}
.menu__toggler.active > span::after {
  transform: rotate(225deg);
}

/*
 * SLIDING MENU PANEL
 */
.menu {
  position: absolute;
  left: -30%;
  z-index: 998;
  color: #005c9c;
  background: rgba(250, 250, 250, 0.7);
  -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  width: 30%;
  height: 100%;
  padding: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
}
@media only screen and (max-width: 600px) {
  .menu {
    width: 250px;
    left: -250px;
    padding: 50px;
  }
}
.menu.active {
  left: 0;
}
.menu p {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/*
 * BASIC STYLES
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: linear-gradient(280deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
  font-family: "K2D", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #fafafa;
  mix-blend-mode: overlay;
}

.twitter {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
}
</style>
</head>
<body>
  <!-- Menu elements-->
<div class="menu">
  <p>Section #1</p>
  <p>Section #2</p>
  <p>Section #3</p>
</div>
<div class="menu__toggler"><span></span></div>
<!-- Basic elements-->
<h1>Easy Sliding Menu</h1><a class="twitter" title="Follow Yago EstΓ©vez on Twitter" alt="Follow Yago EstΓ©vez on Twitter" href="https://twitter.com/yagoestevez/" target="_blank" rel="noopener noreferrer">
  <svg viewBox="0 0 512 512">
    <path fill="#fafafa" d="M459.4 151.7c.3 4.6.3 9.1.3 13.7 0 138.7-105.6 298.5-298.6 298.5A296.5 296.5 0 0 1 0 417a217 217 0 0 0 25.3 1.2c49 0 94.3-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8a111 111 0 0 0 47.4-2 105 105 0 0 1-84.1-103v-1.2c14 7.8 30.2 12.6 47.4 13.3A104.9 104.9 0 0 1 35.7 67.2a298.3 298.3 0 0 0 216.4 109.9 104.9 104.9 0 0 1 179-95.8 206.6 206.6 0 0 0 66.6-25.4 104.7 104.7 0 0 1-46.1 57.8c21-2.3 41.6-8.1 60.4-16.2a225.6 225.6 0 0 1-52.6 54.2z">         </path>
  </svg></a>
      <script>
const toggler = document.querySelector('.menu__toggler');
const menu = document.querySelector('.menu');

/*
 * Toggles on and off the 'active' class on the menu
 * and the toggler button.
 */
toggler.addEventListener('click', () => {
  toggler.classList.toggle('active');
  menu.classList.toggle('active');
});
    </script>
</body>
</html>

7. By Lane Olson

Made by Lane Olson. Simple JavaScript Sliding Navigation, it Displays nested lists of links as a sliding menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<style>
html { height:100% }

body {
  font-family:"Helvetica Neue",sans-serif;
  /* background image from http://photosof.org/ */
  background:url(https://s.cdpn.io/44759/dark_blue_background-wide.jpg) no-repeat top center #343838;
  margin:0;
  padding:2em;
  text-align:center;
  height:100%
}

::selection {
  color:#fff;
  background:#00e2ff
}

h1 {
  color:#fff;
  text-shadow:2px 2px 5px rgba(0,0,0,.5);
  margin:1em 0;
  padding-bottom:.5em;
  font-size:1.75em;
  border-bottom:1px solid rgba(255,255,255,.2);
  display:inline-block;
  position:relative;
}

h1:after {
  content:"";
  position:absolute;
  bottom:-21px;
  left:50%;
  border:10px solid transparent;
  border-top-color:rgba(255,255,255,.2);
}

nav {
  margin:1em auto;
  position:relative;
  max-width:480px;
  text-align:left;
  background: #131515;
}

nav ul {
  padding:0;
  margin:0;
  list-style:none;
  background:#343838;
  transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -webkit-transition:all .3s ease-in-out
}

nav ul li:first-child {
  border-top:0
}

nav ul li {
  display:block;
  border-bottom:1px dotted #000
}

nav ul li:last-child {
  border-bottom-width:0
}

nav ul li a {
  display:block;
  padding:2em;
  white-space:nowrap;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.45)), to(rgba(0,0,0,.65)));
  background-image: -webkit-linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,.65));
  background-image: -moz-linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,.65));
  background-image: -o-linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,.65));
  background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,.65));
  color:#fff;
  font-weight:600;
  text-decoration:none;
  border-left:.5em solid
}

nav ul li a strong {
  float:right;
  font-size:.6em;
  margin-top:.25em
}

nav ul li a.slider-back {
  color:#00e2ff;
  background:rgba(0,0,0,.35);
  text-align:right
}

nav ul li a.slider-back strong {
  float:left
}

nav ul.slider-current {
  left:0;
  display:block
}

nav ul.slider-left { left:-100% }
nav ul.slider-right { left:100% }
nav ul li ul { left:200% }
nav ul li ul.slider-current { left:100% }
nav ul li ul.slider-left { left:0 }
nav ul li ul.slider-right { left:200% }

nav ul li.about a { border-left-color:rgba(0,226,255,.85) }
nav ul li.products a { border-left-color:rgba(0,226,255,.65) }
nav ul li.blog a { border-left-color:rgba(0,226,255,.45) }
nav ul li.resources a { border-left-color:rgba(0,226,255,.3) }
nav ul li.contact a { border-left-color:rgba(0,226,255,.125) }

nav ul li a:hover {
  background:rgba(0,0,0,.35);
  color:#fff;
  border-left-color:#00e2ff
}

@media(min-width: 600px) {
  body { 
    -webkit-box-shadow: inset 0 0 250px rgba(0,0,0,.85);
    -moz-box-shadow: inset 0 0 250px rgba(0,0,0,.85);
    box-shadow:inset 0 0 250px rgba(0,0,0,.85);  
  }
  nav { 
    -webkit-box-shadow: 2px 2px 20px rgba(0,0,0,.95);
    -moz-box-shadow: 2px 2px 20px rgba(0,0,0,.95);
    box-shadow:2px 2px 20px rgba(0,0,0,.95);
  }
}
</style>
</head>
<body>
  <body>
  <h1>Sliding Navigation</h1>
  <nav id="navigation">
    <ul>
        <li class="about"><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Media</a>
                    <ul>
                        <li><a href="#">Brochures</a></li>
                        <li><a href="#">Videos</a></li>
                        <li><a href="#">Downloads</a></li>
                    </ul>
                </li>
                <li><a href="#">Staff</a></li>
            </ul>
        </li>
        <li class="products"><a href="#">Products</a>
            <ul>
                <li><a href="#">Widgets</a></li>
                <li><a href="#">Contraptions</a></li>
                <li><a href="#">Gizmos</a></li>
            </ul>
        </li>

        <li class="resources"><a href="#">Resources</a>
            <ul>
                <li><a href="#">Manuals</a></li>
                <li><a href="#">Knowledgebase</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </li>
        <li class="contact"><a href="#">Contact</a></li>
    </ul>
</nav>
</body>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
;(function ($) {

  // initialize namespace if it doesn't exist
  if (!$.responsive) {
    $.responsive = {};
  };

  $.responsive.slider = function (el, options) {
    // To avoid scope issues, use 'base' instead of 'this'
    // to reference this class from internal events and functions.
    var base = this;

    // Access to jQuery and DOM versions of element
    base.$el = $(el);
    base.el = el;

    // Add a reverse reference to the DOM object
    base.$el.data("responsive.slider", base);

    var currentNav = $('ul:first', base.el);

    var transitionsSupported = false;
    var isCreated = false;
    var isAnimating = false;

    base.init = function () {
      base.options = $.extend({}, $.responsive.slider.defaultOptions, options);

      base.$el.bind("createslider", function () {
        base.create();
      });

      base.$el.bind("destroyslider", function () {
        base.destroy();
      });

      transitionsSupported = Modernizr.csstransitions;

      if (base.options.initPlugin)
      base.create();
    };

    // item - list item containing the sub menu
    base.goToNext = function (item) {
      var currUl = currentNav;
      var nextUl = item.siblings("ul:first");
      var divContainer = false;

      if (!isAnimating)
      {
        isAnimating = true;
        if (nextUl.length < 1)
        {
          divContainer = item.siblings("div");
          nextUl = $("ul:first", divContainer);
        }

        nextUl.prepend('<li><a class="' + base.options.classPrefix + 'back' + '" href="#">' + base.options.backWording + ' ' + item.html() + '</a></li>');
        $('a.' + base.options.classPrefix + 'back' + ' strong', nextUl).html(base.options.prevArrow);

        if (!transitionsSupported)
        {
          nextUl.css("left", nextUl.position().left + "px");
          nextUl.animate({ left: "0" }, base.options.transitionTime, "swing", function ()
          {
            base.switchClassesNext(currUl, nextUl);
            isAnimating = false;
          });
        } else {
          base.switchClassesNext(currUl, nextUl);
          isAnimating = false;
        }

        currentNav = nextUl;
      }
    };

    base.goToParent = function () {

      var currUl = currentNav;
      var prevUl = currUl.parents("ul:first"); // get first parent <ul>
      var moveLeft; // value to animate left to

      if (!isAnimating) {
        isAnimating = true;
        if (!transitionsSupported) {
          if (prevUl.position().left < 0)
          moveLeft = "0";else

          moveLeft = "100%";

          prevUl.css("left", prevUl.position().left + "px");
          prevUl.animate({ left: moveLeft }, base.options.transitionTime, "linear", function ()
          {
            base.switchClassesPrevious(currUl, prevUl);
            isAnimating = false;
          });
        } else {
          base.switchClassesPrevious(currUl, prevUl);
          isAnimating = false;
        }
        currentNav = prevUl;
      }

    };


    base.switchClassesNext = function (current, next) {
      current.removeClass(base.options.classPrefix + 'current');
      current.addClass(base.options.classPrefix + 'left');
      next.addClass(base.options.classPrefix + 'current');
      next.removeClass(base.options.classPrefix + 'right');
      base.$el.height(next.height());
      next.css("left", "");
    };

    base.switchClassesPrevious = function (current, previous) {
      current.removeClass(base.options.classPrefix + 'current');
      current.addClass(base.options.classPrefix + 'right');
      previous.addClass(base.options.classPrefix + 'current').css("left", "");
      previous.removeClass(base.options.classPrefix + 'left').css("left", "");
      current.find("li:first").remove();
      base.$el.height(previous.height());
    };

    base.transitionSupport = function () {
      return true;
      var d = document.createElement("detect"),
      CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
      All = ("transition " + CSSprefix.join("Transition,") + "Transition").split(",");
      for (var n = 0, np = All.length; n < np; n++) {if (window.CP.shouldStopExecution(0)) break;
        if (d.style[All[n]] === "") {
          return true;
        }
      }window.CP.exitedLoop(0);

      return false;
    };

    base.create = function () {

      if (!isCreated) {
        base.$el.css('overflow', 'hidden');

        $('ul', base.el).css({
          'position': 'absolute',
          'width': '100%',
          'top': '0px' });


        base.$el.find("ul:first").addClass(base.options.classPrefix + 'current');

        base.$el.css({
          height: base.$el.find("ul:first").height() });


        $("li", base.el).each(function () {
          if ($(this).children("ul").length > 0 || $(this).children('div').children('ul').length > 0)
          {
            $(this).children("ul", "div").addClass(base.options.classPrefix + 'right');
            $(this).children("a").append('<strong>' + base.options.moreArrow + '</strong>').addClass(base.options.classPrefix + 'more');
          }
        });

        base.$el.on("click", "a." + base.options.classPrefix + 'more', function () {
          base.goToNext($(this));
          return false;
        });

        base.$el.on("click", "a." + base.options.classPrefix + 'back', function () {
          base.goToParent();
          return false;
        });

        isCreated = true;
      }
    };

    base.destroy = function () {
      base.$el.removeAttr('style');
      base.$el.off("click", "**");
      $('.' + base.options.classPrefix + 'current', base.el).removeClass(base.options.classPrefix + 'current');
      $('.' + base.options.classPrefix + 'right', base.el).removeClass(base.options.classPrefix + 'right');
      $('.' + base.options.classPrefix + 'left', base.el).removeClass(base.options.classPrefix + 'left');
      $('.' + base.options.classPrefix + 'more' + ' strong', base.el).remove();
      $('.' + base.options.classPrefix + 'more', base.el).removeClass(base.options.classPrefix + 'more');
      $('ul', base.el).removeAttr('style');
      $('.' + base.options.classPrefix + 'back').parent().remove();
      isCreated = false;
    };

    base.init();
  };

  $.responsive.slider.defaultOptions = {
    classPrefix: 'slider-',
    transitionTime: 200,
    backWording: "Back to",
    moreArrow: "&#x25B6;",
    prevArrow: "&#x25C0;",
    initPlugin: true
    // TODO: Add option for max levels
  };

  $.fn.slider = function (options) {
    return this.each(function () {
      new $.responsive.slider(this, options);
    });
  };

})(jQuery);

$(document).ready(function () {
  $('nav').slider();
});
    </script>
</body>
</html>

8. By LukyVJ

Made by LukyVJ. Small Slide-In Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
* {
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0.02em;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Myriad Pro;
}

/*===============
Flippet Menu 
===============*/
body {
  background: #344a5f;
}

.flippet[data-type*=small-menu-slide] .trigger-menu {
  cursor: pointer;
  width: 3.5em;
  height: 3.3em;
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon {
  margin: 1.4em 1em;
  user-selectable: none;
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 0.25em;
  background: #FF667A;
  border-radius: 3px;
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon:before, .flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon:after {
  border-radius: 3px;
  -webkit-transition: -webkit-transform 0.3s ease;
  -moz-transition: -moz-transform 0.3s ease;
  transition: transform 0.3s ease;
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon:before {
  content: "";
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: -0.5em;
  background: #FF667A;
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon:after {
  content: "";
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: 0.5em;
  background: #FF667A;
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon.close {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  background: transparent;
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon.close:before, .flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon.close:after {
  -webkit-transition: -webkit-transform 0.3s ease;
  -moz-transition: -moz-transform 0.3s ease;
  transition: transform 0.3s ease;
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon.close:before {
  content: "";
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: 0;
  background: #FF667A;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.flippet[data-type*=small-menu-slide] .trigger-menu .three-bars-icon.close:after {
  content: "";
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: 0;
  background: #FF667A;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.flippet[data-type*=small-menu-slide] ul {
  margin: 0;
  padding: 0;
  /*if list*/
  list-style: none;
  width: 10em;
  height: auto;
  position: relative;
  -webkit-transform: translateX(-10em);
  -moz-transform: translateX(-10em);
  -ms-transform: translateX(-10em);
  -o-transform: translateX(-10em);
  transform: translateX(-10em);
  -webkit-transition: -webkit-transform 0.3s ease;
  -moz-transition: -moz-transform 0.3s ease;
  transition: transform 0.3s ease;
}
.flippet[data-type*=small-menu-slide] ul.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.flippet[data-type*=small-menu-slide] ul.active li {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.flippet[data-type*=small-menu-slide] ul li {
  margin: 0;
  padding: 0;
  /*if list*/
  list-style: none;
  padding: 0.5em 1em;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.flippet[data-type*=small-menu-slide] ul li:nth-child(1) {
  -webkit-transition: opacity 0.3s ease 0.125s;
  -moz-transition: opacity 0.3s ease 0.125s;
  transition: opacity 0.3s ease 0.125s;
}
.flippet[data-type*=small-menu-slide] ul li:nth-child(2) {
  -webkit-transition: opacity 0.3s ease 0.25s;
  -moz-transition: opacity 0.3s ease 0.25s;
  transition: opacity 0.3s ease 0.25s;
}
.flippet[data-type*=small-menu-slide] ul li:nth-child(3) {
  -webkit-transition: opacity 0.3s ease 0.375s;
  -moz-transition: opacity 0.3s ease 0.375s;
  transition: opacity 0.3s ease 0.375s;
}
.flippet[data-type*=small-menu-slide] ul li:nth-child(4) {
  -webkit-transition: opacity 0.3s ease 0.5s;
  -moz-transition: opacity 0.3s ease 0.5s;
  transition: opacity 0.3s ease 0.5s;
}
.flippet[data-type*=small-menu-slide] ul li:before {
  content: "";
  width: 0.35em;
  height: 1em;
  background: #FF667A;
  display: block;
  float: left;
  margin-right: 0.5em;
  margin-top: 0.15em;
  -webkit-transition: width 0.2s ease;
  -moz-transition: width 0.2s ease;
  transition: width 0.2s ease;
}
.flippet[data-type*=small-menu-slide] ul li:hover:before {
  width: 1.5em;
}
.flippet[data-type*=small-menu-slide] ul li a {
  color: #eff0f2;
  text-decoration: none;
  line-height: 1.5;
  display: block;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
  <div class="flippet" data-type="small-menu-slide">
<div class="trigger-menu">
  <span class="three-bars-icon"></span></div>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Playlist</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Contact</a></li>
</ul>  
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  /*==============================
    Flippet Small Sliding Menu 
  ===============================*/
  function fliSmallMenu() {
    var $block = $('.flippet[data-type="small-menu-slide"]'),
    $menu = $block.find('ul'),
    $icon = $block.find('.trigger-menu'),
    $bars = $icon.find('span');
    $icon.on('click', function (e) {
      e.preventDefault();
      if ($menu.hasClass('active')) {
        $menu.removeClass('active');
        $bars.removeClass('close');
      } else
      {
        $menu.addClass('active');
        $bars.addClass('close');
      }
    });
  }
  //call the menu function
  fliSmallMenu();
});
    </script>
</body>
</html>