joesnellpdx
/ index.html
Created
November 27, 2012 01:56
A CodePen by Joe Snell. Toggle Navigation: No JS - Responsive toggle navigation with CSS and no JavaScript. Fusion of Brad Frost's 'Toggle Nav' and Aaron Gustafson's 'Build a smart mobile navigation without hacks.' For small screens a “menu” button appe
This file contains 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
| <header id="top" role="banner" class="pattern"> | |
| <h1 id="logo">Toggle Navigation: No JS</h1> | |
| <a id="jump" href="#nav" class="nav-toggle small-screen">Menu</a> | |
| </header> | |
| <nav role="navigation"> | |
| <ul id="nav" tabindex="0"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Products</a></li> | |
| <li><a href="#">Services</a></li> |
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> |
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script> | |
| <script src="https://fb.me/react-0.14.7.js"></script> | |
| <script src="https://fb.me/react-dom-0.14.7.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"></script> |