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

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

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="fullscreen-menu-container js-menu-container">

    		<a class="menu-button js-menu-close">
				<div class="menu-icon is-active">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</a>

			<div class="fullscreen-menu">

				<div class="fullscreen-menu__image-container"></div>

				<h1 class="fullscreen-menu__title">Fullscreen Menu with jQuery and Flexbox.</h1>

				<nav class="fullscreen-menu__nav">
					<ul>

						<li>
							<a href="#">About</a>
						</li>

						<li>
							<a href="#">Portfolio</a>
						</li>

						<li>
							<a href="#">Résumé</a>
						</li>

						<li>
							<a href="#">Blog</a>
						</li>

						<li>
							<a href="#">Contact</a>
						</li>

					</ul>
				</nav>

				<a target="_blank" href="https://twitter.com/matchboxhero10" class="social-button--twitter">
					<i class="icon--twitter"></i>
				</a>

				<a target="_blank" href="#" class="social-button--facebook">
					<i class="icon--facebook"></i>
				</a>

				<a target="_blank" href="#" class="social-button--pintrest">
					<i class="icon--pintrest"></i>
				</a>

			</div>

    	</div>

		<article class="card">

			<aside class="card__image-container">

				<a class="menu-button js-menu-button">
					<div class="menu-icon">
						<span></span>
						<span></span>
						<span></span>
					</div>
				</a>

				<img class="card__image" src="https://source.unsplash.com/random">

			</aside>

			<section class="card__contents">

				<header class="card__header">
					<h1 class="card__title">Fullscreen Menu with jQuery and Flexbox.</h1>
				</header>

				<section class="card__body">
					<p>Navigation is one of the most important elements of your website so today we'll be creating a modern overlay style menu using jQuery and Flexbox.</p>

					<p>Starting with the layout for mobile we'll stack the elements on top of one another and then move on to centre the elements and share the available space between navigation items when the viewport is large enough and then fix the whole content block perfectly centred at a set maximum width, allowing the height to be dictated by the content.</p>
				</section>

				<footer class="card__footer">

					<a target="_blank" href="https://twitter.com/matchboxhero10" class="social-button--twitter">
						<i class="icon--twitter"></i>
					</a>

					<a target="_blank" href="#" class="social-button--facebook">
						<i class="icon--facebook"></i>
					</a>

					<a target="_blank" href="#" class="social-button--pintrest">
						<i class="icon--pintrest"></i>
					</a>

				</footer>

			</section>

		</article>
<!-- Include jQuery and main.js - Short URL http://srt.lt/Ro3W2 -->
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		
            
          
!
            
              /*

	Title: Fullscreen Menu with jQuery and Flexbox
	Author: Steven Roberts

	Code from last months tutorial - Beautiful responsive layouts with Flexbox

	We're using this as a base. Scroll down to see the new code!

*/

/* Import Sanatize to reset browser defaults - Short URL(http://srt.lt/Q6P0nY) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css');

/* Import Roboto and Roboto-slab from Google Fonts - Short URL (http://srt.lt/b4tY7) */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto:300');

/* Import Font Awesome - Short URL (http://srt.lt/p2b4) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

*,
*::before,
*::after {
	box-sizing: border-box; /* Put padding on the inside of elements */
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px; /* Our base font-size */
	line-height: 1.75; /* Line height assumes an almost rem value but is dynamic to the font-size */
	font-weight: 300; /* Use the included weight */
	color: #332F21; /* Don't use black it's too harsh */

	display: flex; /* Set body to be a flex container */
	align-items: center; /* Vertically centre content in the viewport */
	justify-content: center; /* Horizontally centre content in the viewport */

	min-height: 100vh; /* Force vertical centering since the content won't always be taller than the viewport */
	padding: 2rem; /* Using rem values as they don't cascade like em units and are not fixed units like pixels */

	background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), url('https://source.unsplash.com/random'); /* Multiple Background images, semi-transparent gradient used as a fallback for Edge */
	background-position: center center;
	background-size: cover;
}

@supports(background-blend-mode: multiply) { /* Use a blend mode on the background in browser that support it */

	body {
		background-image: linear-gradient(#4A4A4A, #212121), url('https://source.unsplash.com/random'); /* Multiple background images, Gradient overlay and the Image */
		background-blend-mode: multiply; /* Blending the Gradient with the Background Image (can't use black to blend) */
	}

}

h1 {
	font-family: 'Roboto Slab', serif; /* Use google font included as headline font */
	font-weight: 700; /* We've only included 700 */
	font-size: 2.25rem; /* 36px based on 16px base font size */
	line-height: 1.3333; /* Based on 36px font size and a 48px line-height */
}

.card {
	display: flex; /* Sets entrire card element to be a flex container */
	flex-direction: column; /* Forces elements to align along the vertical axis */

	max-width: 62rem; /* Base-spacing-unit multiplied 35 */
	min-height: 75vh; /* Always at least 75% of the viewport */

	background-color: white; /* Set background colour of our content card */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle drop shadow */
}

	.card__image-container {
		max-height: 15rem; /* Stop the image getting too big */

		background-image: url('https://source.unsplash.com/random');
		background-size: cover; /* Force the background image to cover the container */
		background-position: center center; /* Position the image in the middle */
	}

	.card__image {
		opacity: 0; /* Hide the image in the page, we need the DOM to render it so we have two elements with content in the card */
		pointer-events: none; /* Allows for the image to be clicked through */
	}

	.card__contents {
		display: flex; /* Make element a flex container */
		flex-direction: column; /* Align elements along the vertical axis */

		padding: 2rem;
	}

	.card__header,
	.card__footer {
		flex: 0 0 auto; /* Don't grow, don't shrink, automatic size (basis) */
	}

	.card__footer {
		margin-top: 2rem; /* Create a bit of space between the content and the footer */
		text-align: right; /* Align the contents of the footer to the right */
	}

	.card__body {
		flex: 1 1 auto; /* Same as flex:1; */
	}

	/* The flex properties of the card header, footer and body allows the footer to always be at the bottom of the container */

	.card__title {
		margin-top: 0; /* Remove margin as there are no elements above it */
	}

@media only screen and (min-width: 53rem) { /* Base-spacing-unit * 30 */

	.card {
		flex-direction: row; /* Align items along the horizontal axis */
		min-height: 60vh;
	}

		.card__image-container {
			flex: 0 1 45%; /* Don't grow, do shrink, 45% width (basis) */
			max-height: inherit; /* Reset the max-height set for mobile */
		}

		.card__contents {
			flex: 1 1 55%; /* Grow, Shrink, 55% width */
			padding: 3rem; /* Increase padding now we have more space to play with */
		}

}



/* Social icons based on: codepen.io/matchboxhero/pen/onzkC */

[class^="icon--"] {
    font-family: 'FontAwesome'; /* Apply icon font */
    font-style: normal; /* Removes the default italics */
}

[class^="social-button"] {
   	display: inline-flex; /* Display elements inline but turn them into a flex-container */
	align-items: center; /* Centrally align the children vertically */
	justify-content: center; /* Centrally align the children horizontally */

   	height: 3rem; /* Create square */
    width: 3rem; /* Create square */

   	font-size: 1.4rem; /* Increase the default font size */
    color: white; /* Make icon white */
    border-radius: 50%; /* Create circle */

    text-decoration: none; /* Remove default underline */

    transition: background-color 150ms ease-in-out; /* Transition background colour on hover */

    margin-right: 0.1rem;
}

.icon--twitter::before {
    content: '\f099'; /* Unicode value for the twitter icon in our chosen icon font */
}

.icon--facebook::before {
    content: '\f09a'; /* Unicode value for the facebook icon in our chosen icon font */
}

.icon--pintrest::before {
    content: '\f231'; /* Unicode value for the pintrest icon in our chosen icon font */
}

.social-button--twitter {
    background-color: #32b9e7; /* Twitter colour */
}

.social-button--twitter:hover {
    background-color: #2a9dc4; /* Twitter hover colour */
}

.social-button--facebook {
    background-color: #4b70ab; /* Facebook colour */
}

.social-button--facebook:hover {
    background-color: #3f5f91; /* Facebook hover colour */
}

.social-button--pintrest {
    background-color: #d63533; /* Pintrest colour */
}

.social-button--pintrest:hover {
    background-color: #b52d2b; /* Pintrest hover colour */
}










/*

	Start New Code For Menu

*/

/* Menu Button */

.menu-button {
	display: flex; /* Display flex to center the menu icon in the button */
	justify-content: center; /* Align horizontally */
	align-items: center; /* Align vertically */

	width: 4rem; /* Button width */
	height: 4rem; /* Button height */
	border-radius: 50%; /* Make the button a circle */
	background-color: rgba(255,255,255,0.4); /* Make the background white and semi-transparent */
	cursor: pointer;

	transition: background-color 500ms ease-in-out; /* Add transition for the background-color */
}

.card__image-container .menu-button {
	margin: 1.5rem;
}

.menu-button:hover,
.menu-button:focus,
.menu-button:active {
    background-color: rgba(0,0,0,0.8); /* On hover, transition the background-color and transparency */
}

.menu-icon {
	position: relative; /* Give the menu-icon position relative so we can absolutely position children */
    width: 2rem; /* Icon width */
	height: 1.5rem; /* Icon height */
}

.menu-icon span {
    position: absolute; /* Absolutely position all children of the menu-icon */
    height: 0.125rem; /* Height of each line in our menu button */
    width: 100%; /* With of each line */
    background-color: #332F21; /* Background colour of each line */
    transition: background-color 500ms ease-in-out; /* Transition added for the background colour */
}

.menu-icon span:nth-child(1) {
    top: 0.0625rem; /* Position the first line roughly 1px from the top */
}

.menu-icon span:nth-child(2) {
    top: 0.625rem; /* Position the second line roughly 10px from the top, one on top of the other */
}

.menu-icon span:nth-child(3) {
    top: 1.25rem; /* Position the fourth line roughly 20px from the top */
}

.menu-button:hover span,
.menu-button:focus span,
.menu-button:active span {
    background: white; /* On hover, make the background-color of the menu icon white */
}

/* Turn the Menu icon into a close icon  */

.menu-icon.is-active span:nth-child(1) {
    opacity: 0; /* Hide the first line */
}

.menu-icon.is-active span:nth-child(2) {
    transform: rotate(45deg); /* Rotate the second line 45 degrees */
}

.menu-icon.is-active span:nth-child(3) {
	top: 0.625rem; /* Position the third line over the second line */
    transform: rotate(-45deg); /* Rotate the third line -45 degrees */
}

/* Fullscreen Menu */

.fullscreen-menu-container {
	position: fixed; /* Fix the menu to the viewport */
	top: 12.5rem; /* Add the top value to allow the element to animate up over */
	left: 0; /* Position to the left of the viewport */
	z-index: 5; /* Add z-index to make sure the element is always above everything else */
	width: 100vw; /* Cover the whole width of the viewport */
	height: 100vh; /* Cover the whole height of the viewport */
	overflow: scroll; /* Allow scrolling when the content is larger than the viewport */

	background-color: rgba(255,255,255,0.95); /* Semi-transparent white background for the menu-overlay */

	opacity: 0; /* Apply 0 transparency to hide the overlay on load */
	pointer-events: none; /* Stop the elements in the menu-container from being clicked */

	transition: top 500ms ease-in, opacity 300ms ease-in; /* Transition the top and opacity */
}

.fullscreen-menu-container.is-open {
	opacity: 1; /* Transition opacity from 0 to 1 */
	top: 0; /* Transition to the top of the viewport */
	pointer-events: auto; /* Re-add pointer events to elements can be clicked again */
}

.fullscreen-menu-container .menu-button {
	position: absolute; /* Position the button absolutely to the image-cotainer */
	top: 1.5rem; /* Position button from the top */
	right: 1.5rem; /* Position button from the left */
}

.fullscreen-menu {
	text-align: center; /* Apply text-align center to all children */
	max-width: 62rem; /* Maximum width of the content */
	padding: 6rem 2rem 4rem; /* Add padding to the content, large at the top to allow for the close button */
	width: 100%; /* Where it can, stretch to the max-width otherwise, the full viewport */
}

	.fullscreen-menu__image-container {
		width: 5rem; /* Make square */
		height: 5rem; /* Make square */
		border-radius: 50%; /* Turn the square into a circle */
		background-image: url('https://source.unsplash.com/random'); /* Apply the image as the background */
		background-size: cover; /* Force the background image to cover the container */
		background-position: center center; /* Position the image in the middle */
		margin: 0 auto 1.5rem;
	}

	.fullscreen-menu__title {
		max-width: 30rem; /* Apply a different max-width to the title to achieve a more optimal reading lenght */
		margin: 0 auto; /* Position in the horizontal center and remove top and bottom margins */
	}

	.fullscreen-menu__nav {
		margin: 3rem 0; /* Apply top and bottom margin of the navigation */
	}

	.fullscreen-menu__nav ul {
		list-style: none; /* Remove the dots from list items */
		margin: 0; /* Remove defualt margin */
		padding: 0; /* Remove default padding */
	}

	.fullscreen-menu__nav a {
		display: block; /* Span the whole width */
		font-size: 1.4rem; /* Increase the default font size */
		padding: 1rem; /* Add padding to the button to increase the click/tap area */
		color: #A2A2A2; /* Apply light grey colour */
		text-decoration: none; /* Remove default underline */
		transition: color 300ms ease-in; /* Add transition for the colour on hover */
	}

	.fullscreen-menu__nav a:hover,
	.fullscreen-menu__nav a:focus,
	.fullscreen-menu__nav a:active {
		color: #332F21; /* Darken the text colour on hover */
	}

.fullscreen-menu [class^="social-button"] {
	margin: 0 0.5rem; /* Add a larger margin between the social buttons in the menu overlay */
	height: 3.75rem; /* Increase the size of the social buttons */
    width: 3.75rem; /* Increase the size of the social buttons */
    font-size: 1.5rem; /* Increase the size of the social icon inside the button */
}

@media only screen and (min-width: 46rem) { /* When the viewport is large enough */

	.fullscreen-menu-container {
		display: flex; /* Add display flex to the container */
		justify-content: center; /* Align menu contents to the center horizontally */
		align-items: center; /* Align menu contents to the center vertically */
	}

	.fullscreen-menu {
		padding: 0;
	}

	.fullscreen-menu__nav {
		margin: 4rem 0; /* Increase the margin between the navigation and other elements in the menu */
	}

		.fullscreen-menu__nav ul {
			display: flex; /* Turn the unordered list into a flex-container */
			justify-content: space-between; /* Share the available space between the list items */
		}

}
            
          
!
            
              /////
//
// Title: Fullscreen Menu with jQuery and Flexbox
// Author: Steven Roberts
//
/////

// Functions

	function openMenu() {
		$('.js-menu-container').addClass('is-open'); // Find element with the class 'js-menu-container' and apply an additional class of 'is-open'
	}


	function closeMenu() {
		$('.js-menu-container').removeClass('is-open'); // Find element with the class 'js-menu-container' and remove the class 'is-open'
	}

// Document Ready

	jQuery(document).ready(function($){ // When everything has finished loading

		$('.js-menu-button').click(function(){ // When the element with the class 'js-menu-button' is clicked
			openMenu(); // Run the openMenu function
		});

		$('.js-menu-close').click(function(){ // When the element with the class 'js-menu-close' is clicked
			closeMenu(); // Run the closeMenu function
		});

	});

// Keyboard Accessibility

	jQuery(document).keyup(function(e) { // Listen for keyboard presses

		if (e.keyCode === 27) { // 'Esc' key

			if ($('.js-menu-container').hasClass('is-open')) { // If the menu is open close it
				closeMenu(); // Run the closeMenu function
			}

		}

	});
            
          
!
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