SHARE
TWEET

sidenav

a guest Aug 23rd, 2019 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div id="mySidenav" class="sidenav">
  2.             <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  3.             <a href="#"><i class="fa fa-bolt" style="margin-right:10px;" aria-hidden="true"></i>Breaking News</a>
  4.             <a href="#"><i class="fa fa-newspaper-o" style="margin-right:10px;" aria-hidden="true"></i>World News</a>
  5.             <a href="#"><i class="fa fa-laptop" style="margin-right:10px;" aria-hidden="true"></i>Tech News</a>
  6.             <a href="#"><i class="fa fa-shopping-bag" style="margin-right:10px;" aria-hidden="true"></i>Fashion News</a>
  7.             <a href="#"><i class="fa fa-briefcase" style="margin-right:10px;" aria-hidden="true"></i>Business News</a>
  8.             <a href="#"><i class="fa fa-bank" style="margin-right:10px;" aria-hidden="true"></i>Stock Market News</a>
  9.             <a href="#"><i class="fa fa-soccer-ball-o" style="margin-right:10px;" aria-hidden="true"></i>Sports News</a>
  10.         </div>
  11.         <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  12.             <span style="font-size:30px;cursor:pointer;color:#fff;margin-right:5px;padding-right:5px;" onclick="openNav()">&#9776; </span>
  13.             <a class="navbar-brand" href="#">Information Pool System</a>
  14.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
  15.                 <span class="navbar-toggler-icon"></span>
  16.  
  17.  
  18. ----------------------------------------------
  19. <style>
  20. body {
  21.   font-family: "Lato", sans-serif;
  22. }
  23.  
  24. .sidenav {
  25.   height: 100%;
  26.   width: 0;
  27.   position: fixed;
  28.   z-index: 1;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: #111;
  32.   overflow-x: hidden;
  33.   transition: 0.5s;
  34.   padding-top: 60px;
  35. }
  36.  
  37. .sidenav a {
  38.   padding: 8px 8px 8px 32px;
  39.   text-decoration: none;
  40.   font-size: 25px;
  41.   color: #818181;
  42.   display: block;
  43.   transition: 0.3s;
  44. }
  45.  
  46. .sidenav a:hover {
  47.   color: #f1f1f1;
  48. }
  49.  
  50. .sidenav .closebtn {
  51.   position: absolute;
  52.   top: 0;
  53.   right: 25px;
  54.   font-size: 36px;
  55.   margin-left: 50px;
  56. }
  57.  
  58. #main {
  59.   transition: margin-left .5s;
  60.   padding: 16px;
  61. }
  62.  
  63. @media screen and (max-height: 450px) {
  64.   .sidenav {padding-top: 15px;}
  65.   .sidenav a {font-size: 18px;}
  66. }
  67. </style>
  68.  
  69.  
  70.  
  71.  
  72. --------------------------------------------------
  73. <script>
  74. function openNav() {
  75.   document.getElementById("mySidenav").style.width = "250px";
  76.   document.getElementById("main").style.marginLeft = "250px";
  77. }
  78.  
  79. function closeNav() {
  80.   document.getElementById("mySidenav").style.width = "0";
  81.   document.getElementById("main").style.marginLeft= "0";
  82. }
  83. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top