JSFiddle - React, Tailwind, and code Playground

by TsarS

HTML

<div class="header__menu">
                <div class="menu__button" id="menu_button">
                 open
                </div>               
  </div>
  <div class="menu-wrapper" id="topMenuWindow">
                <div class="menu-window">
                    Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
                    
                </div>
    </div>

CSS

.menu-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    position: fixed;
    top: 0; left: 0;
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.1);
    display: none;
    z-index:3;
}
.menu-window {
    background:white;
    height:200px;
    width:200px;
}
.menu__button {
    color: red;
    z-index:4;
}
.menu__button--active {
    color: #000;
    z-index:4;

}

JavaScript

(function () {
    var activeModificator = "--active";
    var topMenuClassName = 'menu__button';
    var topMenuButton = document.querySelector("#menu_button");
   var topMenuWindow = document.querySelector('#topMenuWindow');

    /**     
     * Регистрируем обработчики
     */
    topMenuButton.addEventListener('click', topMenuButtonChange);

    function topMenuButtonChange() {      
       topMenuShow();
    }

    function topMenuShow() {
        topMenuWindow.style.display = (topMenuWindow.style.display === "block") ? "none" : "block";
    }



})();