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

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

Amigos,

Passei pela mesma situação do MENU não estar expandido. Após baixar o JQUERY e importar os arquivos JS do jquery e bootstrap no body (depois movi esses arquivos para dentro o HEAD) houve sucesso da função de esconder o menu, graças as dicas do amigos do forum. ACHO QUE CABERIA UMA REVISÃO POR PARTE DA ALURA NESSE EXERCÍCIO. Segue meu código para consulta para os demais colegas:

<!DOCTYPE html>

<html>
    <head>
        <title>Loja Virtual</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width"/>
        <script src="js\jquery2.2.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <style>
        .navbar-header button {
        color:#FFFFFF;
    }
    </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-toggle="collapse" class="navbar-toggle">
                        Menu
                    </button>
                </div>

                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-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 href="#">Masculina</a></li>
                                <li><a href="#">Feminina</a></li>
                                <li><a href="#">Infantil</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>
            <div>
                 <h3 class="text-center">Novidades</h3>
            </div>

            <div class="col-xs-12 col-md-4 thumbnail text-center">          
                <figure>
                    <img src="img/camisa-azul.png" t="camisa azul importada"/>

                    <div>                                                             
                        <h4>Camisa azul importada</h4>
                        <p>Camisa azul importada com preço acessível 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-xs-12 col-md-4 thumbnail text-center">

                <figure>

                    <img src="img/camisa-rosa.png" t="camisa azul importada"/>

                    <div>                                                             
                        <h4>Camisa rosa argentina</h4>
                        <p>Camisa rosa argentina importada 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-xs-12 col-md-4 thumbnail text-center">

                <figure>

                    <img src="img/camisa-azul.png" t="camisa azul importada"/>

                    <div>                                                             
                        <h4>Camisa azul nacional</h4>
                        <p>Camisa azul naciona com preço acessível e com pano de qualidade </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>
5 respostas

Olá Ricardo,

obrigado pela informação. irei notificar aos responsáveis para adicionar essa informação.

solução!

Ricardo, vou marcar a resposta como solução. Porém, quem deveria ganhar os pontos era você, por ter reportado esse problema! Muito obrigado! :)

Putzz valew, estava ficando doido tentando ver se eu tinha errado algo no código. :)

O meu funcionou tanto dentro de BODY quanto no HEAD, no meu a tag

O meu funcionou tanto dentro de BODY quanto no HEAD, no meu a tag (div class="collapse navbar-collapse") não esconde o menu, só quando modifico para (div class="collapse nav-collapse") que esconde