VC-Repeater-Menu 1.0

by velo_ninja

HTML

<style>
        .menuDiv {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translate(-50%);
            width: 50vw;
            height: 3vh;
            overflow: auto;
            background-color: rgba(200, 120, 220, 0.8);
            margin-top: 1%;
            margin-bottom: 1%;
            display: flex;
            align-items: center;
			      justify-content: center;
            flex-wrap: wrap;  
            border-radius: 15px 15px 0 0;
        }
    </style>  
  
  <script>
    	function create_Menu() {
        const menuDiv = document.createElement('div');
              menuDiv.classList.add('menuDiv');
              menuDiv.id = 'menuDiv';
              menuDiv.style.width = '50vw';
              menuDiv.style.height = '5vh';
              menuDiv.style.top = '0px';
              menuDiv.style.left = '50%';
              menuDiv.style.marginTop = '1%';
              menuDiv.style.marginBottom = '1%';
              menuDiv.style.position = 'fixed';
              menuDiv.style.display = 'flex';
              menuDiv.style.alignItems = 'center';
              menuDiv.style.justifyContent = 'center';
              menuDiv.style.transform = 'translate(-50%)';
              menuDiv.style.backgroundColor = 'rgba(200, 120, 220, 0.8)';
              menuDiv.style.borderRadius = '15px 15px 0 0';
              menuDiv.style.zIndex = '9900';
				//----------------------------------- 
        const menuDivLeft = document.createElement('div');
              menuDivLeft.classList.add('menuDivLeft');
              menuDivLeft.id = 'menuDivLeft';
              menuDivLeft.style.width = '20vw';
              menuDivLeft.style.height = '50px';
              menuDivLeft.style.margin = 'auto';
              menuDivLeft.style.display = 'flex';
              menuDivLeft.style.alignItems = 'center';
              menuDivLeft.style.justifyContent = 'center';
              menuDivLeft.style.backgroundColor = 'green';
           ...