Slide navigation from right to left
August 21, 2016 | 3211 Views

Slide navigation from right to left

Navigation has an important role in all the websites and mobile applications, navigation is the one which guides the user to navigate all pages in your website. Read this article to learn and build sliding navigation bar for your website.

Common Issues

Sliding the navigation bar from the right to the left can be done using some lines of CSS and some lines of JavaScript but the problem is, the animation sometimes jumps and it won't be smooth while the sliding happens.

In this tutorial, we are going to make the sliding navigation menu bar without any problems using CSS and some lines of java scripts.

Creating The Structure - Using Html

The HTML code to achieve the basic structure of the sliding navigation bar is shown below.

<html>
   <head>
      <title>slide nav From right to left</title>
      <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="css/styles.css">
      <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="js/scripts.js"></script>
   </head>
   <body>
      <div class="top-bar">
         <div class="logo">
            <a href="#">LOGO</a>
         </div>
         <div class="menu">
            <a href="#" id="click-a"><i class="fa fa-bars"></i></a>
         </div>
      </div>
      <div class="nav ">
         <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">CONTACT</a></li>
         </ul>
      </div>
   </body>
</html>

Add Styling - Using CSS

The following are the CSS to achieve the styles for sliding navigation bar is shown below. Here for the menu we are going to keep two classes with different styling property's . The first class is .nav that have a styling property to hide the menu and the second class .nav-view have the styling property to show the menu.

p{
body {
    margin: 0;
    height: 100%;
}
/*top bar*/

.top-bar {
    height: 70px;
    width: 100%;
    background-color: #222;
    position: fixed;
    top: 0;
}
.top-bar .logo {
    padding: 20px;
}
.top-bar .logo a {
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 5px;
}
.top-bar .menu {
    position: absolute;
    right: 20px;
    top: 20px;
}
.top-bar .menu a {
    color: #fff;
    font-size: 27px;
}
/*nav*/

.nav {
    position: fixed;
    right: 0;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background-color: #333;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.nav-view {
    transform: translateX(0);
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.nav ul li a {
    color: #fff;
    display: block;
    padding: 10px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

Handling The Event - Using Java Script

The following are the code to animate the navigation bar. In HTML we have a href="#" id="click-a" for this we are going to make a click event. When this click happens we just going to add .nav-view class to show the menu bar and remove the .nav-view to hide the menu bar.

/*creating click event*/
$(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

Here the toggleClass()is the function which adds and removes the .nav-view from the class="nav" to slide the navigation menu bar.





Free html templates

Download from a vast library of Open Source HTML & CSS templates and use them for free. No licenses required. Apart from that, do you need to build a whole website from scratch? Write to us anytime and we will get it sorted.

Contact Us

More Links