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

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

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

por Victor Molina de Avila
| 107.2k xp | 12 posts

Meu código esta assim, não consigo fazer o navbar exibir os links, eu clico em menu e nada acontece, já tentei importar o js, mas não funciona, o que posso estar fazendo errado? 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Loja Virtual</title>

<link rel="stylesheet" href="js/bootstrap.min.js"/>
<link rel="stylesheet" href="css/bootstrap.min.css" />


<meta name="viewport" content="width=devide-width" />
</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="navbar-nav nav">
                <li><a href="#">Novidades</a></li>
                <li><a href="#">Mais vendidos</a></li>
                <ul class="navbar-nav nav">
         <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Camisetas
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Masculinas</a></li>
            <li><a href="#">Femininas</a></li>
            <li><a href="#">Infantil</a></li>
        </ul>
    </li>  
</ul>
        <form class="navbar-form navbar-right">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Digite a sua busca"/>
            </div>
            <input type="submit" value="Buscar" class="btn btn-default"  />
        </form>      
        </div>
    </nav>
</header>
5 respostas
por Victor Molina de Avila
| 107.2k xp | 12 posts

Está assim: <!--

Caelum
por Felipe Faé Schwade
| 523.7k xp | 53 posts
Assessor de Projetos

Seu código tem umas ul's que não estão fechando e também algumas estão no lugar errado, experimente trocar esse trecho 

<div class="collapse navbar-collapse">
            <ul class="navbar-nav nav"> <!-- Esta Ul não tem </ul> -->
                <li><a href="#">Novidades</a></li>
                <li><a href="#">Mais vendidos</a></li>
                <ul class="navbar-nav nav"> <!--  Ul no lugar errado-->
         <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Camisetas
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Masculinas</a></li>
            <li><a href="#">Femininas</a></li>
            <li><a href="#">Infantil</a></li>
        </ul>
    </li>  
</ul>

Por este, as instruções das modificações estarão comentadas:

 <div class="collapse navbar-collapse"> <!-- Criando um menu escondido para celulares -->
                    <ul class="navbar-nav nav"> <!-- Criando a <ul> da lista de links -->
                        <li><a href="#">Novidades</a></li>
                        <li><a href="#">Mais vendidos</a></li>
                        <li> <!-- Inserir um <li> normal -->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Camisetas
                                <span class="caret"> </span>
                            </a>  <!-- Botão de ativação -->
                            <ul class="dropdown-menu"> <!-- Utilizar a <ul> dentro da <li> atual -->
                                <li><a href="#">Masculinas</a></li>
                                <li><a href="#">Femininas</a></li>
                                <li><a href="#">Infantil</a></li>
                            </ul> <!-- Fechar a  lista do dropdown -->
                        </li> <!-- Fechar a <li> da lista de links -->
                    </ul> <!-- Fechar lista de links-->
por Victor Molina de Avila
| 107.2k xp | 12 posts

Ainda não funcionou, o navbar ainda não aparece na tela. Obrigado por ajudar, mas estou sem saber o que fazer, essa lição não tem um download para eu corrigir o que estou errando no código todo também.

solução!
por KLAUBER
| 183.1k xp | 2 posts

A 'não-funcionalidade' se dá principalmente por dois problemas: A falta do Jquery, e o Bootstrap.js estar declarado no local errado. Para resolver, tire a linha "link rel="stylesheet" href="js/bootstrap.min.js" de sua tag head, e no final do código (pode ser logo antes de fechar a tag body), declare ambos, com as seguintes linhas:

OBS: se não tiver o JQuery, baixe-o ( http://code.jquery.com/jquery-2.2.1.min.js ) e salve-o na pasta JS, junto ao bootstrap.min.js

por KLAUBER
| 183.1k xp | 2 posts

Desculpa aí, não tenho experiência em postar no fórum, ainda estou aprendendo a usá-lo... As linhas que precisam ser adicionadas ao final do código, antes de fechar a tag body, são:

<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>