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

 





 

 
 










 




  About
  Services
  Clients
  Contact

HTML Customization

1. Change 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:

   
     About
     Services
     Clients
     Contact
   

   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