API tools faq
paste
Kawiesh

Collapsible floating div

Kawiesh
Apr 26th, 2022 (edited)
294
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="theme-color" content="black"/>
  6. <meta name="msapplication-TileColor" content="#da532c"/>
  7. <meta name="msapplication-navbutton-color" content="black"/>
  8. <meta name="apple-mobile-web-app-capable" content="yes"/>
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  11.  
  12. <title>Collapsible Menu</title>
  13.  
  14. <style>            
  15. *{
  16. box-sizing: border-box;
  17. margin:0; padding:0;
  18. outline: none;
  19. border: none;
  20. }  
  21.  
  22. body{
  23. background: rgb(251,244,234) url("");
  24. min-width: 100vw;
  25. max-width: 100vw;
  26. min-height: 100vh;
  27. position: relative;
  28. display: flex;
  29. flex-direction: column;
  30. justify-content: flex-start;
  31. align-items: center;
  32. }
  33.  
  34.  
  35. #menu{
  36. position: absolute;
  37. z-index: 9999;
  38. top: 5px; left: 5px;
  39. height: 30px; width: 30px;
  40. overflow: visible;
  41. font: 12px Arial;
  42. }
  43.  
  44. #menu .close{
  45. z-index: ;
  46. overflow: hidden;
  47. font: 35px Arial;
  48. height: 100%; width: 100%;
  49. background: pink;
  50. color: red;
  51. outline: 1px solid black;
  52. }
  53.  
  54. #menu .holder{
  55. z-index: -1;
  56. position: absolute;
  57. top: 30px; left: 0px;
  58. height: 200px; width: 300px;
  59. }
  60.  
  61. .holder .upper{
  62. position: absolute;
  63. top: -30px;
  64. height: 30px; width: 100%;
  65. outline: 1px solid black;
  66. background: white;
  67. }
  68.  
  69.  
  70. .holder .lower{
  71. height: 100%; width: 100%;
  72. outline: 1px solid black;
  73. background: white;
  74. }
  75.  
  76.  
  77. .center{
  78. display: flex;
  79. flex-direction: column;
  80. align-items: center;
  81. justify-content: center;
  82. }
  83.  
  84. .hidden{
  85. display: none;
  86. pointer-events: none;
  87. }
  88.  
  89. </style>
  90. </head>
  91. <body>
  92. <div id="menu">
  93. <div class="close center">×</div>
  94. <div class="holder center">
  95.   <div class="upper center">
  96.      something here
  97.   </div>
  98.   <div class="lower center">
  99.      something here
  100.   </div>
  101. </div>
  102. </div>
  103.  
  104.  
  105. <script>               
  106. let create= (x)=> document.createElement(x),
  107. select= (x,y=document)=> y.querySelector(x),
  108. selectAll= (x,y=document)=> y.querySelectorAll(x);
  109.  
  110.  
  111. function collapseMenu(){
  112. let close= select("#menu .close");
  113. let holder= select(".holder");
  114. close.onclick=()=>{
  115. holder.classList.toggle("hidden");
  116. };
  117. }
  118.  
  119. collapseMenu();
  120.  
  121.  
  122. </script>  
  123. </body>
  124. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!