Prikazi cijelu temu 29.10.2018 11:01
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Lokacija:Tuzla


Predmet:Animirani bocni meni
PreuzmiIzvorni kôd (HTML):
  1. <!DOCTYPE html>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7. .sidenav {
  8.     height: 100%;
  9.     width: 0;
  10.     position: fixed;
  11.     z-index: 1;
  12.     top: 0;
  13.     left: 0;
  14.     background-color: #111;
  15.     overflow-x: hidden;
  16.     transition: 0.5s;
  17.     padding-top: 60px;
  18. }
  19.  
  20. .sidenav a {
  21.     padding: 8px 8px 8px 32px;
  22.     text-decoration: none;
  23.     font-size: 25px;
  24.     color: #818181;
  25.     display: block;
  26.     transition: 0.3s;
  27. }
  28.  
  29. .sidenav a:hover {
  30.     color: #f1f1f1;
  31. }
  32.  
  33. .sidenav .closebtn {
  34.     position: absolute;
  35.     top: 0;
  36.     right: 25px;
  37.     font-size: 36px;
  38.     margin-left: 50px;
  39. }
  40.  
  41. @media screen and (max-height: 450px) {
  42.   .sidenav {padding-top: 15px;}
  43.   .sidenav a {font-size: 18px;}
  44. }
  46. </head>
  48.  
  49. <div id="mySidenav" class="sidenav">
  50.   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  51.   <a href="link1">opis1</a>
  52.   <a href="link2">opis2</a>
  53.   <a href="#">link3</a>
  54.   <a href="#">link4</a>
  55. </div>
  56.  
  57. <h2>Animirani Sidenav Primjer</h2>
  58. <p>Kliknite donji element da biste otvorili bo
  59. ni meni</p>
  60. <span style="font-size:30px;cursor:pointer" onclick="openNav()">0 open</span>
  61.  
  63. function openNav() {
  64.     document.getElementById("mySidenav").style.width = "250px";
  65. }
  66.  
  67. function closeNav() {
  68.     document.getElementById("mySidenav").style.width = "0";
  69. }
  71.      
  72. </body>
  73. </html>
Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.