JSFiddle - React, Tailwind, and code Playground

by Ilario Junior David

HTML

<div> Menu
    <ul>
        <li data-method="abreTela"> Menu 1</li>
        <li data-method="abreTela2"> Menu 2</li>
        <li data-method="abreTela3"> Menu 3</li>
    </ul>
    
</div>

CSS

div {
    overflow: hidden;
    height: 30px;
    
    width: 100%;
    background: #e2e2e2;
    border-radius: 5px;
    border: 1px solid #ccc;
}

div:hover{
    overflow: auto;
    height: auto;
}

JavaScript

var classeJs;

Menu = (function() {

    function Menu() {
        if (!(this instanceof Menu)) {
            return new Menu();
        }
    }

    Menu.Init = function(tela) {
		tela.querySelector('div').addEventListener('click', Menu.actions);
    };
    
    Menu.actions = function(e){
    	var data = e.target.dataset.method;
        //alert(data);
        
        if(data){
        	Menu[data](e);
        }
    };
    
    Menu.abreTela = function(e) {
    	alert('chamou o metodo: ' + e.target.dataset.method);	
   	};
    Menu.abreTela2 = function(e) {
    	alert('chamou o metodo: ' + e.target.dataset.method);	
    };
    Menu.abreTela3 = function(e) {
    	alert('chamou o metodo: ' + e.target.dataset.method);	
    };
    
    classeJs = Menu;
    return Menu;

})();

classeJs.Init(document);