Problemas com navBar do Bootstrap
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:
Ja ate fiz este exemplo e deu certo agora nao sei o que esta dando erro.
Grato.
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.
Curtidas 0
Melhor post
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>
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
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.
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.
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
16/10/2014
Ah, entendi. Não é drop-down não.
Você referenciou corretamente o arquivo bootstrap.js?
Você referenciou corretamente o arquivo bootstrap.js?
GOSTEI 0
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.
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.
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.
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.
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.
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
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]
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
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.
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...
Olha so cara ele eta dando esses erros porem na minha master page tenho todos esses arquivos declarado veja:
O que tenho que fazer pra resolver?
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.
16/10/2014
poxa cara valeu resolvel mesmo porque acontece isso?
GOSTEI 1
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:
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.
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
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.
E o codigo está assim...
Me ajudem por favor.
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
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.
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
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>
.
.
.
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
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>
.
.
.
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