Author: | ejsamrt111 |
---|---|
Views Total: | 841 views |
Official Page: | Go to website |
Last Update: | January 12, 2018 |
License: | MIT |
Preview:

Description:
A small JavaScript script to create a mobile-friendly sliding off-canvas nav that covers the main page content with a background overlay.
How to use it:
Include the Font Awesome for the icons.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Create the sidebar navigation.
<div class="sidebar" id="sidebar"> <div class="sidebar-lists"> <ul class="lists"> <li class="sidebar-items" style="margin-top: -17px; border-bottom: 1px solid #ccc"> <i class="fa fa-close" id="takeIn"></i> </li> <li class="sidebar-items items"> <a href="#"> <h4><i class="fa fa-dashboard"></i><span class="span">Dashboard</span></h4> </a> </li> <li class="sidebar-items items"> <a href="#"> <h4><i class="fa fa-fire"></i><span class="span">Trending</span></h4> </a> </li> <li class="sidebar-items items" style="border-bottom: 1px solid #ccc"> <a href="#"> <h4><i class="fa fa-feed"></i><span class="span">Feed</span></h4> </a> </li> <li class="sidebar-items" style="border-bottom: 1px solid #ccc"> <h4>PAGES </li> <li class="sidebar-items items"> <a href="#"> <h4><i class="fa fa-home"></i><span class="span">Home</span></h4> </a> </li> <li class="sidebar-items items"> <a href="#"> <h4><i class="fa fa-book"></i><span class="span">Documentation</span></h4> </a> </li> <li class="sidebar-items items" style="border-bottom: 1px solid #ccc"> <a href="#"> <h4><i class="fa fa-code"></i><span class="span">Codes</span></h4> </a> </li> <li class="sidebar-items" style="border-bottom: 1px solid #ccc"> <h4>ACCOUNT </li> <li class="sidebar-items items"> <a href="#"> <h4><i class="fa fa-gear"></i><span class="span">Settings</span></h4> </a> </li> <li class="sidebar-items items"> <a href="#"> <h4><i class="fa fa-sign-out"></i><span class="span">Logout</span></h4> </a> </li> </ul> </div> </div>
Create an element to open the navigation.
<i class="fa fa-bars" id="bringOut"></i>
The necessary CSS/CSS3 rules.
.fa-bars { position: absolute; margin-top: 30px; color: rgb(122, 117, 117); cursor: pointer; } .sidebar { background: rgba(0, 0, 0, 0.6); display: none; height: 100%; position: fixed; width: 100%; z-index: 1; top: 0; z-index: 1000; } .sidebar-lists { animation-name: sidebar; animation-duration: 0.5s; background: rgb(235, 235, 235); display: block; height: auto; top: 0; width: 250px; height: 100%; z-index: 1000 !important; } .lists { list-style: none; text-decoration: none; padding-left: 0; } .fa-close { color: rgb(128, 128, 128); position: absolute; margin-top: 25px; margin-left: 0px; cursor: pointer; } .sidebar-items { color: rgb(112, 112, 112); display: block; padding-left: 30px; } .sidebar-items.items { color: rgb(112, 112, 112); display: block; height: 40px; padding-left: 30px; } .sidebar-items a { text-decoration: none; color: rgb(112, 112, 112) } .span { margin-left: 20px } @keyframes sidebar { 0% { transform: translate3d(-250px, 0, 0); } 100% { transform: translate3d(0px, 0, 0); } } @media(max-width: 600px) { body { overflow-x: hidden; } .sidebar-lists { overflow: hidden; overflow-y: scroll; position: fixed } } @keyframes display { 0% { opacity: 0 } 100% { opacity: 1 } }
The main JavaScript.
var bringOut = document.getElementById('bringOut'); var takeIn = document.getElementById('takeIn'); var sidebar = document.getElementById('sidebar'); var big = document.getElementById('big'); var bigC = document.getElementById('bigContainer'); var card = document.getElementsByClassName('card'); var image = document.getElementsByClassName('img-fluid'); bringOut.addEventListener('click', out); takeIn.addEventListener('click', inside); window.addEventListener('click', outside); for (i = 0; i < image.length; i++) { image[i].addEventListener('click', function() { big.style.display = "block"; bigC.innerHTML = "<img src='" + image.src[i] + "'>"; }); } function out() { sidebar.style.display = "block"; } function inside() { sidebar.style.display = "none"; } function outside(e) { if (e.target == sidebar) { sidebar.style.display = "none"; } }