Problemas com navBar do Bootstrap

Front-end

16/10/2014

Ola galera criei uma estrutura do navbar pra que eu possa ter aquele efeito de caixa que voce clica e ele abre o menu com meus links de paginas, porem quando eu clico na minha caixinha ele nao faz nada nao abre meu menu com as opções nao sei o que esta errado.

Veja como eta meu codigo:

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#controlMenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="home.aspx" class="navbar-brand nome">Delivery-TI</a>
            </div>
            <div class="collapse navbar-collapse navbar-right" id="controlMenu">
                <form class="navbar-form navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="menu active"><a href="home.aspx"><span class="glyphicon glyphicon-home"></span></a></li>
                        <li class="menu"><a href="design.aspx"><span class="glyphicon glyphicon-leaf"> Design</span></a></li>
                        <li class="menu"><a href="portifolio.aspx"><span class="glyphicon glyphicon-book"> Portifólio</span></a></li>
                        <li class="menu"><a href="servicos.aspx"><span class="glyphicon glyphicon-wrench"> Serviços</span></a></li>
                        <li class="menu"><a href="contato.aspx"><span class="glyphicon glyphicon-pencil"> Contato</span></a></li>
                        <li class="menu"><a href="local.aspx"><span class="glyphicon glyphicon-map-marker"> Local</span></a></li>
                    </ul> 
                </form>
                </div>
        </div>
    </nav>


Ja ate fiz este exemplo e deu certo agora nao sei o que esta dando erro.

Grato.
Celiol.

Celiol.

Curtidas 0

Melhor post

Eduardo Martins

Eduardo Martins

16/01/2015

Boa Noite.

Colocar as Tags script do jquery antes das tags do bootstrap. Ai Funciona.

Ficando.


<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

<%--Jquerys--%>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jqueryCicle.js" type="text/javascript"></script>

<%--JavaScripts--%>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/marcadagua.js" type="text/javascript"></script>

GOSTEI 4

Mais Respostas

Joel Rodrigues

Joel Rodrigues

16/10/2014

Você está tentando fazer um drop-down? Se for, aí só está a <ul> principal, falta a do drop-down como sublista:
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
GOSTEI 2
Celiol.

Celiol.

16/10/2014

Então acho que é mais ou menos isso pois ele funciona como um dorpDown é aquela caixa que aparece quando a tela e de um Smartphone um ícone com os 3 riscos que representa o menu porem o meu quando clico nela não abre o menu.


Postei uma foto do botão navBar que não funciona, não sei se tem alguma configuração com asp pois em html fiz do mesmo jeito e funciona legal.
GOSTEI 1
Joel Rodrigues

Joel Rodrigues

16/10/2014

Ah, entendi. Não é drop-down não.
Você referenciou corretamente o arquivo bootstrap.js?
GOSTEI 0
Celiol.

Celiol.

16/10/2014

sim pois o site esta responsivo os efeitos da imagem esta funcionando e ate um outro tipo de menu que atribui quando a tela esta maximizada ta tudo certo
tentei colocar um menu dropdown também que poderia ser e resolveria meu problema mas também não deu.

Olha como esta, e ele aparece só o Menu, mas eu clico ele não faz nada.

   <ul class="nav navbar-nav visible-xs navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu</a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="menu"><a href="empresa.aspx"><span class="glyphicon glyphicon-flag"> Empresa</span></a></li>
                            <li class="menu"><a href="produtos.aspx"><span class="glyphicon glyphicon-leaf"> Produtos</span></a></li>
                            <li class="menu"><a href="portifolio.aspx"><span class="glyphicon glyphicon-paperclip"> Portifólio</span></a></li>
                            <li class="menu"><a href="contato.aspx"><span class="glyphicon glyphicon-pencil"> Contato</span></a></li>
                            <li class="menu"><a href="local.aspx"><span class="glyphicon glyphicon-map-marker"> Local</span></a></li>  
                        </ul>
                    </li>
                </ul> 


se assim der certo tambem pode ser nao tem necessidade de ter uma caixinha como a navbar isso sem problemas mas nem assim vai.

Grato Joel.
GOSTEI 0
Celiol.

Celiol.

16/10/2014

Ola alguém aqui sabe porque esta dando esse problema em meu navBar do bootstrap vi vários exemplos e o meu esta correto porem ele não funciona galera podem ajudar?
Ele ate aparece aquele botão quadrado com as linhas porem quando clico ele não faz nada e era pra abrir meu menu para o usuário navegar.
GOSTEI 0
Celiol.

Celiol.

16/10/2014

Galera estou com este problema ainda mas agora estou terminando uma loja virtual e tenho que resolver este problema eu tentei fazer mas ainda nao acontece nada no evendo do botao ele nao abre o menu. Alguem sabe o que pode ser de errado em meu codigo? Joel tem ideia cara o que é eu achei que era por que trabalho com asp, mas criei tudo em html e mesmo assim ta com erro ainda.

Segue os codigo e a imagem do problema que estou.

Referencia do bootstrap no projeto

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

     <%--JavaScripts--%>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>


Aqui o codigo de minha navbar que esta dando erro galera, ele esta ate aparecendo o botao porem quando clico nao faz nada nao realiza o deslocamento do menu.

Aqui é a imagem de como aparece.[img]http://arquivo.devmedia.com.br/forum/imagem/335183-20150106-012735.png[/img]
GOSTEI 0
Rodrigo Abreu

Rodrigo Abreu

16/10/2014

Já tentou usar o F12 do Chrome e ir até a aba console pra ver se tem algum erro de javascript?
GOSTEI 1
Celiol.

Celiol.

16/10/2014

sim cara eu fiz isso e ele mostra um erro la sim mas nao sei o que é. o Erro que ele mostra é este...

     Uncaught Error: Bootstrap's JavaScript requires jQuery                                                                                           bootstrap.js:7

     Uncaught Error: Bootstrap's JavaScript requires jQuery                                                                                           bootstrap.min.js:6 

     Uncaught Error: Bootstrap's JavaScript requires jQuery                                                                                           marcadagua.js:2 

     [cycle2] --c2 init--                                                                                                                                                       jqueryCicle.js:6 

      
      index.aspx:205 GET http://localhost:2656/js/jquery.cycle2.js.map 404 (Not Found)


Olha so cara ele eta dando esses erros porem na minha master page tenho todos esses arquivos declarado veja:

     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

    <%--JavaScripts--%>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/marcadagua.js" type="text/javascript"></script>
    
    <%--Jquerys--%>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/jqueryCicle.js" type="text/javascript"></script>



O que tenho que fazer pra resolver?
GOSTEI 0
Celiol.

Celiol.

16/10/2014

poxa cara valeu resolvel mesmo porque acontece isso?
GOSTEI 1
Celiol.

Celiol.

16/10/2014

O Malherbi me da uma ajuda cara eu fiz o que voce pediu mas agora nao sei se foi por conta de trocar apenas a ordem mas eu tenho uns alerts no me site, e uso aquele dismiss do bootstrap, porem eu executo o fechamento deles com JS mas agora nao esta funcionando esta assim veja se pode me ajudar?

Bem aqui meu codigo html onde tenho o alert:
   <asp:Panel ID="pnlError" runat="server" class="col-xs-10 col-xs-offset-1 alert alert-danger">
            <strong><asp:Label ID="lblError" runat="server" CssClass="text-center text-danger"></asp:Label></strong>
            <a class="close" data-dismiss="pnlError"><span class="glyphicon glyphicon-remove-circle iconError"></span></a>
        </asp:Panel>


E aqui o JS que é pra fechar quando o usuario clicar no icone (X) ai ele fecha o alert. Mas nao sei o que esta errado, ele aparece quando da o erro mas nao fecha quando clico no (X).

Grato Miller.
GOSTEI 1
Lucas Soares

Lucas Soares

16/10/2014

Oi pessoal tudo bem ?

Estou com o mesmo erro no evendo do botao ele nao abre o menu, Ao consultar o console no F12 no chrome da essa informação.

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://err.freewebhostingarea.com/not-found.html".
(index):21 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://err.freewebhostingarea.com/not-found.html".
(index):20 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://err.freewebhostingarea.com/not-found.html".
(index):82 Resource interpreted as Document but transferred with MIME type video/mp4: "http://brunoelicker.orgfree.com/video/bruno_video.mp4".
not-found.html:1 Uncaught SyntaxError: Unexpected token <


E o codigo está assim...

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


 <title>Bruno Cunha Elicker</title>
    <link rel="icon" href="imagens/cropped-logo512.png">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <!-- bootstrap - link cdn -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Bootstrap -->

    <link href="estilo.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>


Me ajudem por favor.
GOSTEI 1
Joel Fragoso

Joel Fragoso

16/10/2014

Olá,

Eu estava com este mesmo problema no meu projeto. Tudo que tive que fazer foi incluir mais um arquivo como mostra na configuração do Bootstrap.

A linha é esta aqui:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

Aqui segue a ordem. qualquer dúvida é só acessar a documentação do Bootstrap.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Abraço.
GOSTEI 1
Thiago Ferreira

Thiago Ferreira

16/10/2014

Estou com um problema semelhante, o meu toggle navigation só aparece quando dou um F12 e deixo menor a tela, não entendi o porquê.

assim está o meu código:
.
.
.
<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tokyo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style> body {
padding-top: 50px;
padding-bottom: 20px;
}

.mesmo-tamanho {
width: 95px;
white-space: normal;
} </style>
<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
</head>

.
.
.
GOSTEI 0
Thiago Ferreira

Thiago Ferreira

16/10/2014

Estou com um problema semelhante, o meu toggle navigation só aparece quando dou um F12 e deixo menor a tela, não entendi o porquê.

assim está o meu código:
.
.
.
<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tokyo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style> body {
padding-top: 50px;
padding-bottom: 20px;
}

.mesmo-tamanho {
width: 95px;
white-space: normal;
} </style>
<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
</head>

.
.
.


Analisando melhor descobri que ao clicar no menu e abrir novamente a tela ao tamanho normal as opções ficam fixadas e não desaparecem tal como acontece se o menu estiver fechado. Mas ainda aguardo ajuda para solucionar.
GOSTEI 0
POSTAR