Close menu when clicking off with javascript

Navigation
5

I have the following code 

//Menu Mobile

var closeTab = document.getElementById("close-i");

document.querySelector(".user-list").onclick = function() {
    document.documentElement.classList.add("menu-ativo")
};
document.documentElement.onclick = function(event){
    if (event.target === document.documentElement) {
        document.documentElement.classList.remove("menu-ativo");
    }
}
closeTab.onclick = function(event){
    document.documentElement.classList.remove("menu-ativo");
}

//Menu Desktop


var menuDesk = document.getElementById("menu-desktop");
var optDesk = document.getElementById("opt-desktop");
var deskIcon = document.getElementById("menu-desk-icon");


menuDesk.onclick = function(event){
    if (optDesk.style.display == "none") {
        deskIcon.classList.remove("fa-chevron-right");
        deskIcon.classList.add("fa-chevron-down");
        optDesk.style.display = "inline-block";
    }
    else{
        deskIcon.classList.remove("fa-chevron-down");
        deskIcon.classList.add("fa-chevron-right");
        optDesk.style.display = "none";
    }
};

* But it did not work

HTML 

<div class="header-mobile on-top" id="mobile-header">
            <div class="user-holder">
                <p class="user-list"><!-- Ícone para abrir o menu --></p>
                <nav class="user-opt">
                    <p id="close-i">
                        <i class="fa fa-times fa-2x" aria-hidden="true"></i>
                    </p>
                    <!-- Imagem mostrada dentro do menu e nome de usuário -->
                    <figure class="imagem-atual">
                        <img src="img/perfil.jpg" alt="imagem-usuário">
                        <figcaption>Murilo Gambôa</figcaption>
                    </figure>
                    <!-- Barra de Opções -->
                    <ul>
                        <a href="meu-perfil.html"><li class="item-1"><i class="fa fa-cog i-menu" aria-hidden="true"></i><span>Editar perfil</span></li></a>
                        <a href="ultimos-adicionados.html"><li class="item-2"><i class="fa fa-video-camera i-menu" aria-hidden="true"></i><span>Últimos vídeos</span></li></a>
                        <a href="http://webmail.impd.org.br/webmail" target="_blank"><li class="item-3"><i class="fa i-church i-menu"></i><span>Eclesiástico</span></li></a>
                        <a href="ajuda.html"><li class="item-4"><i class="fa fa-question i-menu" aria-hidden="true"></i><span>Ajuda</span></li></a>
                        <a href="index.html"><li class="item-5"><i class="fa fa-sign-out i-menu" aria-hidden="true"></i><span>Sair</span></li></a>  
                    </ul>
                </nav>
                <!-- Ícones sociais -->
                <ul class="social" id="social-icons">
                    <li class="is is-1"><a href="" class="is" target="_blank">Facebook</a></li>
                    <li class="is is-2"><a href="" class="is" target="_blank">Twitter</a></li>
                    <li class="is is-3"><a href="" class="is" target="_blank">Instagram</a></li>
                    <li class="is is-4"><a href="" class="is" target="_blank">YouTube</a></li>
                </ul>
            </div>
        </div>
        <div class="header-desk on-top" id="desktop-header">
            <div class="user-holder">
                <!-- Ícones sociais -->
                <ul class="social">
                    <li class="is is-1"><a href="" class="is" target="_blank">Facebook</a></li>
                    <li class="is is-2"><a href="" class="is" target="_blank">Twitter</a></li>
                    <li class="is is-3"><a href="" class="is" target="_blank">Instagram</a></li>
                    <li class="is is-4"><a href="" class="is" target="_blank">YouTube</a></li>
                </ul>
                <!-- Menu do Usuário -->
                <nav class="user-opt-desk" id="menu-desktop">
                    <figure>
                        <img src="img/perfil.jpg">
                        <figcaption >Nome de Usuário da Silva</figcaption>
                    </figure>
                    <i class="fa fa-chevron-right" aria-hidden="true" id="menu-desk-icon"></i>
                    <!-- Barra de Opções -->
                    <ul id="opt-desktop">
                        <a href="meu-perfil.html"><li class="item-1"><i class="fa fa-cog i-menu" aria-hidden="true"></i><span>Editar perfil</span></li></a>
                        <a href="ultimos-adicionados.html"><li class="item-2"><i class="fa fa-video-camera i-menu" aria-hidden="true"></i><span>Últimos vídeos</span></li></a>
                        <a href="http://webmail.impd.org.br/webmail" target="_blank"><li class="item-3"><i class="fa i-church i-menu"></i><span>Eclesiástico</span></li></a>
                        <a href="ajuda.html"><li class="item-4"><i class="fa fa-question i-menu" aria-hidden="true"></i><span>Ajuda</span></li></a>
                        <a href="index.html"><li class="item-5"><i class="fa fa-sign-out i-menu" aria-hidden="true"></i><span>Sair</span></li></a>  
                    </ul>
                </nav>
            </div>
        </div>
    
asked by anonymous 11.10.2016 / 18:22

1 answer

4

Well, to capture the click off the menu you have already discovered. So you just have to ignore the click inside the menu. You can take the following approach. 

document.documentElement.onclick = function(event){

    if (event.target !== optDesk) {
        optDesk.style.display = 'none';
    }
}

Instead of comparing target to the entire document you can ignore it when the click occurs within optDesk . Also, I suggest declaring events with the element.addEventListener('click', function (e) {}); directive instead of element.onclick . Also, I suggest you use a library to manipulate DOM as jQuery for example, the way to manipulate DOM is much clearer, easier, and optimized.

    
11.10.2016 / 19:23
What are the differences between require () and library ()? How to create program in C that can use parameters?