Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                		<div class="container">
			<div class="menu-btn">
				<span class="top"></span>
				<span class="mid"></span>
				<span class="bot"></span>
			</div>
			<div id="nav">
				<ul class="nav-inner">
					<li>
						<a href="#">about</a>
					</li>
					<li>
						<a href="#">portfolio</a>
					</li>
					<li>
						<a href="#">works</a>
					</li>
					<li>
						<a href="#">Skills</a>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>
				</ul>
			</div>
			<div id="style-box">
				<div class="box-inner">
					<h1>slide toggle menu <span>- chris li</span></h1>
					<ul>
						<li class="leftslide" data-styles="leftslide">left slide</li>
						<li class="fadein" data-styles="fadein">fade in</li>
						<li class="topslide" data-styles="topslide">top slide</li>
						<li class="pushslide" data-styles="pushslide">push slide</li>
					</ul>
				</div>
			</div>
		</div>
              
            
!

CSS

              
                $white:#ffffff;
$black:#000000;
$maincolor:#3BD9B5;
$secondcolor:#6f58ee;

*, *:before, *:after {
	box-sizing:border-box;
}

body,html {
	width: 100%;
	height: 100%;
  font-family: 'Roboto', sans-serif;
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	.menu-btn {
		width: 50px;
		height: 50px;
		position: fixed;
		z-index: 10;
		top: 30px;
		left: 30px;
		cursor: pointer;
		transition: transform .3s ease-in-out;
		&:hover span{
			background-color: lighten($maincolor,15%);
		}
		&.active {
			transform: rotate(180deg);
			span {
				transition: transform .3s ease-in-out,
							opacity .3s ease-in-out;
				&.top {
					transform: rotate(45deg);
					transform-origin: left center;
					top: (50px - 4px)/2 - 14px;
					left: (50px - 40px + (40px/1.6)/2)/2;
				}
				&.mid {
					opacity: 0;
					left: (50px - 40px + (40px/1.6)/2)/2;
				}
				&.bot {
					transform: rotate(-45deg);
					transform-origin: left center;
					top: (50px - 4px)/2 + 14px;
					left: (50px - 40px + (40px/1.6)/2)/2;
				}
			}
		}
		span {
			display: block;
			width: 40px;
			height: 4px;
			background-color: $maincolor;
			position: absolute;
			top: (50px - 4px)/2;
			left: (50px - 40px)/2;
			border-radius: 2px;
			transition: background-color .3s ease-in-out;
			&.top {
				top: (50px - 4px)/2 - 12px;
			}
			&.bot {
				top: (50px - 4px)/2 + 12px;
			}
		}
	}

	#nav {
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		z-index: -1;
		transition: transform .3s ease-in-out,
					opacity .3s ease-in-out;
		&.leftslide {
			width: 250px;
			height: 100vh;
			background-color: $white;
			position: fixed;
			top: 0;
			left: 0;
			transform: translate3d(-300px, 0px, 0px);
		}
		&.fadein {
			width: 100%;
			height: 100vh;
			background-color: $white;
			position: fixed;
			top: 0;
			left: 0;
			text-align: center;
		}
		&.topslide {
			width: 100%;
			height: 100vh;
			background-color: $white;
			position: fixed;
			top: 0;
			left: 0;
			transform: translate3d(0px, -100%, 0px);
			text-align: center;
		}
		&.pushslide {
			width: 250px;
			height: 100vh;
			background-color: $white;
			position: fixed;
			top: 0;
			left: 0;
			transform: translate3d(0px, 0px, 0px);
		}
		&.open {
			transform: translate3d(0px, 0px, 0px);
			opacity: 1;
			z-index: 5;
			transition: transform .3s ease-in-out,
						opacity .3s ease-in-out;
			.nav-inner {
				li {
					animation: fadeInRight .4s ease forwards;
					animation-delay: .3s;
					&:nth-of-type(1) {
						animation-delay: .35s;
					}
					&:nth-of-type(2) {
						animation-delay: .4s;
					}
					&:nth-of-type(3) {
						animation-delay: .45s;
					}
					&:nth-of-type(4) {
						animation-delay: .5s;
					}
					&:nth-of-type(5) {
						animation-delay: .55s;
					}
				}
			}
		}
		.nav-inner {
			li {
				position: relative;
				margin-bottom: 30px;
				opacity: 0;
				transition: transform .3s ease-in-out;
				a {
					display: inline-block;
					height: 100%;
					text-decoration: none;
					color: lighten($black,30%);
					font-size: 30px;
					text-transform: capitalize;
					letter-spacing: 1px;
					font-weight: 800;
					padding: 4px 8px;
					transition: all .2s ease-in-out;
					&:before {
						content: "";
						position: absolute;
						left: -30px;
						top: 50%;
						display: block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background-color: $maincolor;
						opacity: 0;
						transition: all .3s ease-in-out;
					}
					&:hover {
						background-color: $secondcolor;
						color: $white;
						transform: translate3d(15px ,0 ,0);
						&:before {
								content: "";
								left: -15px;
								opacity: 1;
						}
					}
				}
			}
		}
	}


	#style-box {
		width: 100%;
		height: 100vh;
	    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA4MDAgODIzLjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwMCA4MjMuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0MDQxNEI7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTUuMiwxNjljLTAuNCwwLTAuOCwwLTEuMi0wLjFjLTIuMy0wLjMtNC4zLTEuNS01LjctMy4zbC04LjktMTEuN2MtMS40LTEuOC0yLTQuMS0xLjctNi4zCgljMC4zLTIuMywxLjUtNC4zLDMuMy01LjdsMTEuNy04LjljMS44LTEuNCw0LjEtMiw2LjMtMS43YzIuMywwLjMsNC4zLDEuNSw1LjcsMy4zbDguOSwxMS43YzEuNCwxLjgsMiw0LjEsMS43LDYuMwoJYy0wLjMsMi4zLTEuNSw0LjMtMy4zLDUuN2wtMTEuNyw4LjlDNTguOSwxNjguNCw1Ny4xLDE2OSw1NS4yLDE2OXogTTU4LDEzNy4yYy0wLjYsMC0xLjEsMC4yLTEuNiwwLjVsLTExLjcsOC45CgljLTAuNSwwLjQtMC45LDEtMSwxLjdjLTAuMSwwLjcsMC4xLDEuNCwwLjUsMS45bDguOSwxMS43YzAuNCwwLjUsMSwwLjksMS43LDFjMC43LDAuMSwxLjQtMC4xLDEuOS0wLjVsMTEuNy04LjlsMCwwCgljMC41LTAuNCwwLjktMSwxLTEuN3MtMC4xLTEuNC0wLjUtMS45TDYwLDEzOC4yYy0wLjQtMC41LTEtMC45LTEuNy0xQzU4LjIsMTM3LjIsNTguMSwxMzcuMiw1OCwxMzcuMnoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTYwNC43LDUzMi4yYy0wLjUsMC0xLjEtMC4xLTEuNi0wLjJsMCwwbC0xNC41LTIuOGMtNC42LTAuOS03LjctNS40LTYuOC0xMGwyLjgtMTQuNWMwLjktNC42LDUuNC03LjcsMTAtNi44CglsMTQuNSwyLjhjMi4yLDAuNCw0LjIsMS43LDUuNSwzLjZjMS4zLDEuOSwxLjgsNC4yLDEuMyw2LjRsLTIuOCwxNC41Yy0wLjQsMi4yLTEuNyw0LjItMy42LDUuNUM2MDgsNTMxLjcsNjA2LjQsNTMyLjIsNjA0LjcsNTMyLjJ6CgkgTTYwNC4yLDUyNi4xYzAuNywwLjEsMS40LDAsMS45LTAuNGMwLjYtMC40LDEtMSwxLjEtMS42bDIuOC0xNC41YzAuMS0wLjcsMC0xLjQtMC40LTEuOWMtMC40LTAuNi0xLTEtMS42LTEuMWwtMTQuNS0yLjgKCWMtMS40LTAuMy0yLjcsMC42LTMsMmwtMi44LDE0LjVjLTAuMywxLjQsMC42LDIuNywyLDNMNjA0LjIsNTI2LjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMDEuNyw2MDEuOWMtMS43LDAtMy40LTAuNS00LjktMS42Yy0xLjktMS4zLTMuMS0zLjMtMy41LTUuNUw4OCw1NjQuN2MtMC44LTQuNywyLjMtOS4xLDctOS45bDcuNi0xLjMKCWMyLjMtMC40LDQuNSwwLjEsNi40LDEuNGMxLjksMS4zLDMuMSwzLjMsMy41LDUuNWw1LjMsMzAuMWMwLjgsNC43LTIuMyw5LjEtNyw5LjloMGwtNy42LDEuM0MxMDIuNyw2MDEuOCwxMDIuMiw2MDEuOSwxMDEuNyw2MDEuOXoKCSBNMTEwLjMsNTk3LjVMMTEwLjMsNTk3LjVMMTEwLjMsNTk3LjV6IE0xMDQsNTU5LjNjLTAuMSwwLTAuMywwLTAuNSwwbC03LjYsMS4zYy0xLjQsMC4yLTIuMywxLjYtMi4xLDNsNS4zLDMwLjEKCWMwLjEsMC43LDAuNSwxLjMsMS4xLDEuN2MwLjYsMC40LDEuMiwwLjUsMS45LDAuNGw3LjYtMS4zYzEuNC0wLjIsMi4zLTEuNiwyLjEtM2wtNS4zLTMwLjFjLTAuMS0wLjctMC41LTEuMy0xLjEtMS43CglDMTA1LjEsNTU5LjUsMTA0LjUsNTU5LjMsMTA0LDU1OS4zeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzIwLDc0Ny41Yy03LjcsMC0xMy45LTYuMy0xMy45LTEzLjlzNi4zLTEzLjksMTMuOS0xMy45czEzLjksNi4zLDEzLjksMTMuOVM3MjcuNyw3NDcuNSw3MjAsNzQ3LjV6CgkgTTcyMCw3MjUuNmMtNC40LDAtNy45LDMuNi03LjksNy45czMuNiw3LjksNy45LDcuOXM3LjktMy42LDcuOS03LjlTNzI0LjQsNzI1LjYsNzIwLDcyNS42eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjcxLjUsODIuMmMtMTIuMiwwLTIyLTkuOS0yMi0yMnM5LjktMjIsMjItMjJzMjIsOS45LDIyLDIyUzI4My42LDgyLjIsMjcxLjUsODIuMnogTTI3MS41LDQ0LjEKCWMtOC44LDAtMTYsNy4yLTE2LDE2YzAsOC44LDcuMiwxNiwxNiwxNmM4LjgsMCwxNi03LjIsMTYtMTZDMjg3LjUsNTEuMywyODAuMyw0NC4xLDI3MS41LDQ0LjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03NTMuMiwzNjQuMWMtMS4zLDAtMi40LTAuOC0yLjktMi4xYy0zLjctMTEuNCwyLjUtMjMuOCwxNC0yNy41YzExLjQtMy43LDIzLjgsMi41LDI3LjUsMTQKCWMwLjUsMS42LTAuMywzLjMtMS45LDMuOGMtMS42LDAuNS0zLjMtMC4zLTMuOC0xLjljLTIuNy04LjMtMTEuNi0xMi44LTE5LjktMTAuMWMtOC4zLDIuNy0xMi44LDExLjYtMTAuMSwxOS45CgljMC41LDEuNi0wLjMsMy4zLTEuOSwzLjhDNzUzLjksMzY0LDc1My42LDM2NC4xLDc1My4yLDM2NC4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjUzLjQsNzE1LjZjLTAuNiwwLTEuMy0wLjItMS44LTAuNmMtMS4zLTEtMS42LTIuOS0wLjYtNC4yYzIuNS0zLjQsMy42LTcuNSwzLTExLjdjLTAuNi00LjItMi44LTcuOS02LjItMTAuNAoJYy0zLjQtMi41LTcuNS0zLjYtMTEuNy0zYy00LjIsMC42LTcuOSwyLjgtMTAuNCw2LjJjLTEsMS4zLTIuOSwxLjYtNC4yLDAuNmMtMS4zLTEtMS42LTIuOS0wLjYtNC4yYzMuNS00LjcsOC42LTcuNywxNC40LTguNQoJYzUuOC0wLjgsMTEuNSwwLjcsMTYuMiw0LjJjNC43LDMuNSw3LjcsOC42LDguNSwxNC40YzAuOCw1LjgtMC43LDExLjUtNC4yLDE2LjJDMjU1LjIsNzE1LjIsMjU0LjMsNzE1LjYsMjUzLjQsNzE1LjZ6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NzMuNCwzMDEuMWMtMC45LDAtMS44LTAuNC0yLjMtMS4xbC0xOC45LTIzLjdjLTAuOC0wLjktMC45LTIuMy0wLjMtMy4zbDE0LjYtMjYuNWMwLjUtMC45LDEuNC0xLjUsMi40LTEuNQoJYzEtMC4xLDIsMC4zLDIuNiwxLjFsMTguOSwyMy43YzAuOCwwLjksMC45LDIuMywwLjMsMy4zbC0xNC42LDI2LjVjLTAuNSwwLjktMS40LDEuNS0yLjQsMS41QzQ3My42LDMwMS4xLDQ3My41LDMwMS4xLDQ3My40LDMwMS4xegoJIE00NTguMiwyNzQuMWwxNC44LDE4LjZsMTEuNS0yMC44bC0xNC44LTE4LjZMNDU4LjIsMjc0LjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNTAuMywzNTguN2MtMC41LDAtMC45LTAuMS0xLjQtMC4zYy0xLjEtMC42LTEuNy0xLjctMS42LTNsNC00Mi43YzAuMS0xLDAuNy0xLjksMS42LTIuNAoJYzAuOS0wLjUsMS45LTAuNSwyLjgsMGwyOCwxNC43YzAuOSwwLjUsMS41LDEuMywxLjYsMi4zYzAuMSwxLTAuMywyLTEsMi42bC0zMiwyOEMxNTEuOCwzNTguNSwxNTEsMzU4LjcsMTUwLjMsMzU4Ljd6IE0xNTYuOSwzMTcuOAoJbC0yLjksMzAuN2wyMy0yMC4yTDE1Ni45LDMxNy44eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzgxLjgsNTQ5LjRjLTAuMSwwLTAuMiwwLTAuMywwbC0zMS40LTMuMmMtMS0wLjEtMS45LTAuNy0yLjMtMS42cy0wLjUtMS45LDAtMi44bDE5LjMtMzcuOQoJYzAuNi0xLjEsMS43LTEuNywzLTEuNmMxLjIsMC4xLDIuMywxLDIuNiwyLjFsMTIuMSw0MS4xYzAuMywxLDAuMSwyLTAuNiwyLjhDNzgzLjUsNTQ5LDc4Mi42LDU0OS40LDc4MS44LDU0OS40eiBNNzU1LDU0MC42CglsMjIuNiwyLjNsLTguNy0yOS42TDc1NSw1NDAuNnoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTU4My4xLDM3NS42bDcuMiw5LjZjMS4yLDEuNiwzLjgsMS4yLDQuNC0wLjdsNC0xMS43YzAuNi0xLjgtMS0zLjYtMi44LTMuM2wtMTEuMSwyLjEKCUM1ODIuOSwzNzEuOSw1ODIsMzc0LjEsNTgzLjEsMzc1LjZ6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NzcuNSw3NTMuNGMtMC45LDAtMS43LTAuNC0yLjMtMS4xTDQ1NSw3MjguMWMtMC42LTAuOC0wLjktMS44LTAuNi0yLjdzMS0xLjcsMS45LTJsMjgtOS41CgljMS0wLjQsMi4yLTAuMSwzLDAuNmMwLjgsMC43LDEuMiwxLjgsMC45LDIuOWwtNy44LDMzLjhjLTAuMywxLjEtMS4xLDItMi4yLDIuMkM0NzgsNzUzLjQsNDc3LjgsNzUzLjQsNDc3LjUsNzUzLjR6IE00NjIuNCw3MjcuNgoJbDEzLjYsMTYuM2w1LjItMjIuNkw0NjIuNCw3MjcuNnoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTM4MC4zLDU0Ni4xSDM0NWMtMS43LDAtMy0xLjMtMy0zczEuMy0zLDMtM2gzMi4zdi0zMC4zYzAtMS43LDEuMy0zLDMtM3MzLDEuMywzLDN2MzMuMwoJQzM4My4zLDU0NC43LDM4Miw1NDYuMSwzODAuMyw1NDYuMXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTcwMi4zLDEwMC43SDY3N2MtMS4xLDAtMi4xLTAuNi0yLjYtMS42Yy0wLjUtMS0wLjUtMi4xLDAuMS0zLjFsMjUuMy00MGMwLjctMS4xLDIuMS0xLjYsMy40LTEuMwoJYzEuMywwLjQsMi4yLDEuNSwyLjIsMi45djQwQzcwNS4zLDk5LjQsNzA0LDEwMC43LDcwMi4zLDEwMC43eiBNNjgyLjUsOTQuN2gxNi45VjY4LjFMNjgyLjUsOTQuN3oiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTY2My43LDI2MC4xYy0xLjQsMC0yLjctMS0yLjktMi40bC04LTQxLjNjLTAuMy0xLjYsMC43LTMuMiwyLjQtMy41YzEuNi0wLjMsMy4yLDAuNywzLjUsMi40bDgsNDEuMwoJYzAuMywxLjYtMC43LDMuMi0yLjQsMy41QzY2NCwyNjAsNjYzLjksMjYwLjEsNjYzLjcsMjYwLjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NzEuMywxMjMuNGMtMC42LDAtMS4xLTAuMi0xLjctMC41bC0zNC4zLTIyLjdjLTEuNC0wLjktMS44LTIuOC0wLjgtNC4yYzAuOS0xLjQsMi44LTEuOCw0LjItMC44bDM0LjMsMjIuNwoJYzEuNCwwLjksMS44LDIuOCwwLjgsNC4yQzQ3My4yLDEyMi45LDQ3Mi4zLDEyMy40LDQ3MS4zLDEyMy40eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzUzLjIsMzk0LjRsLTcuNS0zLjFjLTEuNi0wLjctMi40LTIuNS0xLjctNC4xbDMuMS03LjVjMC43LTEuNiwyLjUtMi40LDQuMS0xLjdsNy41LDMuMQoJYzEuNiwwLjcsMi40LDIuNSwxLjcsNC4xbC0zLjEsNy41QzM1Ni42LDM5NC4zLDM1NC44LDM5NSwzNTMuMiwzOTQuNHoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTUwMSw2MDQuMmwtNi44LDQuNGMtMS40LDAuOS0zLjQsMC41LTQuMy0wLjlsLTQuNC02LjhjLTAuOS0xLjQtMC41LTMuNCwwLjktNC4zbDYuOC00LjQKCWMxLjQtMC45LDMuNC0wLjUsNC4zLDAuOWw0LjQsNi44QzUwMi45LDYwMS4zLDUwMi41LDYwMy4yLDUwMSw2MDQuMnoiLz4KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjk4IiBjeT0iMjA1LjIiIHI9IjcuNCIvPgo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0MC4zIiBjeT0iNzUwLjQiIHI9IjcuNCIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjgxLDY3OC43Yy0wLjgsMC0xLjYtMC4zLTIuMi0wLjlsLTI1LjMtMjYuN2MtMS4xLTEuMi0xLjEtMy4xLDAuMS00LjJjMS4yLTEuMSwzLjEtMS4xLDQuMiwwLjFsMjUuMywyNi43CgljMS4xLDEuMiwxLjEsMy4xLTAuMSw0LjJDNjgyLjUsNjc4LjQsNjgxLjcsNjc4LjcsNjgxLDY3OC43eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTYuMywyODIuN2MtMS40LDAtMi43LTEtMy0yLjVjLTAuMy0xLjYsMC44LTMuMiwyLjUtMy41bDI0LTRjMS42LTAuMywzLjIsMC44LDMuNSwyLjUKCWMwLjMsMS42LTAuOCwzLjItMi41LDMuNWwtMjQsNEMxNi43LDI4Mi43LDE2LjUsMjgyLjcsMTYuMywyODIuN3oiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTEzNS43LDQ0LjFjLTEuNywwLTMtMS4zLTMtM1YxN2MwLTEuNywxLjMtMywzLTNzMywxLjMsMywzdjI0QzEzOC43LDQyLjgsMTM3LjMsNDQuMSwxMzUuNyw0NC4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTkzLjcsNTAyYy0wLjgsMC0xLjctMC4zLTIuMi0xYy0xLjEtMS4yLTEtMy4xLDAuMy00LjJsMjkuMy0yNmMxLjItMS4xLDMuMS0xLDQuMiwwLjNjMS4xLDEuMiwxLDMuMS0wLjMsNC4yCglsLTI5LjMsMjZDMTk1LjEsNTAxLjgsMTk0LjQsNTAyLDE5My43LDUwMnoiLz4KPC9zdmc+Cg=='),linear-gradient(90deg, #6f58ee 0%, #7434f3 100%);
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 3;
		transition: transform .3s ease-in-out;
		&.leftslide,&.fadein,&.topslide,&.pushslide {
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 5;
				background-color: rgba($black,.3);
			}
		}
		&.pushslide {
			transform: translate3d(250px,0,0);
			transition: transform .3s ease-in-out;
			z-index: 5;
		}
		.box-inner {
			h1 {
				margin-top: 0;
				padding: 10px;
				text-transform: uppercase;
				color: $white;
				span {
					font-style: italic;
					font-size: 20px;
				}
			}
			ul {
				li {
					display: inline-block;
					padding: 10px 15px;
					margin-right: 10px;
					margin-bottom: 10px;
					background-color: $maincolor;
					text-transform: capitalize;
					border-radius: 4px;
					cursor: pointer;
					color: $white;
					border: 2px solid $maincolor;
					transition: background-color .2s ease-in;
					&:last-child {
						margin-right: 0;
					}
					&:hover, &.now {
						background-color: transparent;
					}
				}
			}
		}
	}
}

@keyframes fadeInRight {
  0% {
	    opacity: 0;
	    left: 30px;
	}
  100% {
	    opacity: 1;
	    left: 0px;
	}
}
              
            
!

JS

              
                $(document).ready(function() {

	var $menuBtn = $('.menu-btn');
	var $nav = $('#nav');
	var $stylebox = $('#style-box');
	var $styleli = $stylebox.find('li');

	$menuBtn.on('click', function() {
		var $this = $(this);
		var styles = $stylebox.data('styles');
		$this.toggleClass("active");
		$this.next('#nav').toggleClass("open");
		$stylebox.toggleClass(styles);
	});

	$nav.addClass('leftslide');

	$styleli.on('click', function() {
		var $this = $(this);
		$this.siblings().removeClass('now');
		$this.addClass('now');
		var styles = $this.data('styles');
		$nav.removeClass();
		$nav.addClass(styles);
		$nav.siblings('#style-box').removeClass();
		$nav.siblings('#style-box').data('styles',styles);
	});



});
              
            
!
999px

Console