Ícone animado “x” para o botão de alternância da barra de navegação do Bootstrap

[Gilberto Jr 26]

Bom dia Pessoal;

 

Seguinte, eu criei o menu bootstrap segue o código abaixo. Quando eu estou vendo o site pelo celular, o menu vira um HAMBURGUER. Só que eu quero quando clicar no HAMBURGUER ele vira um X.

E quando eu clicar no link ele voltar para o HAMBURGUER.

<nav class="navbar navbar-default navbar-fixed-top">
        
        <!--INICIO DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->
        <div class="container-fluid containertop" id="topoinicio">

        
            <div class="navbar-header">
                <!--INICIO CONFIGURAÇÃO MENU HAMBERGUER-->
                <button type="button" class="navbar-toggle menuHamburguer" data-toggle="collapse" data-target="#menu-navegacao">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>

                </button>
                <!--FIM CONFIGURAÇÃO MENU HAMBERGUER-->


                <!--INICIO LOGO MARCA-->
                
                <!--<a class="navbar-brand" href="#page-top">
                    <span class="iden">Iden</span> <span class="techonology">Technology</span>
                </a>-->
                <ol class="nav">
                <ol class="menu" style="border:none;">
                    <a href="#home">
                    <img src="img/ico_3.png" class="img-responsive img-rounded imgLogo">
                    </a>
                </ol>
                </ol>
                
                <!--FIM LOGO MARCA-->
            </div>

            <!--INICIO MENU LINK-->
            <div class="collapse navbar-collapse menu-navegacao" id="menu-navegacao">
                
                <ul class="nav navbar-nav navbar-right">
                    <li class="menu">
                        <a href="#home">HOME</a>
                    </li>
                    <li class="menu">
                        <a href="#solucoes">SOLUÇÕES</a>
                    </li>
                    
                    <li class="menu">
                        <a href="#servicos">SERVIÇOS</a>
                    </li>                    

                    <li class="menu">
                        <a href="#empresa">EMPRESA</a>
                    </li class="menu">

                    <li class="menu">
                        <a href="#localizacao">LOCALIZAÇÃO</a>
                    </li>                    

                    <li class="menu">
                        <a href="#contato">CONTATO</a>
                    </li>

                    <li class="abrirlink">
                        <a href="https://identechnology.tomticket.com?account=444224P07112016122136" title="Acessar Help Desk" target="_blank">TICKET<a>
                    </li>                                                                                


                </ul>

            </div>
            <!--FIM MENU LINK-->

        </div>
        <!--FIM DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->

    </nav>

 

Eu tenho esse código abaixo CSS, que funciona um pouco. Só que o ele ja abre com o X.

<style type="text/css">       

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

</style>

Veja a imagem abaixo de quando eu entro no site. Ele entra com o X. E quando eu clico pela primeira vez no X, ele continua o x. E quando pela segunda vez clico no X ou clico em menu da lista ele volta para o HAMBURGUER.

 

Para ajudar, segue o link do site.

Iden Technology

 

[Vitor Leite 0]

Utilize a propriedade toggleClass(); do jQuery

Tal propriedade alterna adicionando e removendo uma classe num elemento, quando é clicado pela primeira vez, o X aparece, depois que clicado denovo, o X desaparece.

 

[Gilberto Jr 26]

4 horas atrás, Vitor Leite disse:

Utilize a propriedade toggleClass(); do jQuery

Tal propriedade alterna adicionando e removendo uma classe num elemento, quando é clicado pela primeira vez, o X aparece, depois que clicado denovo, o X desaparece.

 

Boa noite @Vitor Leite, Teria um exemplo para eu começar a estudar essa propriedade?

 

Att;

Gilberto Jr

[Maujor 144]

@Gilberto Jr

Acrescente a classe collapsed  na marcação HTML como mostrado a seguir:

<!--INICIO CONFIGURAÇÃO MENU HAMBERGUER-->
<button type="button" class="navbar-toggle menuHamburguer collapsed" <===AQUI 
  data-toggle="collapse" data-target="#menu-navegacao">

 

 

 

[Gilberto Jr 26]

2 horas atrás, Maujor disse:

@Gilberto Jr

Acrescente a classe collapsed  na marcação HTML como mostrado a seguir:

<!--INICIO CONFIGURAÇÃO MENU HAMBERGUER-->
<button type="button" class="navbar-toggle menuHamburguer collapsed" <===AQUI 
  data-toggle="collapse" data-target="#menu-navegacao">

 

 

 

 

Matou o meu problema @Maujor

Obrigado.

 

Att;

Gilberto Jr