1
resposta

Não consegui Consertar o bug do menu conforme aula 8

Boa noite

Na aula de consertando o bug do menu fiz todas as tratativas propostas pelo tutor Yuri Padinha para consertar o bug do menu e não funcionou. Segue código para análise.

<div class="collapse navbar-collapse" id="collapse-navbar">
                <ul class="nav navbar-nav">
                    <li><a href="#sobre-nos">Sobre nós</a></li>
                    <li><a href="#nossos-projetos">Nossos Projetos</a></li>
                    <li><a href="#depoimento">Depoimentos</a></li>
                    <li><a href="#video">Video Institucional</a></li>
                    <li><a href="#contato">Contato</a></li>
                </ul>
            </div>
        </div>

<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/navbar-animation-fix.js"></script>

$('#navbar-topcasafina').on('show.bs.collapse', function() { $('.topcasafina-banner').css('transform', 'translate(-50%, 10%)'); });

$('#navbar-topcasafina').on('hide.bs.collapse', function() { $('.topcasafina-banner').css('transform', 'translate(-50%, -50%)'); });

.topcasafina-banner { color: #FFF; background-color: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 8px; width: 80%; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s; }

Imagem dos diretórios que estão os caminhos do "navbar-animation-fix.js"

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oi Mário,

Pelo que entendi essas linhas estão adicionando um evento no #navbar-topcasafina:

$('#navbar-topcasafina').on('show.bs.collapse', function() { 
    $('.topcasafina-banner').css('transform', 'translate(-50%, 10%)'); 
});

$('#navbar-topcasafina').on('hide.bs.collapse', function() { 
    $('.topcasafina-banner').css('transform', 'translate(-50%, -50%)'); 
});

Porém o container do seu menu se chama #collapse-navbar, então deveria ficar assim:

$('#collapse-navbar').on('show.bs.collapse', function() { 
    $('.topcasafina-banner').css('transform', 'translate(-50%, 10%)'); 
});

$('#collapse-navbar').on('hide.bs.collapse', function() { 
    $('.topcasafina-banner').css('transform', 'translate(-50%, -50%)'); 
});

Veja se funciona assim e conta aí pra gente =)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software