JoelSutherland/A-Pen-by-Joel-Sutherland.markdown

## A-Pen-by-Joel-Sutherland.markdown

      
    Raw
  

              A-Pen-by-Joel-Sutherland.markdown
            
          
    A Pen by Joel Sutherland

A Pen by Joel Sutherland on CodePen.
License.

  
## index.html
<html>
  <body>
<header id="header">
  <div class="container">
    <h1>Site Title</h1>
    <nav id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="content">
  <div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur molestiae tempora nulla aut iste maxime optio veritatis quod facilis similique ipsum sapiente facere impedit necessitatibus vero commodi ex delectus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur molestiae tempora nulla aut iste maxime optio veritatis quod facilis similique ipsum sapiente facere impedit necessitatibus vero commodi ex delectus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur molestiae tempora nulla aut iste maxime optio veritatis quod facilis similique ipsum sapiente facere impedit necessitatibus vero commodi ex delectus.</p>
  </div>
</div>
  </body>
</html>

## script.js
$(function(){
  $('#nav').click(function() {
    $(this).toggleClass('open');
  });
});

## style.less
html { background: #39a; }
.container {
  position: relative;
  margin: 0 auto;
  width: 94%;
  max-width: 1100px;
  font-family: helvetica, sans-serif;
}
.content {
  position: relative;
  padding-top: 80px;
  p { margin-bottom: 10px; }
}
#header {
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #222;
  color: white;

  h1 {
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
  }
}
#nav {
  position: absolute;
  right: 0;
  ul {
    li {
      float: left;
      a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 0 10px;
      }
    }
  }
}

@media (max-width: 599px) {
  #header {
    .container { width: 100%; }
    h1 {
      left: 3%;
    }
  }
  #nav {
    width: 100%;
    top: 60px;
    &:before {
    content: '\2630';
    display: block;
    position: absolute;
    right: 3%;
    top: -50px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
      cursor: pointer;
  }
    ul {
      background: #222;
      width: 100%;
      li {
        float: none;
        a {
          padding: 10px 3%;
          line-height: 20px;
          border-top: 1px solid #333;
        }
      }
    }
  }
  // Transition
  #nav ul {
     transition: 350ms;
    -moz-transition: 350ms;
    -webkit-transition: 350ms;
    transform: perspective(600) rotate3d(0,0,0,0);
    -moz-transform: perspective(600) rotate3d(0,0,0,0);
    -webkit-transform: perspective(600) rotate3d(1,0,0,-90deg);
    transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
  }
  #nav.open ul {
     transform: translateY(0px);
    -moz-transform: translateY(0px);
    -webkit-transform:  perspective(600) rotate3d(0,0,0,0);
  }
}
	<html>
	<body>
	<header id="header">
	<div class="container">
	<h1>Site Title</h1>
	<nav id="nav">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">History</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	</div>
	</header>
	<div class="content">
	<div class="container">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur molestiae tempora nulla aut iste maxime optio veritatis quod facilis similique ipsum sapiente facere impedit necessitatibus vero commodi ex delectus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur molestiae tempora nulla aut iste maxime optio veritatis quod facilis similique ipsum sapiente facere impedit necessitatibus vero commodi ex delectus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur molestiae tempora nulla aut iste maxime optio veritatis quod facilis similique ipsum sapiente facere impedit necessitatibus vero commodi ex delectus.</p>
	</div>
	</div>
	</body>
	</html>
	$(function(){
	$('#nav').click(function() {
	$(this).toggleClass('open');
	});
	});
	html { background: #39a; }
	.container {
	position: relative;
	margin: 0 auto;
	width: 94%;
	max-width: 1100px;
	font-family: helvetica, sans-serif;
	}
	.content {
	position: relative;
	padding-top: 80px;
	p { margin-bottom: 10px; }
	}
	#header {
	z-index: 2;
	position: fixed;
	width: 100%;
	height: 60px;
	line-height: 60px;
	background: #222;
	color: white;

	h1 {
	position: absolute;
	top: 0;
	left: 0;
	text-transform: uppercase;
	}
	}
	#nav {
	position: absolute;
	right: 0;
	ul {
	li {
	float: left;
	a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 0 10px;
	}
	}
	}
	}

	@media (max-width: 599px) {
	#header {
	.container { width: 100%; }
	h1 {
	left: 3%;
	}
	}
	#nav {
	width: 100%;
	top: 60px;
	&:before {
	content: '\2630';
	display: block;
	position: absolute;
	right: 3%;
	top: -50px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	}
	ul {
	background: #222;
	width: 100%;
	li {
	float: none;
	a {
	padding: 10px 3%;
	line-height: 20px;
	border-top: 1px solid #333;
	}
	}
	}
	}
	// Transition
	#nav ul {
	transition: 350ms;
	-moz-transition: 350ms;
	-webkit-transition: 350ms;
	transform: perspective(600) rotate3d(0,0,0,0);
	-moz-transform: perspective(600) rotate3d(0,0,0,0);
	-webkit-transform: perspective(600) rotate3d(1,0,0,-90deg);
	transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-webkit-transform-origin: 50% 0;
	}
	#nav.open ul {
	transform: translateY(0px);
	-moz-transform: translateY(0px);
	-webkit-transform: perspective(600) rotate3d(0,0,0,0);
	}
	}