Advertisement
Crazykk1449

Loading GIFs Website SideNav Code

Mar 24th, 2017
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.71 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.     font-family: cursive, sans-serif;
  7. }
  8.  
  9. .sidenav {
  10.     height: 100%;
  11.     width: 0;
  12.     position: fixed;
  13.     z-index: 1;
  14.     top: 0;
  15.     left: 0;
  16.     background-color: #000000;
  17.     overflow-x: hidden;
  18.     transition: 0.5s;
  19.     padding-top: 100px;
  20. }
  21.  
  22. .sidenav a {
  23.     padding: 8px 8px 8px 32px;
  24.     text-decoration: none;
  25.     font-size: 25px;
  26.     color: #818181;
  27.     display: block;
  28.     transition: 0.5s
  29. }
  30.  
  31. .sidenav a:hover, .offcanvas a:focus{
  32.     color: #f1f1f1;
  33. }
  34.  
  35. .sidenav .closebtn {
  36.     position: absolute;
  37.     top: 0;
  38.     right: 25px;
  39.     font-size: 36px;
  40.     margin-left: 50px;
  41.     margin-top: 50px;
  42. }
  43.  
  44. @media screen and (max-height: 450px) {
  45.   .sidenav {padding-top: 15px;}
  46.   .sidenav a {font-size: 18px;}
  47. }
  48. </style>
  49. </head>
  50. <body>
  51.  
  52. <div id="mySidenav" class="sidenav">
  53.   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  54.   <a href="http://loading-gifs.weebly.com/index.html">Home</a>
  55.   <a href="http://loading-gifs.weebly.com/gif-category_shop.html">Shop GIFs</a>
  56.   <a href="http://loading-gifs.weebly.com/gif-category_game.html">Game GIFs</a>
  57.   <a href="http://loading-gifs.weebly.com/gif-category_animal.html">Animal GIFs</a>
  58.   <a href="http://loading-gifs.weebly.com/gif-category_book.html">Book GIFs</a>
  59.   <a href="http://loading-gifs.weebly.com/gif-category_film.html">Film GIFs</a>
  60. </div>
  61.  
  62. <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
  63.  
  64. <script>
  65. function openNav() {
  66.     document.getElementById("mySidenav").style.width = "250px";
  67. }
  68.  
  69. function closeNav() {
  70.     document.getElementById("mySidenav").style.width = "0";
  71. }
  72. </script>
  73.      
  74. </body>
  75. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement