cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <div class="primary-nav">

	<button href="#" class="hamburger open-panel nav-toggle">
<span class="screen-reader-text">Menu</span>
</button>

	<nav role="navigation" class="menu">

		<a href="#" class="logotype">LOGO<span>TYPE</span></a>

		<div class="overflow-container">

			<ul class="menu-dropdown">

				<li><a href="#">Dashboard</a><span class="icon"><i class="fa fa-dashboard"></i></span></li>

				<li class="menu-hasdropdown">
					<a href="#">Settings</a><span class="icon"><i class="fa fa-gear"></i></span>

					<label title="toggle menu" for="settings">
        <span class="downarrow"><i class="fa fa-caret-down"></i></span>
      </label>
					<input type="checkbox" class="sub-menu-checkbox" id="settings" />

					<ul class="sub-menu-dropdown">
						<li><a href="">Profile</a></li>
						<li><a href="">Security</a></li>
						<li><a href="">Account</a></li>
					</ul>
				</li>

				<li><a href="#">Favourites</a><span class="icon"><i class="fa fa-heart"></i></span></li>

				<li><a href="#">Messages</a><span class="icon"><i class="fa fa-envelope"></i></span></li>

			</ul>

		</div>

	</nav>

</div>

<div class="new-wrapper">

	<div id="main">

		<div id="main-contents">

			<h1>Multi-level Side Navigation</h1>

			<p class="intro"><strong>This is a multi-level side navigation pattern with hover and push</strong>. Hovering over the menu will reveal its lables and clicking the hamburger icon pins the menu open.</p>

			<h2>Checkbox Hack</h2>

			<p>I started by using the checkbox hack but ran into its limitations when I tried to implement the 'push' behaviour. It works for the secondary menus but the input element and its corresponding label can really only affect the adjacent element (i.e. I
				couldn't target the page container to push it over). So, I added...</p>

			<h2>A Touch of jQuery</h2>
			<p>I'm sure this could be done with vanilla javascript, but that is not my strong suit. So here we are. You might be thinking, "Why not just use JQuery for all of the functionality?" Well, you can! Fork it and go nuts! Maybe drop me a line if you do.</p>

			<p class="small"><strong>This is small text</strong>. Lorem Ipsum is simply dummy text from the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
				it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
				and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

		</div>

	</div>

</div>
            
          
!
            
              body {
  font-family: 'Work Sans', sans-serif;
  margin: 0;
  background-color: #eee;
}

/* Layout */

#container {
  padding: 0;
  margin: 0;
  background-color: #fff;
}

#main {
  padding: 4% 1.5em;
  max-width: 55em;
  margin: 0 auto;
}

#header {
  padding: 1.5em;
  margin: 0 0 1em 0;
  background-color: #eee;
}

#footer {
  padding: 1.5em;
  margin: 2em 0 0 0;
  background-color: #eee;

}


/* Menu Styles */

.primary-nav {
	position: fixed;
	z-index: 999;
}

.menu {
	position: relative;
}

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

.open-panel {
  border: none;
  background-color:#fff;
  padding: 0;
}

.hamburger {
	background: #fff;
	position: relative;
	display: block;
	text-align: center;
	padding: 13px 0;
	width: 50px;
  height: 73px;
	left: 0;
  top: 0;
	z-index: 1000;
  cursor: pointer;
}

.hamburger:before {
	content:"\2630"; /* hamburger icon */
	display: block;
  color: #000;
  line-height: 32px;
  font-size: 16px;
}

.openNav .hamburger:before {
	content:"\2715"; /* close icon */
	display: block;
  color: #000;
  line-height: 32px;
  font-size: 16px;
}

.hamburger:hover:before {
  color: #777;
}

.primary-nav .menu li {
	position: relative;
}

.menu .icon {
	position: absolute;
	top: 12px;
	right: 10px;
	pointer-events: none;
  width: 24px;
  height: 24px;
  color: #fff;
}

.menu,
.menu a,
.menu a:visited {
  color: #aaa;
  text-decoration: none!important;
	position: relative;
}

.menu a {
  display: block;
  white-space: nowrap;
  padding: 1em;
  font-size: 14px;
}

.menu a:hover {
	color: #fff;
}

.menu {
	margin-bottom: 3em;
}

.menu-dropdown li .icon {
	color: #777;
}

.menu-dropdown li:hover .icon {
	color: #fff;
}



.menu label {
  margin-bottom: 0;
  display: block;
}

.menu label:hover {
  cursor: pointer;
}

.menu input[type="checkbox"] {
  display: none;
}

input#menu[type="checkbox"] {
  display: none;
}






.sub-menu-dropdown {
	display: none;
}

.new-wrapper {
	position: absolute;
	left: 50px;
  width: calc(100% - 50px);
  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}

#menu:checked + ul.menu-dropdown {
    
		left: 0;
    -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
            animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
}

.sub-menu-checkbox:checked + ul.sub-menu-dropdown {
    display: block!important;
    -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
            animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
}


.openNav .new-wrapper {
  position: absolute;
  transform: translate3d(200px, 0, 0);
  width: calc(100% - 250px);
  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}


.downarrow {
  background: transparent;
	position: absolute;
	right: 50px;
	top: 12px;
  color: #777;
  width: 24px;
  height: 24px;
  text-align: center;
  display: block;
}

.downarrow:hover {
  color: #fff;
}

.menu {
	position: absolute;
	display: block;
	left: -200px;
  top: 0;
	width: 250px;
  transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  background-color: #000;
	z-index: 999;
}

.menu-dropdown {
  top: 0;
  overflow-y: auto;
}

.overflow-container {
  position: relative;
  height: calc(100vh - 73px)!important;
  overflow-y: auto;
  border-top: 73px solid #fff;
  z-index: -1;
  display:block;
}

.menu a.logotype {
  position: absolute!important;
  top: 11px;
  left: 55px;
  display: block;
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  color: #000;
  font-size: 21px;
  padding: 10px;
}

.menu a.logotype span {
  font-weight: 400;
}

.menu a.logotype:hover {
  color: #777;
}

.sub-menu-dropdown {
	background-color: #333;
}

.menu:hover {
	position: absolute;
	left: 0;
	top: 0;
}

.openNav .menu:hover {
	position: absolute;
	left: -200px;
	top 73px;
}

.openNav .menu {
  top 73px;
		transform: translate3d(200px, 0, 0);
    transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}
	
	/* label.hamburger {
		display: none;
	} */













/* look and feel only, not needed for core menu*/

@-webkit-keyframes grow {
	
  0% {
    display: none;
    opacity: 0;
  }
  50% {
    display: block;
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
	
}

@keyframes grow {
	
  0% {
    display: none;
    opacity: 0;
  }
  50% {
    display: block;
    opacity: 0.5;
  }
  100% {
    opacity: 1
  }
	
}










/* Text meant only for screen readers. */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}











/* Resposive Typography */


body,
button,
input,
select,
optgroup,
textarea {
	color: #000;
	font-size: 1em;
	line-height: 1.5;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
  font-weight: 800;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

.light {
    color:#ddd;
}

strong {
	font-weight: 600;
}

cite,
em,
i {
	font-style: italic;
}

p.big {
	font-size: 140%;
	line-height: 1.3em;
}

p.small {
	font-size: 80%;
	}

blockquote {
	display:block;
    margin: 1em 20px;
    padding: 0 1em;
    position:relative;
}

blockquote:before {

}

blockquote cite,
blockquote em,
blockquote i {
	font-style: italic;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	position: relative;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}


p {
    font-size: 1em;
    margin: 0 0 2em 0;
}

article:last-of-type, p:last-of-type {
	margin-bottom: 0;
}

p.intro {
    font-size:1.25em;
    line-height: 1.5;
    font-weight:300;
     margin: 0 0 1.5em 0;
}

h1, h2 {
    letter-spacing: -1px;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  margin: 0 0 0.5em 0;
  line-height: 1.1;
}

h1, .h1 {font-size: 2.074em;}

h2, .h2 {font-size: 1.728em;}

h3, .h3 {font-size: 1.44em;}

h4, .h4 {font-size: 1.2em;}



/* Medium Screen Typography - Scale: 1.333 Perfect Fourth (thanks http://type-scale.com/)  */

@media screen and (min-width: 42em) {

	h1, .h1 { letter-spacing: -2px; }

	h1, .h1 {font-size: 3.157em;}

	h2, .h2 {font-size: 2.369em;}

	h3, .h3 {font-size: 1.777em;}

	h4, .h4 {font-size: 1.333em;}

	p { font-size:1.0625em; }

	p.intro { font-size:1.3em; }

}


/* Large Screen Typography  - Scale: 1.414 Augmented Fourth (thanks http://type-scale.com/)  */

@media screen and (min-width: 72em) {

	h1 { letter-spacing: -3px; }

	h1, .h1 { margin-bottom: 0.35em; font-size: 3.998em; }

	h2, .h2  { font-size: 2.827em; }

	h3, .h3 { font-size: 1.999em; }

	h4, .h4 { font-size: 1.414em; }

	p { font-size:1.125em; }

	p.intro { font-size:1.4em; }

}





            
          
!
            
              $('.nav-toggle').click(function(e) {
  
  e.preventDefault();
  $("html").toggleClass("openNav");
  $(".nav-toggle").toggleClass("active");

});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console