<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="icon-bar"> <a href="#">aaaaaaaaaaaa <i class="fa fa-home"></i></a> <a href="#">bbbbbbbbbbbbbb <i class="fa fa-search"></i></a> <a href="#">cccccccccccccccccccc <i class="fa fa-envelope"></i></a> <a href="#">dddddddddddddd <i class="fa fa-globe"></i></a> <a href="#">eeeeeeeeeeee<i class="fa fa-trash"></i></a> </div>

.icon-bar { position: absolute; left: -250px; /*how much it hide*/ transition: 0.3s; padding: 10px; width: 310px; /*how much it show*/ text-decoration: none; font-size: 16px; color: white; border-radius: 0 5px 5px 0; background-color: #0093d0; z-index: 1; } .icon-bar a { display: block; /* Make the links appear below each other instead of side-by-side */ text-align: right; /* Center-align text */ padding: 16px; /* Add some padding */ transition: all 0.3s ease; /* Add transition for hover effects */ color: white; /* White text color */ font-size: 20px; /* Increased font-size */ } .icon-bar a:hover { background-color: #555; /* Add a hover color */ width: 600px; left: 0; border-radius: 0 5px 5px 0; }