Author: | lesniall |
---|---|
Views Total: | 10,766 views |
Official Page: | Go to website |
Last Update: | December 7, 2015 |
License: | MIT |
Preview:

Description:
A pure Html / CSS solution used to create an App style off-canvas push menu for site navigation using CSS3 :target
selector.
How to use it:
Create a navigation for your website.
<nav class="site-nav" id="site-nav"> <a href="#">Home</a> <a href="#">Services</a> <a href="#">Works</a> <a href="#">Portfolio</a> <a href="#">Blog</a> <a href="#">About</a> <a href="#">Contact</a> </nav>
Create menu toggle buttons inside your main content.
<div class="page-wrap"> <header class="main-header"> <a href="#site-nav">☰</a> <a href="#" class="close-menu">☰</a> <h1>Pure CSS Push Menu</h1> </header> <div class="content"> Main Content Here </div> </div>
The core CSS / CSS3 rules.
.site-nav { position: fixed; top: 0; width: 0; height: 100%; background: #222; overflow-y: auto; transition: width 0.3s ease; white-space: nowrap; text-transform: uppercase; } .site-nav a { display: block; border-bottom: 1px solid #666; color: white; padding: 34px; } .site-nav a:hover, .site-nav a:focus { background: #333; } .site-nav:after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 4px; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); } #site-nav:target { width: 30%; } #site-nav:target + .page-wrap { width: 70%; } #site-nav:target + .page-wrap .close-menu { display: block; } #site-nav:target + .page-wrap .main-header { width: 70%; left: 30%; } .main-header { background: #222; padding: 5px 0 5px 65px; color: white; position: fixed; width: 100%; left: 0; transition: all 0.3s ease; } .main-header a { position: absolute; left: 20px; top: 20px; color: white; font-size: 32px; } .page-wrap { float: right; width: 100%; transition: width 0.3s ease; }
but this cant be used in angular routing as soon as the template loads all trasition logic stops working and insted of menu toggle page redirects to some where else
download link is broken…