×
Ir ao conteúdo
  • Cadastre-se

HTML menu dropdown não funciona


Alice Braga
Ir à solução Resolvido por GabrielSennaMs,

Posts recomendados

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!--principal->



          <div class="container-fluid">  <!--largura total-->

             <button type="button" class="navbar-toggler collapsed" data-toggle="collapse"> <!--menu toggle -->

              <span class="navbar-toggler-icon"></span> 

            </button>

           


             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!--para agrupar e ocultar-->

                <ul class="navbar-nav">

                   <li class="nav-item"><a href="#" class="nav-link">Home</a>

                   </li>



<div class="dropdown">

                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                   About

                  </a>

                   <div class="dropdown-menu" >

                    <a class="dropdown-item" href="#">Introduction to SmartMenus jQuery </a>

                    <a class="dropdown-item" href="#">Themes</a>

                    <a class="dropdown-item" href="#">The autor</a>

                    <a class="dropdown-item" href="#">Old SmartMenusVersions</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item" href="#">The Company</a>

                  </div>

                </div>



               


                   <li class="nav-item"><a href="#" class="nav-link">Download</a>

                   </li>



                   

                   <li class="nav-item dropdown">

                    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                  Support

                  </a>

                   

                   <li class="nav-item"><a href="#" class="nav-link">Docs</a>

                   </li>

               

                   

                </ul>

                </div>

</nav>

</div>

imagem_2021-11-29_135554.png

Link para o comentário
Compartilhar em outros sites

@Alice Braga

 

Pela classes utilizadas no seu HTML você está usando Boostrap >= 5, fica a duvida se você adicionou a parte de Javascript do Boostrap no seu elemento head.

 

Para o Boostrap 5

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

 

Com isso o seu dropdown deve funcionar!

 

Obs..: Tem alguns erros no seu HTML, no link de suporte falto você adicionar o elemento com os elementos para o dropdown-menu e fechar o elemento </li>

 

<li class="nav-item dropdown">
    <a 
        class="nav-link dropdown-toggle" 
        href="#" 
        role="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
    >
        Support
    </a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Introduction to SmartMenus jQuery </a>
    </div>
</li>

 

Link para o comentário
Compartilhar em outros sites

  • Solução

@Alice Braga Se esse for o caso então seu HTML está errado porque na versão Boostrap <= 4 a propriedade para utilizar o 'dropdown' é "data-toggle="dropdown"

 

De uma olhada na documentação do navbar aqui no site oficial https://getbootstrap.com/docs/4.6/components/navbar/

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Curso de Hacker Ético

LANÇAMENTO!

CLIQUE AQUI E CONFIRA!

* Este curso não é ministrado pela equipe do Clube do Hardware.