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 an 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.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<input type="checkbox" id="navbutton" name="navbutton">
<nav class="sm-menu">
<label for="navbutton" class="nav-trigger"></label>
<ul class="na-menu">
<li><a href="http://www.c-sharpcorner.com/authors/75a48f/sourabh-somani.aspx">Home</a></li>
<li><a href="http://www.sourabhsomani.com">contact me</a></li>
<li><a href="https://www.facebook.com/HackerSourabh">Facebook</a></li>
<li><a href="https://twitter.com/sourabh_somani">Twitter</a></li>
<li><a href="http://www.c-sharpcorner.com/authors/75a48f/sourabh-somani.aspx">Like Me</a></li>
</ul>
</nav>
</body>
</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.

body, ul, li{
padding: 0;
margin: 0;
}
/*ADDING STYLE TO MAIN WRAPPER*/
nav.sm-menu{
background: rgba(0, 0, 0, 0.75);
color: #fff;
width: 100%;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
font-family: arial;
}
/*ADDING STYLE TO TRIGGER BUTTON*/
.nav-trigger{
font-size: 36px;
padding: 5px 10px;
float: left;
background: #0FC;
cursor: pointer;
}
.nav-trigger:hover{
background: #0FF;
}
.nav-trigger i{
padding: 5px;
color: #585858;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: -webkit-transform 0.5s ease-in-out;
}
input[type=checkbox]:checked + nav.sm-menu .nav-trigger i{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/*STYLE TO LIST*/
nav.sm-menu ul{
display: inline-block;
position: relative;
left: -100%;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
/*STYLE TO LIST ITEMS*/
nav.sm-menu li{
display: block;
float: left;
}
/*STYLE TO LINKS*/
nav.sm-menu li a{
color: #cccccc;
height: 50px;
font-size: 30px;
margin-top: 1px;
line-height: 60px;
text-align: center;
display: block;
padding: 0 20px;
text-decoration: none;
}
nav.sm-menu li a:hover{
color: #fff;
}
nav.sm-menu li a i{
font-size: 36px;
}
nav.sm-menu li a span{
position: absolute;
left: 100%;
top: 0;
width:100%;
padding: 0 20px;
height: 100%;
font-size: 24px;
text-align: left;
line-height: 55px;
text-transform: capitalize;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
-moz-transition: opacity 0.2s ease, visibility 0.2s ease;
-ms-transition: opacity 0.2s ease, visibility 0.2s ease;
-o-transition: opacity 0.2s ease, visibility 0.2s ease;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
nav.sm-menu li a:hover span{
opacity: 1;
visibility: visible;
}
/*SENDING INPUT CHECKBOX OUT OF BROWESER WINDOW*/
input[type=checkbox]{
position: absolute;
top: -99px;
}
/*SENDS THE MENU TO -100% LEFT*/
nav.sm-menu ul{
left: -100%;
}
/*BRINGS BACK THE ICONS MENU WHEN INPOUT IS CHECKED*/
input[type=checkbox]:checked + nav.sm-menu ul {
left: 0;
}

Output

Conclusion

In this article, we studied CSS Navigation Bar With Sliding.