Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Dúvida no Ex. 10 da Aula 3 - Barra de navegação

Alguém pode me ajudar o código é esse e não aparece o menu ao clicar no botão

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Loja Virtual</title>
</head>
<body>    
    <header>
        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
            <a href="" class="navbar-brand">Alura</a>


            <button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-collapse">Menu</button>

            </div>

            <div class="collapse navbar-collapse">
            <ul class="navbar-nav nav">
                <li><a href="#">Novidades</a></li>
                <li><a href="#">Mais vendidos</a></li>
                <li>
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Camisetas
                        <span class="caret"> </span>
                    </a>
                    <ul class="dropdown">
                        <li><a href="#">Masculino</a></li>
                        <li><a href="#">Feminina</a></li>
                        <li><a href="#">Ifantil</a></li>
                    </ul>    
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Digite a sua busca" />
                <input type="submit" value="buscar" class="btn btn-default" />
            </form>
            </div>
        </nav>
    </header>
    <main>
    <h3 class="text-center">Novidades</h3>
    <div class="col-md-4 thumbnail text-center">
        <figure>
            <img src="img/camisa-azul.png" alt="camisa azul">
            <div>
                <h4>Camisa azul</h4>
                <p>texto da camisa azul descritivo</p>
            </div>
        </figure>
        <div class="btn-group">
            <a href="#" class="btn btn-default">R$129,00</a>
            <a href="#" class="btn btn-primary">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                Comprar</a>
        </div>
    </div>

    <div class="col-xs-12 col-md-4 thumbnail text-center">
        <figure>
            <img src="img/camisa-rosa.png" alt="camisa azul">
            <div>
                <h4>Camisa rosa</h4>
                <p>texto da camisa rosa descritivo</p>
            </div>
        </figure>
        <div class="btn-group">
            <a href="#" class="btn btn-default">R$129,00</a>
            <a href="#" class="btn btn-primary">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                Comprar</a>
        </div>
    </div>

    <div class="col-xs-12 col-md-4 thumbnail text-center">
        <figure>
            <img src="img/camisa-azul.png" alt="camisa azul">
            <div>
                <h4>Camisa azul nacional</h4>
                <p>texto da camisa azul nacional descritivo</p>
            </div>
        </figure>
        <div class="col-xs-12 btn-group">
            <a href="#" class="btn btn-default">R$129,00</a>
            <a href="#" class="btn btn-primary">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                Comprar</a>
        </div>
    </div>
    </main>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>
8 respostas
solução!

Olá Rafael! Veja bem foram encontrados alguns erros no Curso de Bootstrap mas a equipe do Alura ja está trabalhando para consertar.

O erro é no botão menu:

<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-collapse">Menu</button>

Ao invés da classe ser class="navbar-collapse" O correto é class="navbar-toggle".

Mas fora isso encontrei um pequeno erro em seu código. Você pôs:

<ul class="dropdown">

Quando o correto é:

<ul class="dropdown-menu">

Enfim, Espero ter ajudado! Bons Estudos!

Romário estive com este mesmo problema então coloquei navbar-toggle e deu certo escondeu , mas porque na video-aula ele consegue fazer certo?

Wildemarkes, foi porque o Bootstrap sofreu modificações. Quando a aula foi gravada estava funcionando daquele jeito, porem hoje foi alterado. O curso de Bootstrap está passando por reformulação devido a isso.

O que o Romário falou deu certo para mim, mas tive que baixar e colocar o Jquery na página, ele não explicou isso em vídeo...

Sim Rafael, isso é outro problema, por isso o Curso de Bootstrap está passando por reparos.

Poxa logo agora que estou precisando! mas eu fiz e não deu certo.

Wildemarkes abra uma dúvida no forum com o seu erro para eu te ajudar. Assim fica mais facil

P

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