Ir para conteúdo
Gilberto Jr

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

Recommended Posts

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

 

Untitled-2.fw.png

Untitled-3.fw.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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">

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro 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

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.