Problems with drop down display

Asked

Viewed 23 times

0

I’m using an unordered list to perform a drop down ,I managed to inherit all the characteristics of CSS and call the corresponding functions but my drop down is not displayed (even the console not pointing errors) follows the code .

 <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Empresa X</title>
    <link rel="stylesheet" href="_css/css.css"/>
</head>
<body>
    <header id="cabecalho">
        <h1 id="tituloPagina">Empresa XYZ</h1>
        <nav id="menuSite">
            <ul id="listaCompleta">
                <li>Principal</li>
                <li>Perfil</li>
                <li id="funcao" onmouseover=" showMenu()" onmouseleave="javascript: closeMenu()">Função
                    <ul id="subMenu">
                    <li id="dadosDaFuncao">Dados da Funcao</li>
                    </ul>
                </li>
                <!--<li>Equipe-->
                    <!--<ul class="open">-->
                    <!--<li class="subMenu">Supervisor <a href="Supervisor.html"></a></li>-->
                    <!--<li class="subMenu">Integrantes <a href="Integrantes.html"></a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <li>Sair</li>
            </ul>
        </nav>
        <img src="_imagens/usuarioLogin.png" id="logoEmpresa"/>
        <img src="_imagens/imagem_header.jpg" id="imagemHeader"/>
    </header>
    <section id="sessaoDoMenu">

        <div class="ladoEsquerdo">
            <div id="calendario">
                <img src="_imagens/calendario.jpg">
                <h1>Calendário</h1>
            </div>
            <div id="faleConosco">
                <img src="_imagens/faleConosco.png">
                <h1>Fale Conosco</h1>
            </div>
            <div id="avisos">
                <img src="_imagens/avisos.jpg">
                <h1>Avisos</h1>
            </div>
        </div>

        <div class="ladoDireito">

            <div id="alterarSenha">
                <img src="_imagens/alterarSenha.png">
                <h1>Alterar Senha</h1>
            </div>
            <div id="alterarDados">
                <img src="_imagens/alterarDados1.jpg">
                <h1>Alterar Dados</h1>
            </div>
            <div id="metas">
                <img src="_imagens/metas.jpg">
                <h1>Metas</h1>
            </div>
        </div>
    </section>
    <footer id="rodape">
        <h1>Atividade com objetivo educacional</h1>
    </footer>
<script src="_js/scripit.js"></script>
</body>
</html>

css file.css

body{
    margin-left: 12%;
    width: 1000px;
    height: 800px;
}
  /*CABECALHO*/
header#cabecalho h1#tituloPagina{
    width: 205px;
    position: absolute;
}

header#cabecalho h1#tituloDados{
    width: 237px;
    position: absolute;
}

header#cabecalho{
    margin-top: -34px;
    padding: 50px;
    display: block;
}

    /*MENU*/

nav#menuSite{
    position: relative;
    display: block;
    margin-top: 52px;
    margin-left: -39px;
}

nav#menuSite ul{
    position: absolute;
    list-style: none;
    margin-top: 8px;
    padding: 5px;
}

ul#listaCompleta >li:hover{
    background-color: darkblue;
    color: white;
}

nav#menuSite li{
    display: inline-block;
    padding: 12px;
    margin-right: -7px;
    background-color: white;
}

ul#subMenu li#dadosDaFuncao {
    display: none;
    color: white;
    background-color: darkblue;
}

header#cabecalho img#logoEmpresa{
    display: block;
    float: right;
}

    /*MENUPRINCIPAL*/

section#sessaoDoMenu{
    border-top: double;
    margin-left: 50px;
    width: 886px;
    height: 500px;
    display: block;
    margin-top: -40px;
}

section#sessaoDoMenu div.ladoEsquerdo{
    float: left;
    margin-left: 15%;
    margin-top: 50px;
}

    /*CALENDARIO*/

div.ladoEsquerdo div#calendario{
    width: 130px;
}

div#calendario h1{
    text-align: center;
}

div#calendario img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*FALECONOSCO*/
div.ladoEsquerdo div#faleConosco{
    width: 137px;
}

div#faleConosco h1{
    text-align: center;
}

div#faleConosco img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}
    /*AVISOS*/
div.ladoEsquerdo div#avisos{
    width: 140px;
}

div#avisos h1{
    text-align: center;
}

div#avisos img{
    margin-left: 26px;
    margin-top: 10px;
    margin-bottom: -35px;
}

section#sessaoDoMenu div.ladoDireito{
    position: relative;
    float: right;
    margin-right: 15%;
    margin-top: 50px;
}

    /*ALTERAR SENHA*/

div.ladoDireito div#alterarSenha{
    width: 145px;
}

div#alterarSenha h1{
    text-align: center;
}

div#alterarSenha img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*ALTERAR DADOS*/

div.ladoDireito div#alterarDados{
    width: 146px;
}

div#alterarDados h1{
    text-align: center;
}

div#alterarDados img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}

    /*METAS*/

div.ladoDireito div#metas{
    width: 140px;
}

div#metas h1{
    text-align: center;
}

div#metas img{
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: -33px;
}

    /*FOOTER*/

footer#rodape{
    border-top: double;
    text-align: center;
    font-size: 12px;
    width: 886px;
    margin-left: 50px;
}

Scripit.js file

function showMenu() {
    var sub = document.getElementById("subMenu");
    sub.style.display = "block";
    console.log(sub);
}

function closeMenu() {
    var sub = document.getElementById("subMenu");
    sub.style.display = "none";
}
javascript html5 css3

1 answer

1


You can do this only with CSS instead of Javascript.

Using CSS

Add code to your CSS:

<style>
#funcao:hover #subMenu li{
   display: block;
}
</style>

and remove it from the element <li>:

onmouseover=" showMenu()" onmouseleave="javascript: closeMenu()"

body{
    margin-left: 12%;
    width: 1000px;
    height: 800px;
}
  /*CABECALHO*/
header#cabecalho h1#tituloPagina{
    width: 205px;
    position: absolute;
}

header#cabecalho h1#tituloDados{
    width: 237px;
    position: absolute;
}

header#cabecalho{
    margin-top: -34px;
    padding: 50px;
    display: block;
}

    /*MENU*/

nav#menuSite{
    position: relative;
    display: block;
    margin-top: 52px;
    margin-left: -39px;
}

nav#menuSite ul{
    position: absolute;
    list-style: none;
    margin-top: 8px;
    padding: 5px;
}

ul#listaCompleta >li:hover{
    background-color: darkblue;
    color: white;
}

nav#menuSite li{
    display: inline-block;
    padding: 12px;
    margin-right: -7px;
    background-color: white;
}

ul#subMenu li#dadosDaFuncao {
    display: none;
    color: white;
    background-color: darkblue;
}

header#cabecalho img#logoEmpresa{
    display: block;
    float: right;
}

    /*MENUPRINCIPAL*/

section#sessaoDoMenu{
    border-top: double;
    margin-left: 50px;
    width: 886px;
    height: 500px;
    display: block;
    margin-top: -40px;
}

section#sessaoDoMenu div.ladoEsquerdo{
    float: left;
    margin-left: 15%;
    margin-top: 50px;
}

    /*CALENDARIO*/

div.ladoEsquerdo div#calendario{
    width: 130px;
}

div#calendario h1{
    text-align: center;
}

div#calendario img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*FALECONOSCO*/
div.ladoEsquerdo div#faleConosco{
    width: 137px;
}

div#faleConosco h1{
    text-align: center;
}

div#faleConosco img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}
    /*AVISOS*/
div.ladoEsquerdo div#avisos{
    width: 140px;
}

div#avisos h1{
    text-align: center;
}

div#avisos img{
    margin-left: 26px;
    margin-top: 10px;
    margin-bottom: -35px;
}

section#sessaoDoMenu div.ladoDireito{
    position: relative;
    float: right;
    margin-right: 15%;
    margin-top: 50px;
}

    /*ALTERAR SENHA*/

div.ladoDireito div#alterarSenha{
    width: 145px;
}

div#alterarSenha h1{
    text-align: center;
}

div#alterarSenha img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*ALTERAR DADOS*/

div.ladoDireito div#alterarDados{
    width: 146px;
}

div#alterarDados h1{
    text-align: center;
}

div#alterarDados img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}

    /*METAS*/

div.ladoDireito div#metas{
    width: 140px;
}

div#metas h1{
    text-align: center;
}

div#metas img{
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: -33px;
}

    /*FOOTER*/

footer#rodape{
    border-top: double;
    text-align: center;
    font-size: 12px;
    width: 886px;
    margin-left: 50px;
}

#funcao:hover #subMenu li{
   display: block;
}
<header id="cabecalho">
   <h1 id="tituloPagina">Empresa XYZ</h1>
   <nav id="menuSite">
      <ul id="listaCompleta">
         <li>Principal</li>
         <li>Perfil</li>
         <li id="funcao">Função
            <ul id="subMenu">
               <li id="dadosDaFuncao">Dados da Funcao</li>
            </ul>
         </li>
         <!--<li>Equipe-->
         <!--<ul class="open">-->
         <!--<li class="subMenu">Supervisor <a href="Supervisor.html"></a></li>-->
         <!--<li class="subMenu">Integrantes <a href="Integrantes.html"></a></li>-->
         <!--</ul>-->
         <!--</li>-->
         <li>Sair</li>
      </ul>
   </nav>
   <img src="_imagens/usuarioLogin.png" id="logoEmpresa"/>
   <img src="_imagens/imagem_header.jpg" id="imagemHeader"/>
</header>
<section id="sessaoDoMenu">

   <div class="ladoEsquerdo">
      <div id="calendario">
         <img src="_imagens/calendario.jpg">
         <h1>Calendário</h1>
      </div>
      <div id="faleConosco">
         <img src="_imagens/faleConosco.png">
         <h1>Fale Conosco</h1>
      </div>
      <div id="avisos">
         <img src="_imagens/avisos.jpg">
         <h1>Avisos</h1>
      </div>
   </div>

   <div class="ladoDireito">

      <div id="alterarSenha">
         <img src="_imagens/alterarSenha.png">
         <h1>Alterar Senha</h1>
      </div>
      <div id="alterarDados">
         <img src="_imagens/alterarDados1.jpg">
         <h1>Alterar Dados</h1>
      </div>
      <div id="metas">
         <img src="_imagens/metas.jpg">
         <h1>Metas</h1>
      </div>
   </div>
</section>
<footer id="rodape">
   <h1>Atividade com objetivo educacional</h1>
</footer>

But if you want to use Javascript, do the following:

Use document.querySelectorAll() in the functions to select the li of #submenu, being like this:

function showMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "block";
    console.log(sub);
}

function closeMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "none";
}


function showMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "block";
    //console.log(sub);
}

function closeMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "none";
}
body{
    margin-left: 12%;
    width: 1000px;
    height: 800px;
}
  /*CABECALHO*/
header#cabecalho h1#tituloPagina{
    width: 205px;
    position: absolute;
}

header#cabecalho h1#tituloDados{
    width: 237px;
    position: absolute;
}

header#cabecalho{
    margin-top: -34px;
    padding: 50px;
    display: block;
}

    /*MENU*/

nav#menuSite{
    position: relative;
    display: block;
    margin-top: 52px;
    margin-left: -39px;
}

nav#menuSite ul{
    position: absolute;
    list-style: none;
    margin-top: 8px;
    padding: 5px;
}

ul#listaCompleta >li:hover{
    background-color: darkblue;
    color: white;
}

nav#menuSite li{
    display: inline-block;
    padding: 12px;
    margin-right: -7px;
    background-color: white;
}

ul#subMenu li#dadosDaFuncao {
    display: none;
    color: white;
    background-color: darkblue;
}

header#cabecalho img#logoEmpresa{
    display: block;
    float: right;
}

    /*MENUPRINCIPAL*/

section#sessaoDoMenu{
    border-top: double;
    margin-left: 50px;
    width: 886px;
    height: 500px;
    display: block;
    margin-top: -40px;
}

section#sessaoDoMenu div.ladoEsquerdo{
    float: left;
    margin-left: 15%;
    margin-top: 50px;
}

    /*CALENDARIO*/

div.ladoEsquerdo div#calendario{
    width: 130px;
}

div#calendario h1{
    text-align: center;
}

div#calendario img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*FALECONOSCO*/
div.ladoEsquerdo div#faleConosco{
    width: 137px;
}

div#faleConosco h1{
    text-align: center;
}

div#faleConosco img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}
    /*AVISOS*/
div.ladoEsquerdo div#avisos{
    width: 140px;
}

div#avisos h1{
    text-align: center;
}

div#avisos img{
    margin-left: 26px;
    margin-top: 10px;
    margin-bottom: -35px;
}

section#sessaoDoMenu div.ladoDireito{
    position: relative;
    float: right;
    margin-right: 15%;
    margin-top: 50px;
}

    /*ALTERAR SENHA*/

div.ladoDireito div#alterarSenha{
    width: 145px;
}

div#alterarSenha h1{
    text-align: center;
}

div#alterarSenha img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*ALTERAR DADOS*/

div.ladoDireito div#alterarDados{
    width: 146px;
}

div#alterarDados h1{
    text-align: center;
}

div#alterarDados img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}

    /*METAS*/

div.ladoDireito div#metas{
    width: 140px;
}

div#metas h1{
    text-align: center;
}

div#metas img{
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: -33px;
}

    /*FOOTER*/

footer#rodape{
    border-top: double;
    text-align: center;
    font-size: 12px;
    width: 886px;
    margin-left: 50px;
}

#fusncao:hover #subMenu li{
   display: block;
}
<header id="cabecalho">
   <h1 id="tituloPagina">Empresa XYZ</h1>
   <nav id="menuSite">
      <ul id="listaCompleta">
         <li>Principal</li>
         <li>Perfil</li>
         <li id="funcao" onmouseover="showMenu()" onmouseleave="closeMenu()">Função
            <ul id="subMenu">
               <li id="dadosDaFuncao">Dados da Funcao</li>
            </ul>
         </li>
         <!--<li>Equipe-->
         <!--<ul class="open">-->
         <!--<li class="subMenu">Supervisor <a href="Supervisor.html"></a></li>-->
         <!--<li class="subMenu">Integrantes <a href="Integrantes.html"></a></li>-->
         <!--</ul>-->
         <!--</li>-->
         <li>Sair</li>
      </ul>
   </nav>
   <img src="_imagens/usuarioLogin.png" id="logoEmpresa"/>
   <img src="_imagens/imagem_header.jpg" id="imagemHeader"/>
</header>
<section id="sessaoDoMenu">

   <div class="ladoEsquerdo">
      <div id="calendario">
         <img src="_imagens/calendario.jpg">
         <h1>Calendário</h1>
      </div>
      <div id="faleConosco">
         <img src="_imagens/faleConosco.png">
         <h1>Fale Conosco</h1>
      </div>
      <div id="avisos">
         <img src="_imagens/avisos.jpg">
         <h1>Avisos</h1>
      </div>
   </div>

   <div class="ladoDireito">

      <div id="alterarSenha">
         <img src="_imagens/alterarSenha.png">
         <h1>Alterar Senha</h1>
      </div>
      <div id="alterarDados">
         <img src="_imagens/alterarDados1.jpg">
         <h1>Alterar Dados</h1>
      </div>
      <div id="metas">
         <img src="_imagens/metas.jpg">
         <h1>Metas</h1>
      </div>
   </div>
</section>
<footer id="rodape">
   <h1>Atividade com objetivo educacional</h1>
</footer>

Suggestion: where you are calling the function this way onmouseleave="javascript: closeMenu()", there’s no need to put javascript:, just put the function this way onmouseleave="closeMenu()", because these attributes already perform Javascript;

  • Both codes worked but I got a doubt pq two [0] after the All selector

  • 1

    @Lucasalves O [0] means the "first of the collection". The document.querySelectorAll('#subMenu li') returns an array (collection) of all selector elements ('#subMenu li')... the [0]is precisely the first of this collection, that is, the first <li> of the element with id #subMenu.

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.