A Pen by Joel Sutherland on CodePen.
Created
February 18, 2014 20:17
-
-
Save JoelSutherland/9079151 to your computer and use it in GitHub Desktop.
A Pen by Joel Sutherland.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| $('#nav').click(function() { | |
| $(this).toggleClass('open'); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment