HTML 5

CSS Navigation Bar With Sliding

Introduction

This article shows how to create a unique toggle menu with a Menu slide. This toggle menu is made up of icons only and when the user hovers over them then the title of that icon will be shown. The icon will slide from left to right side, when the user clicks on the toggle button. 
 
This menu is designed in HTML5/CSS. We used a HTML5 input checkbox type attribute to do so and used advanced CSS3 selectors to add functionality to this icon menu. For this article I am using font-awesome.min.css that you can download.
 
Let's start. First of all I am creating a HTML document. 
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.  <meta charset="UTF-8">  
  5.  <title>Navigation Bar</title>  
  6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  7.  <link rel="stylesheet" href="style.css">  
  8.  <link rel="stylesheet" href="css/font-awesome.min.css">  
  9. </head>  
  10. <body>  
  11.  <input type="checkbox" id="navbutton" name="navbutton">   
  12.  <nav class="sm-menu">  
  13.  <label for="navbutton" class="nav-trigger"><i class="fa fa-bars"></i></label>  
  14.  <ul class="na-menu">  
  15.  <li><a href="http://www.c-sharpcorner.com/authors/75a48f/sourabh-somani.aspx"><i class="fa fa-home"></i><span>Home</span></a></li>  
  16.  <li><a href="http://www.sourabhsomani.com"><i class="fa fa-map-marker"></i><span>contact me</span></a></li>  
  17.  <li><a href="https://www.facebook.com/HackerSourabh"><i class="fa fa-facebook"></i><span>Facebook</span></a></li>  
  18.  <li><a href="https://twitter.com/sourabh_somani"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>  
  19.  <li><a href="http://www.c-sharpcorner.com/authors/75a48f/sourabh-somani.aspx"><i class="fa fa-thumbs-up"></i><span>Like Me</span></a></li>  
  20.  </ul>  
  21.  </nav>  
  22. </body>  
  23. </html>  
From the preceding HTML code we will get the following output:
 
Now add the following CSS rules to set the styles to the navigation bar.
  1. body, ul, li{  
  2.  padding: 0;  
  3.  margin: 0;  
  4. }  
  5. /*ADDING STYLE TO MAIN WRAPPER*/  
  6. nav.sm-menu{  
  7.  background: rgba(0, 0, 0, 0.75);  
  8.  color: #fff;  
  9.  width: 100%;  
  10.  position: fixed;  
  11.  z-index: 9999;  
  12.  top: 0;  
  13.  left: 0;  
  14.  font-family: arial;  
  15. }  
  16. /*ADDING STYLE TO TRIGGER BUTTON*/  
  17. .nav-trigger{  
  18.  font-size: 36px;  
  19.  padding: 5px 10px;  
  20.  float: left;  
  21.  background: #0FC;  
  22.  cursor: pointer;  
  23. }  
  24. .nav-trigger:hover{  
  25.  background: #0FF;  
  26. }  
  27. .nav-trigger i{  
  28.  padding: 5px;  
  29.  color: #585858;  
  30.  -webkit-transition: -webkit-transform 0.5s ease-in-out;  
  31.  -moz-transition: -moz-transform 0.5s ease-in-out;  
  32.  -ms-transition: -ms-transform 0.5s ease-in-out;  
  33.  -o-transition: -o-transform 0.5s ease-in-out;  
  34.  transition: -webkit-transform 0.5s ease-in-out;  
  35. }  
  36. input[type=checkbox]:checked + nav.sm-menu .nav-trigger i{  
  37.  -webkit-transform: rotate(90deg);  
  38.  -moz-transform: rotate(90deg);  
  39.  -ms-transform: rotate(90deg);  
  40.  -o-transform: rotate(90deg);  
  41.  transform: rotate(90deg);   
  42. }  
  43. /*STYLE TO LIST*/  
  44. nav.sm-menu ul{  
  45.  display: inline-block;  
  46.  position: relative;  
  47.  left: -100%;  
  48.  -webkit-transition: left 0.5s ease-in-out;  
  49.  -moz-transition: left 0.5s ease-in-out;  
  50.  -ms-transition: left 0.5s ease-in-out;  
  51.  -o-transition: left 0.5s ease-in-out;  
  52.  transition: left 0.5s ease-in-out;  
  53. }  
  54. /*STYLE TO LIST ITEMS*/  
  55. nav.sm-menu li{  
  56.  display: block;  
  57.  float: left;  
  58. }  
  59. /*STYLE TO LINKS*/  
  60. nav.sm-menu li a{  
  61.  color: #cccccc;  
  62.  height: 50px;  
  63.  font-size: 30px;  
  64.  margin-top: 1px;  
  65.  line-height: 60px;  
  66.  text-align: center;  
  67.  display: block;  
  68.  padding: 0 20px;  
  69.  text-decoration: none;  
  70. }  
  71. nav.sm-menu li a:hover{  
  72.  color: #fff;  
  73. }  
  74. nav.sm-menu li a i{  
  75.  font-size: 36px;  
  76. }  
  77. nav.sm-menu li a span{  
  78.  position: absolute;  
  79.  left: 100%;  
  80.  top: 0;  
  81.  width:100%;  
  82.  padding: 0 20px;  
  83.  height: 100%;  
  84.  font-size: 24px;  
  85.  text-align: left;  
  86.  line-height: 55px;  
  87.  text-transform: capitalize;  
  88.  opacity: 0;  
  89.  visibility: hidden;  
  90.  -webkit-transition: opacity 0.2s ease, visibility 0.2s ease;  
  91.  -moz-transition: opacity 0.2s ease, visibility 0.2s ease;  
  92.  -ms-transition: opacity 0.2s ease, visibility 0.2s ease;  
  93.  -o-transition: opacity 0.2s ease, visibility 0.2s ease;  
  94.  transition: opacity 0.2s ease, visibility 0.2s ease;   
  95. }  
  96. nav.sm-menu li a:hover span{  
  97.  opacity: 1;  
  98.  visibility: visible;  
  99. }  
  100. /*SENDING INPUT CHECKBOX OUT OF BROWESER WINDOW*/  
  101. input[type=checkbox]{  
  102.  position: absolute;  
  103.  top: -99px;  
  104. }  
  105.   
  106. /*SENDS THE MENU TO -100% LEFT*/  
  107. nav.sm-menu ul{  
  108.  left: -100%;  
  109. }  
  110. /*BRINGS BACK THE ICONS MENU WHEN INPOUT IS CHECKED*/  
  111. input[type=checkbox]:checked + nav.sm-menu ul {  
  112.  left: 0;  
  113. }  
Output
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    sourabhsomani.com
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs