delphi program menu

Меню на JS

by rga4

HTML

<!doctype html>
<html lang="ru">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <div class="dropdown">
      <button onclick="menuDropDown(this,'menu1')" class="dropbtn">Движение ТМЦ</button>
      <div id="menu1" class="dropdown-content">
        <a href="#home"><img src="" class="icon ico1" />Приходы список</a>
        <a href="#about"><img src="" class="icon ico1" />Расходы список</a>
        <a href="#contact"><img src="" class="icon ico1" />Переводы список</a>
        <hr>
        <a href="#contact"><img src="" class="icon ico2" />Остатки по складу</a>
        <a href="#contact"><img src="" class="icon ico2" />Движение за период</a>
      </div>
      <button onclick="menuDropDown(this,'menu2')" class="dropbtn">Справочники</button>
      <div id="menu2" class="dropdown-content">
        <a href="#home2">Номенклатура</a>
        <a href="#about2">Контрагенты</a>
        <a href="#contact2">Склады</a>
        <a href="#contact2">Курсы</a>
      </div>
      <button id="mb3" onclick="menuDropDown(this,'menu3')" class="dropbtn">Управление</button>
      <div id="menu3" class="dropdown-content">
        <a href="#home2"><img src="" class="icon icoUser" />Пользователи</a>
        <a href="#about2"><img src="" class="icon icoParam" />Параметры и блокировки</a>
        <a href="#contact2">Журнал действий</a>
      </div>
    </div>
  </body>

</html>

CSS

body {
        font-size: 2vw;
        font-family: Arial;
    }
    .dropbtn {
        color: black;
        padding: 5px;
        border: none;
        background-color: #e0e0e0;
    }
    
    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
        color: white;
    }
    
    .dropdown {
        display: inline-block;
        background-color: #e0e0e0;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #e0e0e0;
        overflow: auto;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
        z-index: 1;
        border-style: solid;
        border-color: #e0e0e0;
    }
    
    .dropdown-content a {
        color: black;
        padding: 3px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown a:hover {
        background-color: #2980B9;
        color: white;
    }
    
    .show {
      display: block;
     }

.icon {
  background-image: url(https://art-nto.ru/800/600/https/glue.readthedocs.io/en/0.2.6.1/_images/famfamfam1.png);
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.ico1 { background-position: -240px -144px; }
.ico2 { background-position: 0px 0px; }
.icoUser { background-position: -96px -32px; }
.icoParam { background-position: -128px -432px; }

JavaScript

mn = null; // Initially dropdown is closed

// When the user clicks on the button, showing the dropdown
function menuDropDown(sender, id) {
  if (mn != null) {
    mn.classList.remove('show');
  }
  mn = document.getElementById(id);
  mn.style.left = sender.getBoundingClientRect().x + 'px'; // horiz allign menu
  mn.classList.toggle("show");
}
// Close the dropdown if user clicks outside of it
window.onclick = function(event) {
  if (mn != null) {
    if (!event.target.matches('.dropbtn')) {
      mn.classList.remove('show');
      mn = null;
    }
  }
}