Sub-Menu-1.15-glas-morphism

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: linear-gradient(135deg, #f0f0f0 10%, #d9e0e8 100%);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: flex;
        justify-content: space-around;
        align-items:center;
      }

      .section:hover {
        transform: scale(1.02);
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.2);
      }     
        
      .mainButton:hover {
        width: 10%;
        height: 100%;
        box-shadow: 0 0 10px rgba(255, 255, 255, 1);
        background: rgba(25, 55, 25, 1);
        font-size: 1.2rem;
        color: red;
        transform: translatey(10%);
      }

      .section:hover .mainButton:hover ~ .title {
        font-size: 1.2rem;
        color: white;
        transform: translatey(5%);
      }      
    </style>
    
    <script>
    	function create_mainDiv() {
        const mainDiv = document.createElement("div");
        			mainDiv.id = "mainDiv";
              mainDiv.style.width = "100%";
              mainDiv.style.minHeight = "60px";
              mainDiv.style.maxHeight = "90px";
              mainDiv.style.height = "80vh";
              mainDiv.style.backgroundColor = "transparent";
              mainDiv.style.position = "fixed";
              mainDiv.style.top = "0px";
              mainDiv.style.left = "0px";
              mainDiv.style.display = "flex";
              mainDiv.style.justifyContent = "space-around";
              mainDiv.style.alignItems = "center";
              mainDiv.style.zIndex = 10;
        document.body.appendChild(mainDiv);
        
       ...