Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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="content">
	<div class="all-menu-stuff">
		<div class="wrap">
			<ul class="menu">
				<li>
					<a class="menu-item home">
	 						<svg class="hamburger" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;">
								<path id="hamburger" d="M71.45,14.19v8.48a1.19,1.19,0,0,1-1.19,1.19H10.65a1.19,1.19,0,0,1-1.19-1.19V14.19A1.19,1.19,0,0,1,10.65,13H70.26A1.19,1.19,0,0,1,71.45,14.19ZM70.26,32H10.65a1.19,1.19,0,0,0-1.19,1.19v8.48a1.19,1.19,0,0,0,1.19,1.19H70.26a1.19,1.19,0,0,0,1.19-1.19V33.19A1.19,1.19,0,0,0,70.26,32Zm0,19H10.65a1.19,1.19,0,0,0-1.19,1.19v8.48a1.19,1.19,0,0,0,1.19,1.19H70.26a1.19,1.19,0,0,0,1.19-1.19V52.19A1.19,1.19,0,0,0,70.26,51Z" />
								<path id="stripe" d="M71.45,33.19v8.48a1.19,1.19,0,0,1-1.19,1.19H10.65a1.19,1.19,0,0,1-1.19-1.19V33.19A1.19,1.19,0,0,1,10.65,32H70.26A1.19,1.19,0,0,1,71.45,33.19Z"/>
								<path id="ex" d="M23.79,26.91l9.75,13.7L23.81,54.09a1.15,1.15,0,0,0,.26,1.6,1.17,1.17,0,0,0,.67.22h9.67a1.17,1.17,0,0,0,.94-.48l4.86-6.73,4.72,6.72a1.16,1.16,0,0,0,1,.49h9.53a1.16,1.16,0,0,0,1.16-1.14,1.17,1.17,0,0,0-.22-.68L46.6,40.5l9.75-13.59a1.15,1.15,0,0,0-.26-1.6,1.13,1.13,0,0,0-.68-.22H46a1.15,1.15,0,0,0-1,.5l-4.78,7-4.9-7a1.16,1.16,0,0,0-1-.49H24.72a1.16,1.16,0,0,0-1.14,1.16A1.17,1.17,0,0,0,23.79,26.91Z" />
							</svg>
					</a>
				</li>
				<li>
					<a class="menu-item user">
						<svg class="person" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;">
							<path id="person" d="M53.84,47.86a9.88,9.88,0,0,1-1,4.81H24.44a9.76,9.76,0,0,1-1-4.81c.08-4.54,4.2-7.65,10-8.81a8.19,8.19,0,0,0,4.84,1.28,8,8,0,0,0,5.06-1.39C49.36,40,53.76,43.17,53.84,47.86ZM45.57,30.92c0,4.24-1.77,7.23-7.32,7.23-5,0-7.32-2.65-7.32-7.23,0-4.17,2.16-7.23,7.32-7.23C43.79,23.69,45.57,27,45.57,30.92ZM38.65,6.38h0c-17.76,0-32.17,14.78-32.17,33h0c0,18.23,14.41,33,32.17,33h0c17.77,0,32.17-14.79,32.17-33h0C70.82,21.16,56.42,6.38,38.65,6.38Zm26.27,33c0,14.89-11.76,27-26.27,27s-26.27-12.07-26.27-27h0c0-14.9,11.76-27,26.27-27S64.92,24.45,64.92,39.38Z"/>
						</svg>
					</a>
				</li>
				<li>
					<a class="menu-item portfolio">
	 						<svg class="folder" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;">
								<path id="folder" d="M70.11,33.17h-3.2V24.09a1.14,1.14,0,0,0-1.13-1.15H40.61a1.14,1.14,0,0,1-.93-.48L35.6,16.69a1.12,1.12,0,0,0-.93-.49H14.27a1.14,1.14,0,0,0-1.14,1.14h0V33.17H9.93a1.14,1.14,0,0,0-1.14,1.14V64.39a1.14,1.14,0,0,0,1.14,1.14H70.11a1.14,1.14,0,0,0,1.14-1.14V34.31a1.14,1.14,0,0,0-1.14-1.14Zm-54.3-4.34H64.23v4.34H15.81Z" />
    					</svg>
					</a>
				</li>
				<li><a class="menu-item chat">
						<svg class="collaborate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;">
							<path id="collaborate" d="M8.75,19.44V54.23a1,1,0,0,0,.95,1.05h9.38l-2.82,5a.51.51,0,0,0,.2.68.49.49,0,0,0,.41,0l15.05-5.76H70.2a1,1,0,0,0,1-1V19.44a1,1,0,0,0-1-1.05H9.8a1,1,0,0,0-1.05.95ZM67.1,51.31H35.92L21,56.91l2.73-5.6H12.57l.17-28.93H67.26Z"/>
						</svg>
					</a>
				</li>
				<li><a class="menu-item contact"><i class="fas fa-envelope"></i></a></li>
			</ul>
		</div>
		<div class="subwrap subwrap1">
			<ul class="submenu menu">
				<li><a class="menu-item one">Item one</a></li>
				<li><a class="menu-item two">Item two</a></li>
				<li><a class="menu-item three">Item three</a></li>
				<li><a class="menu-item four">Item four</a></li>
				<li><a class="menu-item five">Item five</a></li>
				<li><a class="menu-item six">Item six</a></li>
				<li><a class="menu-item seven">Item seven</a></li>
				<li><a class="menu-item eight">Item eight</a></li>
				<li><a class="menu-item nine">Item nine</a></li>
				<li><a class="menu-item ten">Item ten</a></li>
				<li><a class="menu-item eleven">Item eleven</a></li>
				<li><a class="menu-item twelve">Item twelve</a></li>
				<li><a class="menu-item thirteen">Item thirteen</a></li>
				<li><a class="menu-item fourteen">Item fourteen</a></li>
				<li><a class="menu-item fifteen">Item fifteen</a></li>
				<li><a class="menu-item sixteen">Item sixteen</a></li>
			</ul>
		</div>
		<div class="subwrap subwrap2">
			<ul class="submenu menu">
				<li><a class="menu-item seventeen">Item seventeen</a></li>
				<li><a class="menu-item eighteen">Item eighteen</a></li>
				<li><a class="menu-item nineteen">Item nineteen</a></li>
				<li><a class="menu-item twenty">Item twenty</a></li>
			</ul>
		</div>
		<div class="subwrap subwrap3">
			<ul class="submenu menu">
				<li><a class="menu-item one">Item one</a></li>
				<li><a class="menu-item two">Item two</a></li>
				<li><a class="menu-item three">Item three</a></li>
				<li><a class="menu-item four">Item four</a></li>
				<li><a class="menu-item five">Item five</a></li>
				<li><a class="menu-item six">Item six</a></li>
				<li><a class="menu-item seven">Item seven</a></li>
				<li><a class="menu-item eight">Item eight</a></li>
				<li><a class="menu-item nine">Item nine</a></li>
				<li><a class="menu-item ten">Item ten</a></li>
				<li><a class="menu-item eleven">Item eleven</a></li>
				<li><a class="menu-item twelve">Item twelve</a></li>
				<li><a class="menu-item thirteen">Item thirteen</a></li>
				<li><a class="menu-item fourteen">Item fourteen</a></li>
				<li><a class="menu-item fifteen">Item fifteen</a></li>
				<li><a class="menu-item sixteen">Item sixteen</a></li>
				<li><a class="menu-item seventeen">Item seventeen</a></li>
				<li><a class="menu-item eighteen">Item eighteen</a></li>
				<li><a class="menu-item nineteen">Item nineteen</a></li>
				<li><a class="menu-item twenty">Item twenty</a></li>
				<li><a class="menu-item twentyone">Item twenty one</a></li>
				<li><a class="menu-item twentytwo">Item twenty two</a></li>
				<li><a class="menu-item twentythree">Item twenty three</a></li>
				<li><a class="menu-item twentyfour">Item twenty four</a></li>
			</ul>
		</div>
		<div class="subwrap subwrap4">
			<ul class="submenu menu">
				<li><a class="menu-item sixteen">Item sixteen</a></li>
				<li><a class="menu-item seventeen">Item seventeen</a></li>
				<li><a class="menu-item eighteen">Item eighteen</a></li>
				<li><a class="menu-item nineteen">Item nineteen</a></li>
				<li><a class="menu-item twenty">Item twenty</a></li>
			</ul>
		</div>
	</div>

	<div class="page">
		<form name="thisForm">
			<div class="input">
				<label for="name">Name</label>
				<input type="text" name="name" id="name" placeholder="Your name">
			</div>
			<div class="input">
				<label for="email">Email</label>
				<input type="email" name="email" id="email" placeholder="Your email">
			</div>
			<div class="input">
				<label for="phone">Phone</label>
				<input type="tel" name="phone" id="phone" placeholder="Your phone number">
			</div>
			<div class="input">
				<label for="color">Colour</label>
				<input type="color" name="color" id="color" value="#cd58df">
			</div>
			<div class="input">
				<label for="number">Number</label>
				<input type="number" name="number" min="1" max="7" placeholder="Number between 1 and 7">
			</div>
			<div class="input">
				<label for="dob">Date of Birth</label>
				<input type="date" name="dob" id="dob" min="1920-01-01" max="2010-01-01" value="2018-09-26">
			</div>
			<div class="input button">
				<label for="file">Upload</label>
				<input type="file" name="file" id="file">
			</div>
			<div class="input">
				<label for="range">Range</label>
				<input type="range" name="range" id="range" min="0" max="10" step="1" value="4">
			</div>

			<div class="input">
				<label for="time">Time</label>
				<input type="time" name="time" id="time" min="09:00" max="17:00" value="14:15">
			</div>
			<div class="input">
				<label for="week">Week &amp; Year</label>
				<input type="week" name="week" id="week" min="2018-W27" max="2018-W35" value="2018-W34">
			</div>
			<div class="input">
				<label for="month">Month &amp; Year</label>
				<input type="month" name="month" id="month" min="2018-06" max="2018-10" value="2018-09">
			</div>
			<div class="input">
				<label for="datetime-local">Datetime Local</label>
				<input type="datetime-local" name="datetime-local" id="datetime-local" min="2018-06-07T00:00" max="2018-06-14T00:00" value="2018-06-12T19:30">
			</div>

			<div class="input checkbox-group">
				<input type="checkbox" name="checkbox1" id="checkbox1" value="0">
				<label for="checkbox1">Check 1</label>
				<input type="checkbox" name="checkbox2" id="checkbox2" value="1">
				<label for="checkbox2">Check 2</label>
			</div>

			<div class="input radio-group">
				<input type="radio" name="radio" id="radio1" value="1">
				<label for="radio1">Radio 1</label>
				<input type="radio" name="radio" id="radio2" value="2">
				<label for="radio2">Radio 2</label>
				<input type="radio" name="radio" id="radio3" value="3">
				<label for="radio3">Radio 3</label>
			</div>

			<div class="input">
				<label for="search">Search</label>
				<input type="search" name="search" id="search" placeholder="Search here">
			</div>
			<div class="input">
				<label for="url">Website</label>
				<input type="url" name="url" id="url" placeholder="Your web address">
			</div>

			<div class="input">
				<label for="password">Password</label>
				<input type="password" name="password" id="password" minlength="8" placeholder="Enter your password">
			</div>

			<div class="button-group">
				<div class="input button">
					<label for="reset">Reset</label>
					<input type="reset" name="reset" id="reset" value="reset">
				</div>
				<div class="input button">
					<label for="submit">Submit</label>
					<input type="submit" name="submit" id="submit" value="submit">
				</div>
				<div class="input button">
					<label for="button">Button</label>
					<input type="button" name="button" id="button" value="button">
				</div>
			</div>
		</form>
	</div>
</div>
              
            
!

CSS

              
                /*------------------------------------------------------
	page layout stuff
-------------------------------------------------------*/
:root {
	width: 100vw;
	height: 100vh;
	background: #ddd;
	color: #888;
	display: flex;
	justify-content: center;
	font-family: "Rubik", sans-serif;
	font-size: 16px;
	line-height: 20px;

}
@font-face {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
	src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0")
			format("embedded-opentype"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0")
			format("woff2"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0")
			format("woff"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0")
			format("truetype"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular")
			format("svg");
}
body {
	padding: 0;
	margin: 0;
}
.content {
	box-sizing: border-box;
	display: block;
	margin: 40px 117px 40px 40px;
	padding: 60px 100px;
	background: #eee;
}

/*------------------------------------------------------
	links and menus
-------------------------------------------------------*/
a {
	color: #999;
	cursor: pointer;
	transition: 300ms ease;
	-webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0);
}
a:hover {
	color: #ccc;
	background: rgba(0, 0, 0, 0.35);
	transition: 150ms ease;
}
.submenu a:hover {
	color: #ccc;
	background: transparent;
	transition: 150ms ease !important;
}
.wrap,
.subwrap {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	background: #222;
	box-shadow: -3px 0 3px 0 rgba(0, 0, 0, 0.2);
	transition: 500ms cubic-bezier(.71,1.88,.79,.78);
	z-index: 10;
}
.subwrap {
	padding-right: 60px;
	z-index: 9;
	right: -180px;
}
.slider {
	right: 0;
}
.menu {
	list-style: none;
	box-sizing: border-box;
	padding: 10px 0;
	margin: 0;
}
.submenu {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: calc(100vh - 17px);
}
.menu li {
	display: block;
}
.menu-item {
	box-sizing: border-box;
	display: block;
	width: 100%;
	text-align: center;
	padding: 20px 20px;
}
.submenu .menu-item {
	padding: 6px 20px;
}
.submenu li {
	transform: scale(0.875);
	transition: 250ms ease-out;
}
.submenu li:hover {
	transform: scale(1);
	transition: 150ms ease-in;
	background: rgba(0, 0, 0, 0.3);
}
.submenu .menu-item {
	transition: 0s ease-out 300ms;
	transform: translateX(100%);
	color: #2f495e;
}
.slider .submenu .menu-item {
	transform: translateX(0);
	color: #999999;
}
.slider .submenu .menu-item:hover {
	color: #cccccc;
}
/*slider giggle in -------------------------------------------------- */
.slider .submenu li:nth-of-type(1) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 200ms;
}
.slider .submenu li:nth-of-type(2) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 250ms;
}
.slider .submenu li:nth-of-type(3) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 300ms;
}
.slider .submenu li:nth-of-type(4) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 350ms;
}
.slider .submenu li:nth-of-type(5) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 400ms;
}
.slider .submenu li:nth-of-type(6) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 450ms;
}
.slider .submenu li:nth-of-type(7) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 500ms;
}
.slider .submenu li:nth-of-type(8) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 550ms;
}
.slider .submenu li:nth-of-type(9) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 600ms;
}
.slider .submenu li:nth-of-type(10) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 650ms;
}
.slider .submenu li:nth-of-type(11) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 700ms;
}
.slider .submenu li:nth-of-type(12) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 750ms;
}
.slider .submenu li:nth-of-type(13) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 800ms;
}
.slider .submenu li:nth-of-type(14) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 850ms;
}
.slider .submenu li:nth-of-type(15) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 900ms;
}
.slider .submenu li:nth-of-type(16) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 950ms;
}
.slider .submenu li:nth-of-type(17) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1000ms;
}
.slider .submenu li:nth-of-type(18) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1050ms;
}
.slider .submenu li:nth-of-type(19) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1100ms;
}
.slider .submenu li:nth-of-type(20) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1150ms;
}
.slider .submenu li:nth-of-type(21) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1200ms;
}
.slider .submenu li:nth-of-type(22) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1250ms;
}
.slider .submenu li:nth-of-type(23) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1300ms;
}
.slider .submenu li:nth-of-type(24) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1350ms;
}
.slider .submenu li:nth-of-type(25) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1400ms;
}
.slider .submenu li:nth-of-type(26) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1450ms;
}
.slider .submenu li:nth-of-type(27) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1500ms;
}
.slider .submenu li:nth-of-type(28) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1550ms;
}
.slider .submenu li:nth-of-type(29) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1600ms;
}
.slider .submenu li:nth-of-type(30) .menu-item {
    transition: 200ms cubic-bezier(.29,1.05,.7,1.28) 1650ms;
}
/* ------------------------------------------------------------------- */
.morphed,
.morphed:hover {
	background: #2f495e;
	transition: 300ms ease-in;
}
.menu-item:hover svg {
	fill: #ffffff;
}
svg {
	fill: #999999;
	stroke: none;
	stroke-miterlimit: 0;
	transition: 350ms ease-out;
	width: 20px;
}
#ex,
#stripe {
	visibility: hidden;
}
.morphed svg {
	fill: #ffffff;
	transition: 250ms ease-in;
}

/*------------------------------------------------------
	form fields
-------------------------------------------------------*/
input {
	color: #999;
	background: #fdfdfd;
	outline: none;
	height: 2em;
	box-sizing: border-box;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 4px;
	width: 100%;
	font: 16px/20px "Rubik", sans-serif;
	transition: 250ms ease-in;
}
label {
	padding: 0 5px;
}
.input {
	margin: 0 0 0.5em 0;
	width: 100%;
	display: inline-block;
	transition: 350ms ease-out;
}
input:hover,
input:active,
input:focus {
	border: 2px solid rgba(68, 124, 168, 0.5);
	transition: 150ms ease-in;
}
/*------------------------------------------------------
	file uploads
-------------------------------------------------------*/
input[type="file"] {
	position: absolute;
	left: -9999999px;
	height: 1px;
	width: 1px;
}
label[for="file"] {
	display: block;
	box-sizing: border-box;
	height: 40px;
	width: auto;
	padding: 10px 20px;
	margin: 0 5px 20px 0px;
	background: rgb(68, 124, 168);
	color: rgb(255, 255, 255);
	border-radius: 4px;
	text-align: center;
	box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.15);
	transition: 250ms ease-out;
}
label[for="file"]:hover {
	background: rgb(51, 94, 128);
	box-shadow: none;
	transition: 150ms ease-in;
}
/*------------------------------------------------------
	colour picker
-------------------------------------------------------*/
input[type="color"] {
	padding: 0;
	margin: 0 0 -10px 0;
	height: 2em;
	width: 2em;
	overflow: hidden;
	display: inline-block;
	transition: 350ms cubic-bezier(0.92, 0.01, 0.51, 1.95);
	cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}
input[type="color"]:hover {
	border: none;
	transform: scale(1.2);
	border-radius: 35%;
	transition: 200ms cubic-bezier(0.92, 0.01, 0.51, 1.95);
}
/*------------------------------------------------------
	button, submit, and reset
-------------------------------------------------------*/
.button {
	display: inline-block;
	width: auto;
}
.button input,
.button button {
	display: block;
	box-sizing: border-box;
	height: 40px;
	width: auto;
	padding: 5px 20px;
	margin: 0 5px 20px 0px;
	border: none;
	background: rgb(68, 124, 168);
	color: rgb(255, 255, 255);
	box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.15);
	transition: 250ms ease-out;
	cursor: pointer;
}
.button input:hover,
.button button:hover,
.button input:active,
.button button:active {
	background: rgb(51, 94, 128);
	box-shadow: none;
	transition: 150ms ease-in;
	border: none;
	transition: 150ms ease-in;
}
/*------------------------------------------------------
	checkboxes
-------------------------------------------------------*/
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
	position: absolute;
	left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
	cursor: pointer;
	position: relative;
	display: inline-block;
	padding: 6px 5px 10px 35px;
}
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2em;
	height: 2em;
	box-sizing: border-box;
	border: 2px solid rgb(204, 204, 204);
	background: rgb(255, 255, 255);
	border-radius: 4px;
	transition: transform 350ms cubic-bezier(0.92, 0.01, 0.51, 1.95),
		border 350ms ease;
}
input[type="checkbox"]:checked + label:before {
	border: 2px solid rgba(68, 124, 168, 0.5);
}
input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
	font-family: "FontAwesome";
	content: "\f00c";
	position: absolute;
	top: 6px;
	left: 6px;
	font-size: 20px;
	line-height: 20px;
	color: rgb(136, 136, 136);
	transition: all 400ms ease;
	z-index: 0;
}
input[type="checkbox"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}
input[type="checkbox"]:checked + label:after {
	opacity: 1;
	transform: scale(1);
}
input[type="checkbox"] + label:hover:before {
	transition: 200ms ease;
	border: 2px solid rgba(68, 124, 168, 0.5);
}
input[type="checkbox"] + label:active:before,
input[type="checkbox"] + label:focus:before {
	transform: scale(1.2);
	transition: 200ms cubic-bezier(0.92, 0.01, 0.51, 1.95);
	border: 2px solid rgba(68, 124, 168, 0.5);
}
/*------------------------------------------------------
	radios
-------------------------------------------------------*/

input[type="radio"] {
	position: absolute;
	visibility: hidden;
	width: 33.33%;
	height: 2em;
}
input[type="radio"] ~ label {
	width: 33.33%;
	height: 2em;
	text-align: center;
	padding: 5px;
	display: inline-block;
	box-sizing: border-box;
	border: 2px solid rgb(204, 204, 204);
	border-right: none;
	border-radius: 0%;
	margin-right: -4px;
	transition: 200ms ease-out;
	cursor: pointer;
}
input[type="radio"] ~ label:first-of-type {
	border-radius: 4px 0 0 4px;
}
input[type="radio"] ~ label:last-of-type {
	border-right: 2px solid rgb(204, 204, 204);
	border-radius: 0 4px 4px 0;
	margin-right: 0;
}
input[type="radio"] ~ label:hover {
	background: #668299;
	color: #ffffff;
	transition: 200ms ease-in;
}
input[type="radio"] ~ label:active,
input[type="radio"] ~ label:focus {
	transform: scale( 1.03, 1.2);
	background: #447ca8;
	color: #fff;
	transition: 200ms cubic-bezier(0.92, 0.01, 0.51, 1.95);
}
input[type="radio"]:checked + label {
	background: #447ca8;
	color: #fff;
	transition: 150ms ease-out;
}

/*------------------------------------------------------
	range
-------------------------------------------------------*/
input[type="range"] {
	-webkit-appearance: none;
}
input[type="range"]:hover,
input[type="range"]:focus,
input[type="range"]:active {
	border-color: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	animate: 0.2s;
	background: #447ca8;
	border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
	box-shadow: 0 0px 1px 1px rgba(0, 0, 0, 0.15);
	height: 18px;
	width: 18px;
	margin-top: 1px;
	border-radius: 0px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	transition: 250ms ease-out;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #345f82;
	transition: 150ms ease-in;
}
input[type="range"]::-moz-range-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	animate: 0.2s;
	background: #447ca8;
	border-radius: 4px;
}
input[type="range"]::-moz-range-thumb {
	box-shadow: 0 0px 1px 1px rgba(0, 0, 0, 0.15);
	height: 18px;
	width: 18px;
	margin-top: 1px;
	border-radius: 0px;
	background: #ffffff;
	cursor: pointer;
}
input[type="range"]::-ms-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	animate: 0.2s;
	background: #447ca8;
	border-radius: 4px;
	border-color: transparent;
	border-width: 0;
	color: transparent;
}
input[type="range"]::-ms-fill-lower {
	background: #2a6495;
	border-radius: 4;
}
input[type="range"]::-ms-fill-upper {
	background: #3071a9;
	border-radius: 4px;
}
input[type="range"]::-ms-thumb {
	box-shadow: 0 0px 1px 1px rgba(0, 0, 0, 0.15);
	height: 18px;
	width: 18px;
	background: #ffffff;
	cursor: pointer;
}
input[type="range"]:focus::-ms-fill-lower {
	background: #3071a9;
}
input[type="range"]:focus::-ms-fill-upper {
	background: #367ebd;
}

/*------------------------------------------------------
	Media Queries
--------------------------------------------------------*/
/* Phones */
@media only screen and (max-width: 599px) {
	.content {
		margin: 40px 17px 0px 0px;
		padding: 40px 80px;
	}
	/* links and menus */
	a {
		color: #aaaaaa;
		cursor: pointer;
		transition: 300ms ease;
		-webkit-backface-visibility: hidden;
		-webkit-transform: translateZ(0) scale(1.0, 1.0);
		transform: translateZ(0);
	}
	a:hover {
		color: #cccccc;
		background: rgba(0, 0, 0, 0.35);
		transition: 150ms ease;
	}
	
	.wrap,
	.subwrap {
		top: 0;
		right: 0;
		height: auto;
		width: 100%;
		box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.2);
		transition: 500ms ease;
	}
	.subwrap {
		padding-right: 0px;
		padding-top: 60px;
		top: calc(-100% - 60px);
	}
	.slider {
		top: -60px;
	}
	.menu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0;
	}
	.submenu {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 80px 20px 40px;
		height: calc(100vh - 17px);
	}
	.menu li {
		display: block;
	}
	.slider .submenu .menu-item:hover {
		color: #cccccc;
	}
	.submenu .menu-item {
		transform: translateY(100%);
		padding: 10px 20px;
	}
	.slider .submenu .menu-item {
		transform: translateY(0);
	}
}
/* Tablet Portrait */
@media only screen and (min-width: 600px) and (max-width: 899px) {
	.content {
		margin: 20px 97px 20px 20px;
		padding: 50px 80px;
	}
	
	.menu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100% - 17px);
	}
	.submenu {
		display: block;
	}
	
}
/* Short devices and landscape view */
@media only screen and (max-height: 770px) {
	.subwrap3.slider {
		 width: 50%;
	}
}
/* Desktop */
@media only screen and (min-width: 1200px) { 
	.content {
		max-width: 1100px;
	}
}
              
            
!

JS

              
                jQuery(document).ready(function($) {
	function menuslider(menuhandle, menutarget, icon) {
		var svg = menuhandle.find("path:first-of-type");
		var buttonTl = new TimelineMax({ paused: true });
		buttonTl
			.to(svg, 0.2, {
				morphSVG: { shape: "#stripe" },
				ease: Back.easeIn
			})
			.to(svg, 0.3, {
				morphSVG: { shape: "#ex" },
				ease: Back.easeOut
			});

		$(".menu-item").on("click touchstart", function() {
			if (buttonTl.time() > 0) {
				buttonTl.reverse();
			}
		});
		$(menuhandle).on("click touchstart", function(e) {
			e.preventDefault();
			e.stopPropagation();
			$(".slider").removeClass("slider");
			$(".morphed").removeClass("morphed");
			if (buttonTl.time() > 0) {
				buttonTl.reverse();
			} else {
				buttonTl.play(0);
				$(menutarget).addClass("slider");
				$(menuhandle).addClass("morphed");
			}

			$(document).on("click touchstart", function closeMenu(e) {
				if ($(menutarget).has(e.target).length === 0) {
					buttonTl.reverse();
					$(menutarget).removeClass("slider");
					$(".morphed")
						.not(this)
						.removeClass("morphed");
				} else {
					$(document).one("click touchstart", closeMenu);
					buttonTl.reverse();
				}
			});
		});
	}
	menuslider($(".home"), ".subwrap1", $(".hamburger"));
	menuslider($(".user"), ".subwrap2", $(".person"));
	menuslider($(".portfolio"), ".subwrap3", $(".folder"));
	menuslider($(".chat"), ".subwrap4", $(".collaborate"));
});

              
            
!
999px

Console