CSS Slider Menu

Objective: To create a CSS-only layout including a scrollable menu that slides out from the left. Meant for mobile versions of sites. Live Demo: https://github.com/NicholasRBowers/CSS-Menu-Slider Additional Information: -CSS-only -Meant for mobile devices -Meant to be used in conjunction with Responsive Design -Want to design as semantic as possible -Akin to Facebook's Mobile and App layout -Completely breaks in IE -Collaboration welcome! Operation Logic: -Uses the checkbox-hack to store state information (http://css-tricks.com/the-checkbox-hack/) =When unchecked, menu is closed, when checked menu is open. -Input checkbox exists at the base level of the HTML (under <body>) with an absolutely positioned <div> tag afterwards that encapsulates the page. -<div> tag holds the rest of the page, including fixed absolutely positioned elements. -Header and Navigation toggle are fixed at top, scrollable <div> under, and fixed/scrollable menu to the left. -An extra invisible label allows a click anywhere on the right to toggle states and collapse the menu. Comments: -Completely broken in IE, but as this is meant for mobile only, I'm not sure that's a problem. -Zooming out on a mobile device sometimes causes rendering problems. -Had to put the rest of the page in a <div> that was a sibling to the <input> element, because the default Android browser only supports the adjacent sibling combinator (+) when used in tandem with a pseudo-class (:checked). NOTE: It does support the sibling combinator (~), but it only picks up the adjacent element. Twitter: @NicholasRBowers

by NicholasRBowers

HTML

<body>

	<input type="checkbox" name="nav" id="nav" />

	<div id="page">

		<!-- Anything in the header tag show in a fixed position at the top of the screen -->
		<header>
			<label id="navbuttontop" for="nav">
				<h6>Navigation</h6>
			</label>
			<h1>Header</h1>
		</header>

		<!-- navbuttontop is the navigation button, while contentsideoverlay is the transparent label used to let the user return to the content menu from the nav menu by clicking anywhere out of the navigational menu -->
		<label id="contentsideoverlay" for="nav"></label>

		<!-- Anything in the nav tag shows up in the side navigational bar -->
		<nav>
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
				<li><a href="#">Link 6</a></li>
				<li><a href="#">Link 7</a></li>
				<li><a href="#">Link 8</a></li>
				<li><a href="#">Link 9</a></li>
				<li><a href="#">Link 10</a></li>
				<li><a href="#">Link 11</a></li>
				<li><a href="#">Link 12</a></li>
				<li><a href="#">Link 13</a></li>
				<li><a href="#">Link 14</a></li>
				<li><a href="#">Link 15</a></li>
			</ul>
		</nav>

		<!-- Area for page content -->
		<div id="content">
			<div class="wrap">
				<h1>Lorem Ipsum Dolor Sit Amet</h1>

				<p>
					Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit. Vivamus ultrices risus auctor magna suscipit malesuada. Etiam eget tellus nec enim accumsan aliquam. Phasellus neque ipsum</a>, bibendum in mattis in, fringilla ut arcu. Curabitur iaculis ullamcorper magna scelerisque mollis. Donec id laoreet enim. Pellentesque eu sem ac nisl feugiat malesuada non sed erat. Ut nulla leo, aliquet aliquam varius non, luctus sed magna. Pellentesque non massa lectus. Maecenas lobortis rhoncus nulla. Mauris at lectus orci. Nunc leo purus, egestas id luctus ac, viverra a nisi. Nam commodo faucibus lacus, et cursus nunc convallis eu. Vestibulum augue urna,...

CSS

/* This is a very rough stylesheet, it will be built on the HTML5 Boilerplate eventually, but I wanted to keep it simple in order to get it working first */
/*==|== Variables ============================================= */
/*==|== Mixins ================================================ */
/*==|== General =============================================== */
body, div {
  padding: 0;
  margin: 0; }

input {
  display: none !important;
  visibility: hidden; }

label {
  cursor: pointer; }

/*==|== Layout ================================================ */
.wrap {
  width: 97%;
  max-width: 960px;
  margin: 0 auto; }

header {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 55px;
  position: fixed; }
  header h1 {
    margin: auto 0; }

/* Toggle button */
label#navbuttontop {
  padding: 0;
  margin: 7px;
  float: left;
  /* This causes us to have to move one less thing when :checked, but pushes the header to the right and brings it off of center */
  width: 30%;
  height: 35px; }
  label#navbuttontop h6 {
    margin: auto 0; }

/* An invisible label that allows the user to return to the page by clicking anywhere outside of the navigational menu */
label#contentsideoverlay {
  position: fixed;
  left: 60%;
  top: 0;
  width: 40%;
  height: 100%; }

nav {
  position: fixed;
  overflow: hidden;
  width: 0;
  height: 100%;
  margin: 0;
  padding: 0; }
  nav ul, nav li {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0; }
  nav a {
    display: block;
    float: left;
    margin: 0;
    width: 95%;
    padding: 2.5%; }

/* Content area */
#content {
  position: fixed;
  overflow: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 55px;
  height: 100%;
  width: 100%;
  z-index: -1; }
  #content img {
    display: block;
    margin: 0...