Sidebar Navigation Menu with Search and Logo | CSS, Jquery, HTML

- June 27, 2018

To see the demo, click on the output tab of the following code editor. You can customize this code here, after that click to file option and download your code or simply click on copy button to copy this whole source code.

Features

Sidebar navigation is a simple, clean and creative designed specially for mobile devices. However, it's look pretty on each device. Some are the most important features are as follows:
  • Responsive
  • Sticky
  • Easy to Navigate
  • Font Awesome Icons
  • CSS3 Smooth Animations
  • User & SEO Friendly
  • Attractive Color
  • CSS Designed Search Form
  • CSS Designed Input Button
  • Responsive Logo Image
  • Vertical Menu

Sidebar Navigation HTML Code

<div class='sticky'>
<button class='menu-open' onclick="openNav()"> 
<i class='fa fa-bars'></i>
</button>
<div class='codehim-logo'>
   <img src="https://4.bp.blogspot.com/-_yBEr40ZJxY/Wq-IkZHlPSI/AAAAAAAABX8/WhFM11FPBT4xq36YeHCoh1xyRPGyFvcrQCK4BGAYYCw/s1600/Codehim%2Boffical%2Blogo%2B2%252C1.png" alt="CodeHim Logo" />
</div>
<button class='codehim-s-btn'> 
<span class='sRight' id='searchb'>
<label for='TypeNow'> 
<i class='fa fa-search'></i> </label>
</span>
</button>
<span class='now-search' id='s-now'>
   <div class='codehim-search'>
      <form action="YOUR_SITE_SEARCH_PAGE" target="_top">
         <input type='text' id="TypeNow" autocomplete="off" oninput="undisableBtn()" name="q" placeholder="Type to search"/>
         <input type="submit" value="Search" class="codehim-search-button"/>
      </form>
   </div>
</span>
</div> <!--/sticky-->
<div id="mySidenav" class="sidenav">
  <button class="closebtn menu-close" onclick="closeNav()">
<i class='fa fa-long-arrow-left'></i>
</button>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

HTML Customization

  1. Change Logo

    <div class='codehim-logo'> it's child element is image, you can insert here your logo img address. You can use any size of image under class name "codehim-logo", the img responsive size has been declared in the CSS.

  2. Replace Search Link

    Change the form action where written YOUR_SITE_SEARCH_PAGE. Replace it with your search result page. Then change name="q" according to your site search query.

  3. Add Links to Vertical Menu

    Now, it's time to add your site's links in vertical menu.

    For those who are complete beginners. Find the below code:
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    
    Simply add your links in the above anchors.

Side Navigation CSS Code

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Tajawal', sans-serif;
 transition: .2s;
 -webkit-transition: .2s;
 -moz-transition: .2s;
}

body {
 font-family: 'Tajawal', sans-serif;
 height: 2000px;
 color: #444;
 line-height: 1.3;
 font-weight: normal;
 background: #eee;
}

@-webkit-keyframes fadeout {
 0% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}

@keyframes fadeout {
 0% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}

@-webkit-keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

@keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

.fadeout {
 -webkit-animation-name: fadeout;
 animation-name: fadeout;
 animation-duration: 1s;
 -webkit-animation-duration: 1s;
}

.fadeIn {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 animation-duration: 1s;
 -webkit-animation-duration: 1s;
}

@keyframes slideLeft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-50%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@-webkit-keyframes slideRight {
 0% {
  opacity: 0;
  -webkit-transform: translateX(90%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@keyframes slideRight {
 0% {
  opacity: 1;
  -webkit-transform: translateX(90%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@-webkit-keyframes slideLeft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-50%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@-webkit-keyframes slideRights {
 0% {
  opacity: .5;
  -webkit-transform: translateX(1000%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@keyframes slideRights {
 0% {
  opacity: .5;
  -webkit-transform: translateX(1000%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@-webkit-keyframes slideLeft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-50%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@-webkit-keyframes slideLefts {
 0% {
  opacity: .5;
  -webkit-transform: translateX(-1000%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

@keyframes slideLefts {
 0% {
  opacity: .5;
  -webkit-transform: translateX(-1000%);
 }
 100% {
  opacity: 1;
  -webkit-transform: translateX(0%);
 }
}

.sidenav {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: rgb(255, 255, 255);
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;
}

.sticky {
 background: #ffffff;
 box-shadow: 0 0 10px 0 rgba(0, 0, 0, .7);
 box-sizing: border-box;
 margin: 0;
 width: 100%;
 min-height: 48px;
 position: fixed;
 top: 0;
 padding: 8px;
}

.menu-open {
 padding: 0;
 margin: 0;
 height: 45px;
 width: 45px;
}

.menu-open:hover {
 opacity: .8;
}

.menu-close {
 width: 55px;
 height: 30px;
 animation-name: slideLeft;
 -webkit-animation-name: slideLeft;
 animation-duration: .8s;
 -webkit-animation-duration: .8s;
}

.menu-open,
.menu-close,
.codehim-s-btn {
 background: none;
 border: none;
 cursor: pointer;
 outline: 0;
 font-size: 22pt;
 color: #e41b17;
 font-weight: normal;
 font-family: FontAwesome;
}

.sRight {
 position: absolute;
 right: 10px;
 top: 15px;
 color: #e41b17 !important;
 transition: .3s;
}

.codehim-s-btn {
 transition: .3s;
 color: #ddd;
}

.dim-overlay {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 animation-duration: .8s;
 -webkit-animation-duration: .8s;
}

.dim-overlay:before {
 content: "";
 background-color: rgba(0, 0, 0, .6);
 height: 100vh;
 left: 0;
 position: fixed;
 top: 0;
 width: 100%;
 overflow: hidden;
}

.sidenav a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s;
}

.sidenav a:hover {
 color: #f1f1f1;
}

.sidenav .closebtn {
 position: absolute;
 top: 15px;
 left: 5px;
 font-size: 22pt;
}

.now-search>.codehim-search {
 display: none;
}

.codehim-search {
 display: inline;
 padding: 5px;
 margin: 0;
 position: absolute;
 width: 80%;
 box-sizing: border-box;
 position: absolute;
 animation-name: slideRight;
 -webkit-animation-name: slideRight;
 animation-duration: 1s;
 -webkit-animation-duration: 1s;
}

.codehim-search input {
 display: inline-block;
 padding: 10px;
 outline: 0;
 font-size: 12pt;
 line-height: 1;
 border: none;
 background: none;
}

.codehim-search input[type=text] {
 width: 68%;
 color: #666;
 caret-color: #e41b17;
}

.codehim-search input[type=submit] {
 right: 30px;
 position: absolute;
 background: #e41b17;
 color: #fff;
 font-weight: 600;
 border-radius: 2px;
 text-align: center;
 vertical-align: middle;
 margin-top: 2px;
}

#main {
 transition: margin-left .5s;
 padding: 16px;
}

@media screen and (max-height: 450px) {
 .sidenav {
  padding-top: 15px;
 }
 .sidenav a {
  font-size: 18px;
 }
}

.s-ani {
 animation-name: slideRights;
 -webkit-animation-name: slideRights;
 animation-duration: .6s;
 -webkit-animation-duration: .6s;
}

.s-ani-L {
 animation-name: slideLefts;
 -webkit-animation-name: slideLefts;
 animation-duration: .6s;
 -webkit-animation-duration: .6s;
}

.hidden {
 visibility: hidden;
 -webkit-animation-name: fadeout;
 animation-name: fadeout;
 animation-duration: .5s;
 -webkit-animation-duration: .5s;
}

.codehim-logo {
 display: inline-block;
 position: absolute;
}

.codehim-logo img {
 width: 150px;
 height: auto;
 margin-left: 6px;
 margin-top: 4px;
}

article {
 margin-top: 60px;
 line-height: 1.3;
}

section {
 padding: 15px;
}

CSS Customization

Top bar that contains Menu icon and search icon can be easily customized by the following css selector.
.sticky {
 background: #fff; // ← Replace it With your Favorite Color
}
Similarly, you can easily change, customize, edit and use this CSS according to your needs.

Jquery Code for Side Navigation Menu and Search

<script>
function openNav(){var e,n;document.getElementById("mySidenav").style.width="250px",n="dim-overlay",-1==(e=document.getElementById("main")).className.split(" ").indexOf(n)&&(e.className+=" "+n)}function closeNav(){document.getElementById("mySidenav").style.width="0",document.getElementById("main").classList.remove("dim-overlay")}$(document).ready(function(){var e=$(".menu-open, article, main, section"),n=$(".codehim-logo"),a=$(".codehim-s-btn"),s=$("#searchb"),d=$("#s-now");e.click(function(){n.removeClass("hidden fadeout"),d.addClass("now-search"),a.removeClass("s-ani"),s.addClass("sRight s-ani-L")}),a.click(function(){n.addClass("hidden fadeIn"),a.addClass("s-ani"),s.removeClass("sRight s-ani-L"),d.removeClass("now-search")})});
</script>

Leave your reply.
EmoticonEmoticon