Transfer

SUBMITTED BY: repremaq09

DATE: Feb. 28, 2023, 1:23 a.m.

UPDATED: Oct. 21, 2024, 1:16 a.m.

FORMAT: Text only

SIZE: 5.8 kB

History Raw Download

HITS: 33843

Report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Barra Lateral</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  7. <style>
  8. body {
  9. background-color: #333;
  10. color: #fff;
  11. }
  12. .sidebar {
  13. width: 100%;
  14. height: auto;
  15. background-color: #222;
  16. padding: 15px;
  17. }
  18. .sidebar ul {
  19. list-style: none;
  20. padding-left: 0;
  21. display: none;
  22. }
  23. .sidebar ul li {
  24. margin-bottom: 10px;
  25. }
  26. .content {
  27. padding: 15px;
  28. }
  29. .hide-sidebar {
  30. display: none;
  31. }
  32. .menu-buttons {
  33. display: flex;
  34. flex-wrap: wrap;
  35. }
  36. .menu-buttons .btn {
  37. margin-right: 10px;
  38. }
  39. .active {
  40. background-color: #4CAF50 !important;
  41. color: #fff !important;
  42. }
  43. .inactive {
  44. background-color: #FF0000 !important;
  45. color: #fff !important;
  46. }
  47. .toggle-sidebar-container {
  48. position: fixed;
  49. left: 0;
  50. bottom: 0;
  51. width: 100%;
  52. padding: 15px;
  53. z-index: 9999;
  54. }
  55. .dashboard-button {
  56. margin-right: 10px;
  57. }
  58. .menu-container {
  59. display: flex;
  60. align-items: center;
  61. }
  62. .dashboard-menu-container {
  63. display: flex;
  64. justify-content: space-between;
  65. align-items: center;
  66. margin-top: 20px;
  67. }
  68. </style>
  69. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  70. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  71. <script>
  72. $(document).ready(function(){
  73. $("#menu-toggle").click(function(){
  74. $("#menu").slideToggle();
  75. $(this).toggleClass("active");
  76. $("#new-menu").slideUp();
  77. $("#new-menu-toggle").removeClass("active");
  78. $("#button-1-links").slideUp();
  79. $("#button-1").removeClass("active");
  80. $("#button-2-links").slideUp();
  81. $("#button-2").removeClass("active");
  82. $("#button-3-links").slideUp();
  83. $("#button-3").removeClass("active");
  84. $("#toggle-sidebar").removeClass("active");
  85. });
  86. $("#new-menu-toggle").click(function(){
  87. $("#new-menu").slideToggle();
  88. $(this).toggleClass("active");
  89. $("#menu").slideUp();
  90. $("#menu-toggle").removeClass("active");
  91. $("#button-1-links").slideUp();
  92. $("#button-1").removeClass("active");
  93. $("#button-2-links").slideUp();
  94. $("#button-2").removeClass("active");
  95. $("#button-3-links").slideUp();
  96. $("#button-3").removeClass("active");
  97. $("#toggle-sidebar").removeClass("active");
  98. });
  99. $("#button-1").click(function(){
  100. $("#button-1-links").slideToggle();
  101. $(this).toggleClass("active");
  102. $("#menu").slideUp();
  103. $("#menu-toggle").removeClass("active");
  104. $("#new-menu").slideUp();
  105. $("#new-menu-toggle").removeClass("active");
  106. $("#button-2-links").slideUp();
  107. $("#button-2").removeClass("active");
  108. $("#button-3-links").slideUp();
  109. $("#button-3").removeClass("active");
  110. $("#toggle-sidebar").removeClass("active");
  111. });
  112. $("#toggle-sidebar").click(function(){
  113. $(".sidebar").animate({width:'toggle'}, 200);
  114. $(".content").toggleClass("col-xs-12 col-xs-9");
  115. $(this).toggleClass("active");
  116. });
  117. });
  118. </script>
  119. </head>
  120. <body>
  121. <div class="sidebar">
  122. <div class="menu-buttons">
  123. <button id="menu-toggle" class="btn btn-primary">CONTAS SSH</button>
  124. <button id="new-menu-toggle" class="btn btn-primary">REVENDAS</button>
  125. <button id="button-1" class="btn btn-primary">SERVIDORES</button>
  126. <button id="button-2" class="btn btn-primary">CONFIGURAÇÕES</button>
  127. </div>
  128. <ul id="menu" class="list-unstyled">
  129. <li><a href="#">Criar Conta SSH</a></li>
  130. <li><a href="#">Criar Teste SSH</a></li>
  131. <li><a href="#">SSH Online</a></li>
  132. <li><a href="#">Listar SSH</a></li>
  133. </ul>
  134. <ul id="new-menu" class="list-unstyled">
  135. <li><a href="#">Novo Revendedor</a></li>
  136. <li><a href="#">Revendedores</a></li>
  137. <li><a href="#">Adicionar Servidor</a></li>
  138. <li><a href="#">Alterar Revenda</a></li>
  139. </ul>
  140. <ul id="button-1-links" class="list-unstyled">
  141. <li><a href="#">Novo Servidor</a></li>
  142. <li><a href="#">Listar Servidores</a></li>
  143. </ul>
  144. </div>
  145. <div class="content col-xs-9 col-xs-offset-3">
  146. <!-- Main content -->
  147. </div>
  148. <div>
  149. <h1>-OOOOOOOOOOOO</h1>
  150. <h1>-OOOOOOOOOOOO</h1>
  151. <h1>-OOOOOOOOOOOO</h1>
  152. <h1>-OOOOOOOOOOOO</h1>
  153. </div>
  154. <div class="toggle-sidebar-container">
  155. <div class="dashboard-menu-container">
  156. <button id="dashboard-button" class="btn btn-danger dashboard-button">DASHBOARD</button>
  157. <div class="menu-container">
  158. <button id="toggle-sidebar" class="btn btn-primary">MENU</button>
  159. <button id="button-3" class="btn btn-danger dashboard-button">SAIR</button>
  160. </div>
  161. </div>
  162. </div>
  163. </body>
  164. </html>
comments powered by Disqus