Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

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

Referente ao curso Bootstrap: velocidade no front-end, no capítulo Barra de navegação e atividade Fazendo o menu dropdown funcionar

por Henrique
| 268.2k xp | 64 posts
Desenvolvimento

Enfrento 2 problemas:

1) O botão "menu" não comuta a exibição do menu; 2) O botão do dropdown também não funciona;

Segue meu código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<title>Novidades</title>
</head>

<body>

<!--MENU SUPERIOR-->
<header>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Henq</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>Masculina</a></li>
            <li><a>Feminina</a></li>
            <li><a>Infantil</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>

<!--CORPO da Página-->
<h3 class="text-center">Novidades</h3>
<div class="col-md-4 text-center">
  <figure>
    <p><img src="img/camisa-azul.png"></p>
    <div>
      <h4>Descrição</h4>
      <p>Camisa Azul importada</p>
    </div>
  </figure>
  <p>R$ 190,00</p>
  <p><a href="#" class="btn btn-info">Comprar</a></p>
</div>
<div class="col-md-4 text-center">
  <figure>
    <p><img src="img/camisa-rosa.png"></p>
    <div>
      <h4>Descrição</h4>
      <p>Camisa Azul importada</p>
    </div>
  </figure>
  <p>R$ 190,00</p>
  <p><a href="#" class="btn btn-info">Comprar</a></p>
</div>
<div class="col-md-4 text-center">
  <figure>
    <p><img src="img/camisa-azul.png"></p>
    <div>
      <h4>Descrição</h4>
      <p>Camisa Azul</p>
    </div>
  </figure>
  <p>R$ 90,00</p>
  <p><a href="#" class="btn btn-info">Comprar</a></p>
</div>


<--! Esse Item não está nos meus arquivos do BootStrap!!!!!! Onde os enconrtro???-->
<script type="text/javascript" src="js/jquery-2.1.4.js"></script> 
<--!-->

<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>

Obrigado!! :]

6 respostas
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Henrique, tudo certo?

1 - O botão depende do Bootstrap.js para funcionar, e este por sua vez depende do jQuery. Você pode baixá-los em seus respectivos sites (http://code.jquery.com/jquery-1.11.3.min.js e https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip), ou usar os links abaixo no lugar das chamadas que você fez:

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Lembrando que é necessário sempre colocar nessa ordem, primeiro o jQuery e depois o Bootstrap.js.

2 - Onde você colocou a classe dropdown , substitua pela classe dropdown-menu .

3 - O botão está com uma classe trocada, você colocou a navbar-collapse, aí quando você clicasse nele, ele sumiria junto com o menu. Troque essa classe pela navbar-toggle .

Abcs \o

por Henrique
| 268.2k xp | 64 posts
Desenvolvimento

Opa Natan!!

Muito obrigado pela ajuda!!

Só estou com um problema: Os itens do menu já aparecerem no carregamento da página e o botão menu quando pressionado esconde os itens mais depois eles reaparecem.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<title>Novidades</title>
</head>

<body>

<!--MENU SUPERIOR-->
<header>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Henq</a>
    <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="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-menu">
            <li><a>Masculina</a></li>
            <li><a>Feminina</a></li>
            <li><a>Infantil</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>

<!--CORPO da Página-->
<h3 class="text-center">Novidades</h3>
<div class="col-md-4 text-center">
  <figure>
    <p><img src="img/camisa-azul.png"></p>
    <div>
      <h4>Descrição</h4>
      <p>Camisa Azul importada</p>
    </div>
  </figure>
  <p>R$ 190,00</p>
  <p><a href="#" class="btn btn-info">Comprar</a></p>
</div>
<div class="col-md-4 text-center">
  <figure>
    <p><img src="img/camisa-rosa.png"></p>
    <div>
      <h4>Descrição</h4>
      <p>Camisa Azul importada</p>
    </div>
  </figure>
  <p>R$ 190,00</p>
  <p><a href="#" class="btn btn-info">Comprar</a></p>
</div>
<div class="col-md-4 text-center">
  <figure>
    <p><img src="img/camisa-azul.png"></p>
    <div>
      <h4>Descrição</h4>
      <p>Camisa Azul</p>
    </div>
  </figure>
  <p>R$ 90,00</p>
  <p><a href="#" class="btn btn-info">Comprar</a></p>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
solução!
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Henrique, beleza?

Testei aqui seu código e está funcionando normal, dá uma checada: http://jsbin.com/gemexuxeme/edit?html,output

Tenta baixar o jQuery e o Bootstrap.js e chamá-los como arquivos locais mesmo (como vc fez com o CSS do Bootstrap).

Depois conta se foi.

Abcs!

por Rafael Ferroni Mendes
| 16.4k xp | 2 posts

Boa noite, poderiam me ajudar, estou com exatamente o mesmo problema, já experimentei adicionar o jQuery e o Bootstrap.js conforme orientado acima e não funcionou.

Segue o código fonte:

<!DOCTYPE html>

Caelum Menu Novidades Camisa azul importada Camisa azul importada

Camisa azul importada por um preço acessivel e com pano de qualidade

R$ 190,00 Comprar Camisa rosa importada Camisa rosa argentina

Camisa rosa argentina por um preço acessivel e com pano de qualidade

R$ 210,00 Comprar

Desde já agradeço.

Camisa azul nacional Camisa azul nacional

Camisa azul nacional por um preço acessivel e bonita

R$ 90,00 Comprar

por Rafael Ferroni Mendes
| 16.4k xp | 2 posts

Colei errado no post anterior alguém pode me ajudar?

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="bootstrap-3.3.5-dist/jquery-1.11.3.min.js">
        <link rel="stylesheet" href="bootstrap-3.3.5-dist/js/bootstrap.js">
        <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
        <title>Loja Virtual</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <style>
            .navbar-header button {
                color:#fff; 
            }
        </style>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-inverse">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">Caelum</a>
                    <button type="button" data-target=".navbar-collapse" data-toogle="collapse" class="navbar-toggle">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 class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdpwn">Camisetas<span class="caret"></span></a> 
                            <ul class="dropdown-menu">
                                <li><a href="#">Masculino</a> </li>
                                <li><a href="#">Feminino</a> </li>
                                <li><a href="#">Infantil</a> </li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar">
                        <div class="form-group">
                            <input type="text" />
                        </div>
                        <input type="submit" value="Buscar" />
                    </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 importada" />
                    <div>
                        <h4>Camisa azul importada</h4>
                        <p>Camisa azul importada por um preço acessivel e com pano de qualidade</p>
                    </div>
                </figure>
                <div class="btn-group">
                    <a href="#" class="btn btn-default">R$ 190,00</a>
                    <a href="#" class="btn btn-primary">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                        Comprar
                    </a>
                </div>
            </div>
            <div class="col-md-4 thumbnail text-center">
                <figure>
                    <img src="img/camisa-rosa.png" alt="Camisa rosa importada" />
                    <div>
                        <h4>Camisa rosa argentina</h4>
                        <p>Camisa rosa argentina por um preço acessivel e com pano de qualidade</p>
                    </div>
                </figure>
                <div class="btn-group">
                    <a href="#" class="btn btn-default">R$ 210,00</a>
                    <a href="#" class="btn btn-primary">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                        Comprar
                    </a>
                </div>
            </div>
            <div class="col-md-4 thumbnail text-center">
                <figure>
                    <img src="img/camisa-azul.png" alt="Camisa azul nacional" />
                    <div>
                        <h4>Camisa azul nacional</h4>
                        <p>Camisa azul nacional por um preço acessivel e bonita</p>
                    </div>
                </figure>
                <div class="btn-group">
                    <a href="#" class="btn btn-default">R$ 90,00</a>
                    <a href="#" class="btn btn-primary">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                        Comprar
                    </a>
                </div>
            </div>
        </main>
    </body>

</html>
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Rafael, tudo bem?

Você pode abrir outro tópico com a sua dúvida, aí consigo te ajudar melhor lá. Bati o olho no seu código e identifiquei alguns probleminhas.

1 - a chamada dos JS devem ser feitas com a tag script, e não a tag link

2 - chama o jquery e o bootstrap (nessa ordem), antes da tag de fechamento do body.

3 - No button vc colocou toogle, o correto seria toggle.

Testei aqui e só com essas alterações o botão já começa a funcionar,

abcs!