<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 ----------> <div id="sideNav" class="sidenav"> <a href="#" id="sidNavLink1"><span class="fa fa-envelope fa-lg"></span>eWork Reporting</a> <a href="#" id="sidNavLink2"><span class="fa fa-cloud-upload fa-lg"></span> Drop Folder Upload</a> <a href="#" id="sidNavLink3"><span class="fa fa-file-text-o fa-lg"></span> Unit Tracker - Service Reports/JSA</a> <a href="#" id="sidNavLink4"><span class="fa fa-industry fa-lg"></span> Unit Tracker - Unit Reports</a> <a href="#" id="sidNavLink5"><span class="fa fa-building fa-lg"></span> Unit Tracker - Stockroom</a> </div>

/* Style the links inside the sidenav */ #sideNav a { position: absolute; left: -280px; transition: 0.3s; padding: 15px; width: 320px; text-decoration: none; font-size: 16px; color: white; border-radius: 0 5px 5px 0; background-color: #0093d0; } #sideNav a:hover { left: 0; } #sidNavLink1 { top: 20px; } #sidNavLink2 { top: 80px; } #sidNavLink3 { top: 140px; } #sidNavLink4 { top: 200px; } #sidNavLink5 { top: 260px; }