-
Notifications
You must be signed in to change notification settings - Fork 202
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added a third demo:overlapping menus with back links
- Loading branch information
Showing
5 changed files
with
207 additions
and
5 deletions.
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,190 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" class="no-js"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Multi-Level Push Menu - Demo 2</title> | ||
| <meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" /> | ||
| <meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" /> | ||
| <meta name="author" content="Codrops" /> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" type="text/css" href="css/normalize.css" /> | ||
| <link rel="stylesheet" type="text/css" href="css/demo.css" /> | ||
| <link rel="stylesheet" type="text/css" href="css/icons.css" /> | ||
| <link rel="stylesheet" type="text/css" href="css/component.css" /> | ||
| <script src="js/modernizr.custom.js"></script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <!-- Push Wrapper --> | ||
| <div class="mp-pusher" id="mp-pusher"> | ||
|
|
||
| <!-- mp-menu --> | ||
| <nav id="mp-menu" class="mp-menu"> | ||
| <div class="mp-level"> | ||
| <h2 class="icon icon-world">All Categories</h2> | ||
| <ul> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-display" href="#">Devices</a> | ||
| <div class="mp-level"> | ||
| <h2 class="icon icon-display">Devices</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-phone" href="#">Mobile Phones</a> | ||
| <div class="mp-level"> | ||
| <h2>Mobile Phones</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li><a href="#">Super Smart Phone</a></li> | ||
| <li><a href="#">Thin Magic Mobile</a></li> | ||
| <li><a href="#">Performance Crusher</a></li> | ||
| <li><a href="#">Futuristic Experience</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-tv" href="#">Televisions</a> | ||
| <div class="mp-level"> | ||
| <h2>Televisions</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li><a href="#">Flat Superscreen</a></li> | ||
| <li><a href="#">Gigantic LED</a></li> | ||
| <li><a href="#">Power Eater</a></li> | ||
| <li><a href="#">3D Experience</a></li> | ||
| <li><a href="#">Classic Comfort</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-camera" href="#">Cameras</a> | ||
| <div class="mp-level"> | ||
| <h2>Cameras</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li><a href="#">Smart Shot</a></li> | ||
| <li><a href="#">Power Shooter</a></li> | ||
| <li><a href="#">Easy Photo Maker</a></li> | ||
| <li><a href="#">Super Pixel</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-news" href="#">Magazines</a> | ||
| <div class="mp-level"> | ||
| <h2 class="icon icon-news">Magazines</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li><a href="#">National Geographic</a></li> | ||
| <li><a href="#">Scientific American</a></li> | ||
| <li><a href="#">The Spectator</a></li> | ||
| <li><a href="#">The Rambler</a></li> | ||
| <li><a href="#">Physics World</a></li> | ||
| <li><a href="#">The New Scientist</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-shop" href="#">Store</a> | ||
| <div class="mp-level"> | ||
| <h2 class="icon icon-shop">Store</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-t-shirt" href="#">Clothes</a> | ||
| <div class="mp-level"> | ||
| <h2 class="icon icon-t-shirt">Clothes</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-female" href="#">Women's Clothing</a> | ||
| <div class="mp-level"> | ||
| <h2>Women's Clothing</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li><a href="#">Tops</a></li> | ||
| <li><a href="#">Dresses</a></li> | ||
| <li><a href="#">Trousers</a></li> | ||
| <li><a href="#">Shoes</a></li> | ||
| <li><a href="#">Sale</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="icon icon-arrow-left"> | ||
| <a class="icon icon-male" href="#">Men's Clothing</a> | ||
| <div class="mp-level"> | ||
| <h2>Men's Clothing</h2> | ||
| <a class="mp-back" href="#">back</a> | ||
| <ul> | ||
| <li><a href="#">Shirts</a></li> | ||
| <li><a href="#">Trousers</a></li> | ||
| <li><a href="#">Shoes</a></li> | ||
| <li><a href="#">Sale</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <a class="icon icon-diamond" href="#">Jewelry</a> | ||
| </li> | ||
| <li> | ||
| <a class="icon icon-music" href="#">Music</a> | ||
| </li> | ||
| <li> | ||
| <a class="icon icon-food" href="#">Grocery</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li><a class="icon icon-photo" href="#">Collections</a></li> | ||
| <li><a class="icon icon-wallet" href="#">Credits</a></li> | ||
| </ul> | ||
|
|
||
| </div> | ||
| </nav> | ||
| <!-- /mp-menu --> | ||
|
|
||
| <div class="scroller"><!-- this is for emulating position fixed of the nav --> | ||
| <div class="scroller-inner"> | ||
| <!-- Top Navigation --> | ||
| <div class="codrops-top clearfix"> | ||
| <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/CircularNavigation/"><span>Previous Demo</span></a> | ||
| <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16252"><span>Back to the Codrops Article</span></a></span> | ||
| </div> | ||
| <header class="codrops-header"> | ||
| <h1>Multi-Level Push Menu <span>Off-screen navigation with multiple levels</span></h1> | ||
| </header> | ||
| <div class="content clearfix"> | ||
| <div class="block block-40 clearfix"> | ||
| <p><a href="#" id="trigger" class="menu-trigger">Open/Close Menu</a></p> | ||
| <nav class="codrops-demos"> | ||
| <a href="index.html">Demo 1: Overlapping levels</a> | ||
| <a href="index2.html">Demo 2: Covering levels</a> | ||
| <a class="current-demo" href="index3.html">Demo 3: Overlapping levels with back links</a> | ||
| </nav> | ||
| </div> | ||
| <div class="block block-60"> | ||
| <p><strong>Demo 3:</strong> Overlapping levels with back links</p> | ||
| <p>This menu will open by pushing the website content to the right. It has multi-level functionality, allowing endless nesting of navigation elements.</p> | ||
| <p>The next level can optionally overlap or cover the previous one.</p> | ||
| </div> | ||
| </div> | ||
| </div><!-- /scroller-inner --> | ||
| </div><!-- /scroller --> | ||
|
|
||
| </div><!-- /pusher --> | ||
| </div><!-- /container --> | ||
| <script src="js/classie.js"></script> | ||
| <script src="js/mlpushmenu.js"></script> | ||
| <script> | ||
| new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) ); | ||
| </script> | ||
| </body> | ||
| </html> |
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