Author: | Amli |
---|---|
Views Total: | 10,959 views |
Official Page: | Go to website |
Last Update: | May 16, 2018 |
License: | MIT |
Preview:

Description:
A smart responsive sticky navbar that automatically slides down and hides as you scroll down or up the webpage.
It will automatically collapse into a drop-down toggle menu when running on mobile devices.
How to use it:
Load the Font Awesome for the nav icons (OPTIONAL).
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
Create the sticky nav.
<nav id="sticky_nav"> <div class="container_left"> <a href="#"> <i class="fa fa-home"></i> </a> <button id="btnMenu" onclick="openMenu()"> <i class="fa fa-bars"></i> <i class="fa fa-close"></i> </button> </div> <div class="container_menu" id="thisMenu"> <div class="container_list"> <button class="btnList" onclick="openList('1')"> <span class="drop">Dropdown 1</span> <span class="acc">Accordion 1</span> </button> <div class="content_list left" id="thisList_1"> <p>1<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p> </div> </div> <div class="container_list"> <button class="btnList" onclick="openList('2')"> <span class="drop">Dropdown 2</span> <span class="acc">Accordion 2</span> </button> <div class="content_list left" id="thisList_2"> <p>2<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p> </div> </div> <div class="container_list"> <button class="btnList" onclick="openList('3')"> <span class="drop">Dropdown 3</span> <span class="acc">Accordion 3</span> </button> <div class="content_list center" id="thisList_3"> <p>3<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p> </div> </div> <div class="container_list"> <button class="btnList" onclick="openList('4')"> <span class="drop">Dropdown 4</span> <span class="acc">Accordion 4</span> </button> <div class="content_list right" id="thisList_4"> <p>4<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p> </div> </div> <div class="container_list"> <button class="btnList" onclick="openList('5')"> <span class="drop">Dropdown 5</span> <span class="acc">Accordion 5</span> </button> <div class="content_list right" id="thisList_5"> <p>5<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p> </div> </div> </div> <div class="container_right"> <div class="content_search" id="thisSearch"> <form><input type="text" placeholder="Search..."></form> </div> <button id="btnSearch" onclick="openSearch()"> <i class="fa fa-search"></i> <i class="fa fa-close"></i> </button> </div> </nav>
The necessary styles and media queries for the sticky nav.
#sticky_nav { top: -45px; position: fixed; z-index: 999; transition: all .5s ease } .btnList { width: 120px } .content_list { background: #fff; width: 250px; top: 45px } .content_list.left, .content_list.left:before { left: 0 } .content_list.center { left: -65px } .content_list.center:before { left: 50%; transform: translate(-50%, 0) } .content_list.right, .content_list.right:before { right: 0 } .content_list:before { width: 8px; top: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff } .container_right { float: right } .content_search { top: 0; right: 40px } input[type=text] { background: #fff; font-size: 22px; border-radius: 5px } input[type=text]:focus { outline: none } [class*="show"] { display:block } .show_list { padding: 20px 0; animation: height 1s ease } @keyframes height { from { padding:0; opacity:0 } to { padding: 20px 0; opacity: 1 } } .show_search form { width: 150px; padding: 6px; animation: width 1s ease } @keyframes width { from { width:0; opacity:0 } to { width: 150px; opacity: 1 } } .visible { display: inline-block } .hidden { display: none } @media (max-width:683px) { #btnMenu { display: block } .container_menu { display: none } .container_list { width: 100% } .btnList { width: 100%; box-shadow: 0 2px 2px -2px #333 } .drop { display: none } .acc { display: inline-block } .content_list { width: 100%; top: 0; position: relative; float: left } .content_list.left, .content_list.center, .content_list.right { left: 0; right: 0 } .content_list.left:before, .content_list.center:before, .content_list.right:before { left: 50%; transform: translate(-50%, 0) } .show_menu { background: #1a1a1a; width: 100%; top: 45px; display: block; position: absolute } }
The JavaScript to activate the sticky nav.
window.onscroll = function(){ scrollFunction() } function scrollFunction(){ var sn = document.getElementById("sticky_nav"); if(document.body.scrollTop > 100 || document.documentElement.scrollTop > 100){ sn.style.top = "0" } else{ sn.style.top = "-45px" } } function openList(x){ var cL = document.getElementsByClassName("content_list"); var i; for(i = 0; i < cL.length; i++){ var OcL = cL[i]; if(cL[i] != document.getElementById("thisList_" + x)){ OcL.classList.remove("show_list") } } document.getElementById("thisList_" + x).classList.toggle("show_list") } function openSearch(){ if(document.getElementById("btnSearch")){ document.getElementById("thisSearch").classList.toggle("show_search"); document.getElementById("btnSearch").getElementsByTagName("i")[0].classList.toggle("hidden"); document.getElementById("btnSearch").getElementsByTagName("i")[1].classList.toggle("visible") } } function openMenu(){ if(document.getElementById("btnMenu")){ document.getElementById("thisMenu").classList.toggle("show_menu"); document.getElementById("btnMenu").getElementsByTagName("i")[0].classList.toggle("hidden"); document.getElementById("btnMenu").getElementsByTagName("i")[1].classList.toggle("visible") } }