Criando um menu popup customizado com HTML, CSS e JavaScript

Introduç�o

A est�tica (layout, design) da interface com o usu�rio vem se tornando, cada vez mais, um elemento de fundamental import�ncia no desenvolvimento de software. Atualmente, um sistema com interface mais agrad�vel pode facilmente ganhar a prefer�ncia do usu�rio, mesmo quando comparado com um que possua mais funcionalidades, por exemplo, mas apresente um design mais simples.

� funç�o do designer definir o melhor visual para a aplicaç�o, oferecendo recursos visuais que se mostrem como um diferencial da aplicaç�o em relaç�o �s demais. �s vezes pode-se apenas mudar a cor do plano de fundo, a fonte, bordas, etc, de um elemento, e obter um resultado satisfat�rio. Por�m, existem situaç�es em que os requisitos s�o mais complexos e podem necessitar, por exemplo, do desenvolvimento de controles customizados.

Com base nisso, este artigo apresenta uma soluç�o de f�cil compreens�o e implementaç�o, para o desenvolvimento de um menu popup customizado para p�ginas web, utilizando HTML, CSS e JavaScript.

O c�digo HTML

O c�digo HTML utilizado neste exemplo ser� bastante simples, composto apenas por um elemento qualquer (que nesse caso, ser� um t�tulo h1) e uma lista n�o ordenada (ul), que representar� o menu de contexto/popup. O c�digo constante na listagem 1 pode ser salvo como um arquivo de extens�o .html, utilizando qualquer editor de texto simples.

Listagem 1. C�digo HTML da p�gina


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>Menu popup customizado</title>
</head>
<body>
    <div>
        <h1 id="hh1"  oncontextmenu="mostrarMenu(); return false;">H1</h1>
        <h2 id="hh2">H2</h2>
        <h3 id="hh3">H3</h3>
    </div>

    <div id="divMenu">
        <ul>
            <li>COPIAR</li>
            <li>RECORTAR</li>
            <li>COLAR</li>
        </ul>
    </div>
</body>
</html>

Se procedermos conforme a orientaç�o e salvarmos o c�digo acima como um arquivo .html, teremos como resultado, ap�s abri-lo no browser, a configuraç�o ilustrada na figura 1.

Figura 1: Estrutura b�sica da p�gina

Nota: Os t�tulos h2 e h3 foram adicionados apenas para que se possa comparar o menu padr�o com o menu customizado, mais adiante.

O pr�ximo passo � aplicarmos uma formataç�o � lista para que tenhamos o visual desejado.

Formataç�o visual com CSS

O c�digo CSS apresentado aqui pode ser alterado conforme a situaç�o e contexto, de forma que se obtenha o resultado mais adequado ao layout do sistema onde o menu ser� utilizado.

Ent�o, podemos adicionar um par de tags style no cabeçalho (head) da p�gina e inserir o seguinte c�digo, visto na listagem 2. Tamb�m � poss�vel manter essa formataç�o em um arquivo externo e referenci�-lo utilizando a tag link, mas para manter o exemplo o mais simples poss�vel, aqui deixaremos o c�digo CSS dentro da pr�pria p�gina.

Listagem 2. C�digo CSS para formatar o menu

<style>
    #divMenu {
        font:normal 20pt Calibri;
        border:1px dotted blue;
        width:200px;
        padding:0;
        position:absolute;
        background:rgba(133, 192, 242, 0.54) url('background.jpg');
        background-position:-1100px -200px;
        visibility:hidden;
    }

    #divMenu ul{
        list-style-type:none;
        margin:0;
        line-height:50px;
        padding:0;
        text-align:center;
    }

    #divMenu > ul > li {
        cursor:pointer;
    }

    #divMenu > ul > li:nth-child(n < 3) {
        border-bottom:1px dotted;
    }

    #divMenu > ul > li:hover {
        background-color:rgba(133, 192, 242, 0.7);
    }
</style>

Ao inserirmos o c�digo acima na p�gina e atualizarmos o documento no browser, veremos que a lista sumiu. Isso ocorre devido � atribuiç�o do valor hidden � propriedade visibility da div que cont�m a lista. Essa configuraç�o � necess�ria para que o menu fique inicialmente invis�vel, logo ap�s a p�gina ser carregada, pois ele s� deve ser visualizado quando o usu�rio clicar com o bot�o direito do mouse sobre determinado elemento.

Nota: Neste exemplo foi utilizada uma imagem chamada �background.jpg� e a posiç�o do background foi definida com base nas dimens�es da imagem. Esses valores podem mudar, ou at� mesmo nem serem necess�rios, dependendo da imagem utilizada.

Agora que temos o menu j� formatado visualmente, apesar de n�o v�-lo, � preciso utilizar JavaScript para dar funcionalidade a ele.

Exibindo o menu com JavaScript

O pr�ximo passo � inserir tags script, tamb�m no cabeçalho da p�gina, e utilizar JavaScript para fazer com que o menu funcione. O c�digo da listagem 3 tamb�m pode ser salvo em um arquivo externo (removendo as tags script do in�cio e do fim), mas neste exemplo o manteremos na pr�pria p�gina HTML.

Listagem 3. C�digo JavaScript do menu

<script>        
    function mostrarMenu() {
        var X = event.clientX;
        var Y = event.clientY;

        var menu = document.getElementById("divMenu");
            
        menu.style.top = Y.toString() + "px";
        menu.style.left = X.toString() + "px";
        menu.style.visibility = "visible";

        var lis = document.querySelectorAll("#divMenu > ul > li");
        for (var i = 0; i < lis.length; i++) {
            lis.item(i).addEventListener("click", function () {
                menu.style.visibility = "hidden";
            });
        }
    }
        
    window.onload = function () {
        document.addEventListener("click",
            function () {
                document.getElementById("divMenu").style.visibility = "hidden";
            }
        );

        document.querySelector("#divMenu > ul > li:nth-child(1)").addEventListener("click",
            function () {
                alert("copiar...");
            }
        );

        document.querySelector("#divMenu > ul > li:nth-child(2)").addEventListener("click",
            function () {
                alert("recortar...");
            }
        );

        document.querySelector("#divMenu > ul > li:nth-child(3)").addEventListener("click",
            function () {
                alert("colar...");
            }
        );
    }        
</script>

Inicialmente foi criada a funç�o mostrarMenu, que obt�m as coordenadas do cursor no momento do clique e as usa para posicionar a div Menu, alterando sua propriedade visibility para visible, em seguida. Dessa forma, como foi definido que o posicionamento dessa div � do tipo absolute, ela exibida na tela com base nas coordenadas X e Y atribu�das �s suas propriedades CSS left e top.

Em seguida, foi adicionado o c�digo para ocultar o menu quando um de seus itens for receber um clique.

Por fim, foi adicionada funcionalidade aos itens do menu, de forma que cada um apresente uma mensagem ao ser clicado. No lugar da funç�o alert, utilizada como exemplo, pode ser inserido o c�digo relativo ao objetivo de cada item do menu.

Essas funcionalidades foram adicionadas dentro do evento onload do objeto window, pois � necess�rio que toda a estrutura do DOM esteja carregada quando tentarmos acessar os elementos via JavaScript.

Testando

Podemos ent�o atualizar o arquivo no browser e clicar com a direita sobre o t�tulo h1. � esperado um resultado como o apresentado na figura 2.

Figura 2: Menu exibido ao clicar com a direita no elemento h1

Clicando sobre os itens do menu, cada um executa a funç�o que lhe foi atribu�da, como podemos ver na figura 3.

Figura 3: Clicando sobre um item do menu

Conclus�o

Com algum conhecimento de HTML, CSS e JavaScript, � poss�vel customizar ainda mais o menu e dar aos itens funcionalidades mais complexas, atendendo �s exig�ncias da situaç�o.

Esse tipo de menu � muito �til quando se deseja apresentar ao usu�rio, no menu de contexto, apenas opç�es sobre as quais se tem total controle (diferente das opç�es padr�o como �selecionar tudo�, �copiar�, �inspecionar elemento�, etc).

Aqui chega ao fim este artigo, cujo c�digo fonte pode ser obtido no topo desta p�gina.