Sliding Fullscreen Menu

Fullscreen menu. Animates in from top.

by the_voder

HTML

<header>
  <nav id="menu1" class="navmenu">
    
	<!-- [MENU BUTTON] -->
    <label for="menutoggle" class="menu">Menu 1</label>
    <input type="checkbox" id="menutoggle" />

    <!-- [MENU ITEMS] -->
    <div class="menuitems">
      <h3>
	  Section 1
	  </h3>
	  <ul>
	  	<li><a href="#">Item 1</a></li>
	  	<li><a href="#">Item 2</a></li>
	  	<li><a href="#">Item 3</a></li>
	  </ul>
	  
	  <h3>
	  Section 2
	  </h3>
	  <ul>
	  	<li><a href="#">Item 4</a></li>
	  	<li><a href="#">Item 5</a></li>
	  	<li><a href="#">Item 6</a></li>
	  </ul>
	  
    </div>
  </nav>
</header>

CSS

/* Box-sizing reset. Prevents elements getting larger when padding is added */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
	/* Zeroing body margin allows elements to go right to edge of page */
	margin: 0;	
}

/* Remove default list styling from nav menu */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Menu button */
nav input {
	/* Hide menu toggle checkbox */
	display: none;
}

/* Menu label (visible button to toggle menu on/off) */
nav label {
	position: relative;
	float: right;
	/* Set high z-index to make sure menu checkbox label is on top of menu so it can be clicked when menu is visible */
	z-index: 99;
}

/* Menu items style  */
.menuitems {
	/* Use flexbox to align items within menu */
	display: flex;
	position: fixed;
	/* set menu to full page width/height using viewport units */
	width: 100vw;
	height: 100vh;
	/* position menu offscreen */
	top: -100vh;
	padding-top: 50px;
	flex-direction: column;
	align-items: center;
	background-color: #666;
	color: #fff;
	/* Set transition so menu animates in */
	transition: 0.5s all;
}

/* Select div that is a sibling of checked checkbox  */
.navmenu input:checked ~ div {
	top: 0;
}