Off-canvas Push Menu In Pure HTML / CSS

Category: CSS & CSS3 , Menu & Navigation | December 7, 2015
Author: lesniall
Views Total: 3,649
Official Page: Go to website
Last Update: December 7, 2015
License: MIT

Preview:

Off-canvas Push Menu In Pure HTML / CSS

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">&#9776;</a>
    <a href="#" class="close-menu">&#9776;</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;
}

 

  • abhishekgouda patil

    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…