-4

Boa tarde, estou tentando configurar meu menu ao clicar aparecer o sub menu, só não sei o porque de não esta chamando, se alguém tiver uma sugestão. (OBS: coloquei o <script type="text/javascript" src="js/script.js"></script> na pg do menu).

Código Menu:

     <nav class="meen">
                <div>           
                    <ul>
                        <li>
                            <a href="#" class="oculto">SALA DE AULAS VIRTUAIS</a>
                                
                            <ul class="itenbtn">
                                <li><a href="#">CURSOS ONLINE & AULA +</a></li>
                                <li><a href="#">CURSOS $ CONCURSOS</a></li>
                            </ul>
                        </li>   
                   </ul>
           </nav>
           <script type="text/javascript" src="js/script.js"></script>
        </div>      
        </body>
    </html>

 Código CSS:
    .meen{
        background: #15aebc;
        width: 250px;
        height:100%;    
    }
    .meen ul{
        padding: 1px 1px;
        background: #15aebc;
        height:100%;
        width:100%;
        list-style: none;
    }
    .meen ul li{
        line-height: 50px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .meen ul li a{  
        font-family:'Poppins', sans-serif;
        color: white;
        font-size: 15px;
        text-decoration: none;  
    }
    .meen ul li:hover{
        background: #118c97;
    }
    .meen ul ul{
        display:none;
        
    }
    .meen ul .itenbtn.mostra{
        display: block;
    }

Código Script:
$('.oculto').click(function(){
    $('.meen ul .itenbtn').toggleClass('mostra');
});
2
  • Oi, Robson, sempre que possível tente deixar seu código escrito na pergunta e não como print, isso ajuda quem for responder sua pergunta se for necessário alterar algo. 10/09/2020 às 19:38
  • Alterado, obrigado pelo conselho, agora se conseguir me ajudar nesta questão agradeço. Abraços. 10/09/2020 às 19:55

2 Respostas 2

-2

Robson, seu código está funcional, porém se seu objetivo é abrir o menu clicando na área em verde, recomendo fazer as modificações abaixo:

$('.oculto').click(function() {
$('.meen ul .itenbtn').toggleClass('mostra');
});
.meen {
background: #15aebc;
width: 250px;
height: 100%;
}
.meen ul {
padding: 1px;
background: #15eabc;
height: 100%;
width: 100%;
list-style: none;
}
.meen ul li {
line-height: 50px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.meen ul li a {
color: white;
font-size: 15px;
text-decoration: none;
/* ADICIONAR AS LINHAS ABAIXO */
display: inline-block;
width: 100%;
}
.meen ul li:hover {
background: #118c97;
}
.meen ul ul {
display: none;
}
.meen ul .itenbtn.mostra {
display: block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class='meen'>
  <div>
    <ul>
      <li>
        <a href="#" class="oculto">Sala de aulas virtuais</a>
        <ul class="itenbtn">
          <li><a href#>Curso Online & Aula</a></li>
          <li><a href#>Cursos & Concursos</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Resumindo: Adicionar display: inline-block e width: 100% fará o link (tag a) ocupe toda li;

Espero ter ajudado.

1
  • Fiz a devida alteração, mas não obtive o resultado, a alguma possibilidade de algum comando interferindo? 10/09/2020 às 20:24
-3

Você pode utilizar o display: inline-block´ e width: 100%`

lembrando que você pode utilizar o bootstrap para te auxiliar nas classes, ainda mais com este tipo de aplicação (aonde o bootstrap é excelente)

https://getbootstrap.com/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .