save file

Author: javascript-2020

code-dev/25-11-29/scrolling-nav-side-bar/scrolling-nav-side-bar.html

@@ -0,0 +1,107 @@
+
+
+            <meta name=viewport content='width=device-width, initial-scale=1'>
+
+<style>
+
+  html
+    {font-family:arial}
+    
+  #side
+    {position:fixed;top:0;height:100%;left:0}
+  #nav
+    {position:absolute;left:-210px;top:0;bottom:0;background:linear-gradient(180deg,#004E89 0%,#1A7FA0 100%);width:200px;padding:10px;
+      box-sizing:border-box;overflow:auto;transition:all 1s}
+  #nav.active
+    {left:0;opacity:1}
+  ul
+    {list-style:none}
+  li
+    {margin:10px}
+  li::before 
+    {content:"★";color:gold;margin-right:8px;}
+  #overlay
+    {position:fixed;left:0;top:0;width:100%;height:100%;background:black;opacity:0;z-index:-1;transition:all 1s;visibility:hidden}
+  #overlay.active
+    {opacity:0.5;visibility:visible}
+  .menu
+    {--s:100px;--c:black;height:var(--s);aspect-ratio:1;border:none;padding:0;border-inline:calc(var(--s)/2) solid #0000;box-sizing:content-box;--_g1:linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) no-repeat content-box border-box;--_g2:radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) repeat-y content-box border-box;background:var(--_g2) left var(--_p,0) top,var(--_g1) left calc(var(--s)/ 10 + var(--_p,0px)) top,var(--_g2) right var(--_p,0) top,var(--_g1) right calc(var(--s)/ 10 + var(--_p,0px)) top;background-size:20% 80%,40% 100%;position:relative;clip-path:inset(0 25%);-webkit-mask:linear-gradient(90deg,#0000,#000 25% 75%,#0000);cursor:pointer;transition:background-position .3s var(--_s,.3s),clip-path 0s var(--_s,.6s);-webkit-appearance:none;-moz-appearance:none;appearance:none}.menu:after,.menu:before{content:"";position:absolute;border-radius:var(--s);inset:40% 0;background:var(--c);transition:transform .3s calc(.3s - var(--_s,.3s))}.menu:checked{clip-path:inset(0);--_p:calc(-1*var(--s));--_s:0s}.menu:checked:before{transform:rotate(45deg)}.menu:checked:after{transform:rotate(-45deg)}.menu:focus-visible{clip-path:none;-webkit-mask:none;border:none;outline:2px solid var(--c);outline-offset:5px}
+  .menu
+    {width:20px;height:20px;position:absolute;left:-30px;top:10px;transition:all 1s;z-index:1}
+  .menu.active
+    {left:165px}
+    
+  a,a:visited,a:hover
+    {color:white;font-weight:bold}
+    
+</style>
+
+
+      <div id=side>
+      
+            <div id=nav>
+            
+                  <a href="#">
+                      <div>ToolPier</div>
+                  </a>
+                  
+                  <hr>
+                  
+                  <ul>
+                      
+                      <li>
+                          <a href="#">Tool 1</a>
+                      </li>
+                      
+                  </ul>
+            
+            </div>
+            
+            <input type="checkbox" role="button" aria-label="Display the menu" class="menu">
+            
+      </div>
+      
+      <div id=overlay></div>
+
+
+<script>
+                                                                                console.clear();
+        var $   = (root,sel)=>(!sel && (sel=root,root=document),root.querySelector(sel));
+        
+        var side      = $('#side');
+        var nav       = $('#nav');
+        var ul        = $('ul');
+        var li        = $('li');
+        var menu      = $('.menu');
+        var overlay   = $('#overlay');
+        
+        for(var i=0;i<100;i++){
+          
+              var nli   = li.cloneNode(true);
+              $(nli,'a').textContent    = `tool ${i}`;
+              ul.append(nli);
+              
+        }//for
+        
+        menu.onclick      = update;
+        overlay.onclick   = update;
+          
+        function update(){
+          
+              if(menu.classList.contains('active')){
+                    menu.checked    = false;
+                    nav.classList.remove('active');
+                    overlay.classList.remove('active');
+                    menu.classList.remove('active');
+              }else{
+                    menu.checked    = true;
+                    nav.classList.add('active');
+                    overlay.classList.add('active');
+                    menu.classList.add('active');
+              }
+              
+        }//update
+        
+        
+</script>        
+