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.
- <!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"><i class="fa fa-bars"></i></label>
- <ul class="na-menu">
- <li><a href="http://www.c-sharpcorner.com/authors/75a48f/sourabh-somani.aspx"><i class="fa fa-home"></i><span>Home</span></a></li>
- <li><a href="http://www.sourabhsomani.com"><i class="fa fa-map-marker"></i><span>contact me</span></a></li>
- <li><a href="https://www.facebook.com/HackerSourabh"><i class="fa fa-facebook"></i><span>Facebook</span></a></li>
- <li><a href="https://twitter.com/sourabh_somani"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>
- <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>
- </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;
- }
-
- 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;
- }
-
- .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);
- }
-
- 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;
- }
-
- nav.sm-menu li{
- display: block;
- float: left;
- }
-
- 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;
- }
-
- input[type=checkbox]{
- position: absolute;
- top: -99px;
- }
-
-
- nav.sm-menu ul{
- left: -100%;
- }
-
- input[type=checkbox]:checked + nav.sm-menu ul {
- left: 0;
- }
Output
![]()