Vanilla Javascript - #22 Toggle

23/05/2019

No tutorial de hoje trabalharemos com a criação de um botão com o efeito toggle, estilo interruptor. Esse exemplo é muito utilizado em botões mobile.

HTML

No html vamos criar um botão como o elemento que acionará o evento e um menu que receberá o efeito toggle.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Toggle</title>
</head>

<body>
    <div class="menu">
        <a href="#">Link A</a><br>
        <a href="#">Link B</a>
    </div>

    <img id="btn" src="button.png" alt="button mobile">

    <script src="javascript.js"></script>
</body>
</html>

Posteriormente vamos fazer uma estilização simples no CSS:

.menu{display:none;}

.show{display:block;}

#btn{cursor:pointer;}

O javascript será o responsável por fazer o efeito toggle:

(function readyJS(win,doc){
    'use strict';

    let btn=doc.querySelector("#btn");
    let menu=doc.querySelector(".menu");
    let body=doc.querySelector("body");

    function toggle(event) {
        if(menu.classList.contains("show")){
            menu.classList.remove("show");
            btn.setAttribute("src","button.png");
            body.style.backgroundColor='white';
        }else{
            menu.classList.add("show");
            btn.setAttribute("src","close.png");
            body.style.backgroundColor='black';
        }
    }
    btn.addEventListener("click",toggle,false);
})(window, document);

Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #21 Propriedades e Atributos

Na aula de hoje trabalharemos com manipulação de propriedades e atributos dos elementos que compõe o DOM do nosso website.

Vanilla Javascript - #23 Expressões Regulares

No tutorial de hoje trabalharemos com expressões regulares, sua importância, formas de usar na linguagem Javascript.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.