Fechar menu ao clicar no link
Olá pessoal estou utilizando Bootstrap e estou com um problema no menu veja o meu código.
<!-- Menu principal -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div>
<button type="button" class="navbar-toggle collapsed btn" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
</button>
<p class="menu-top visible-xs pull-right">MENU</p>
<a class="navbar-brand" href="#" role="heading">
<img class="pull-left hidden-xs" src="img/logo_milleniun2.png" alt="Milleniun Tecnologia" title="Milleniun Tecnologia" width="60">
<h1 class="pull-right">Milleniun Tecnologia</h1>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-menu">
<li><a href="#aempresa">A Empresa</a></li>
<li><a href="#">Produtos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Institucional <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="#">Quem Somos</a></li>
<li><a href="#">Príncipios</a></li>
<li><a href="#">Política</a></li>
</ul>
</li>
<li><a href="#" data-toggle="popover" data-placement="bottom" data-content="11 2232-6955 | 11 3477-3169" data-container="body" title="Contato rápido" class="ppv">Fale conosco</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active hidden-xs hidden-sm"><a href="#">Loja Virtual</a></li>
</ul>
</div>
</div>
</nav>
<!-- // Menu principal -->
Ele pode ser melhor visualizado aqui www.pfrontend.com.br
Eh o seguinte não tem nenhum erro no funcionamento oque eu quero é que na versão mobile quando menu entrar em collapse ao clicar no link da pagina o menu feche sozinho e nao que eu precise clicar no botao de icons-bar para fechar o menu.
<!-- Menu principal -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div>
<button type="button" class="navbar-toggle collapsed btn" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
</button>
<p class="menu-top visible-xs pull-right">MENU</p>
<a class="navbar-brand" href="#" role="heading">
<img class="pull-left hidden-xs" src="img/logo_milleniun2.png" alt="Milleniun Tecnologia" title="Milleniun Tecnologia" width="60">
<h1 class="pull-right">Milleniun Tecnologia</h1>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-menu">
<li><a href="#aempresa">A Empresa</a></li>
<li><a href="#">Produtos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Institucional <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="#">Quem Somos</a></li>
<li><a href="#">Príncipios</a></li>
<li><a href="#">Política</a></li>
</ul>
</li>
<li><a href="#" data-toggle="popover" data-placement="bottom" data-content="11 2232-6955 | 11 3477-3169" data-container="body" title="Contato rápido" class="ppv">Fale conosco</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active hidden-xs hidden-sm"><a href="#">Loja Virtual</a></li>
</ul>
</div>
</div>
</nav>
<!-- // Menu principal -->
Ele pode ser melhor visualizado aqui www.pfrontend.com.br
Eh o seguinte não tem nenhum erro no funcionamento oque eu quero é que na versão mobile quando menu entrar em collapse ao clicar no link da pagina o menu feche sozinho e nao que eu precise clicar no botao de icons-bar para fechar o menu.
Joel Santos
Curtidas 1
Mais Respostas
Joel Santos
06/07/2015
[img]http://arquivo.devmedia.com.br/forum/imagem/321246-20150706-140705.png[/img]
Esse é o menu em funcionamento, como eu faço para ao clica em um dos links desse menu e ele fechar!
Esse é o menu em funcionamento, como eu faço para ao clica em um dos links desse menu e ele fechar!
GOSTEI 0
Marcelo Pastore
06/07/2015
Menu vertical dropdown?
[url]http://www.linhadecodigo.com.br/artigo/3464/criando-um-menu-vertical-dropdown-com-css-e-html.aspx[/url]
[url]http://www.linhadecodigo.com.br/artigo/3464/criando-um-menu-vertical-dropdown-com-css-e-html.aspx[/url]
GOSTEI 0
Cícero Castro
06/07/2015
Olá pessoal estou utilizando Bootstrap e estou com um problema no menu veja o meu código.
<!-- Menu principal -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div>
<button type="button" class="navbar-toggle collapsed btn" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
</button>
<p class="menu-top visible-xs pull-right">MENU</p>
<a class="navbar-brand" href="#" role="heading">
<img class="pull-left hidden-xs" src="img/logo_milleniun2.png" alt="Milleniun Tecnologia" title="Milleniun Tecnologia" width="60">
<h1 class="pull-right">Milleniun Tecnologia</h1>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-menu">
<li><a href="#aempresa">A Empresa</a></li>
<li><a href="#">Produtos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Institucional <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="#">Quem Somos</a></li>
<li><a href="#">Príncipios</a></li>
<li><a href="#">Política</a></li>
</ul>
</li>
<li><a href="#" data-toggle="popover" data-placement="bottom" data-content="11 2232-6955 | 11 3477-3169" data-container="body" title="Contato rápido" class="ppv">Fale conosco</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active hidden-xs hidden-sm"><a href="#">Loja Virtual</a></li>
</ul>
</div>
</div>
</nav>
<!-- // Menu principal -->
Ele pode ser melhor visualizado aqui www.pfrontend.com.br
Eh o seguinte não tem nenhum erro no funcionamento oque eu quero é que na versão mobile quando menu entrar em collapse ao clicar no link da pagina o menu feche sozinho e nao que eu precise clicar no botao de icons-bar para fechar o menu.
<!-- Menu principal -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div>
<button type="button" class="navbar-toggle collapsed btn" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
<span class="icon-bar" id="icon-bar"></span>
</button>
<p class="menu-top visible-xs pull-right">MENU</p>
<a class="navbar-brand" href="#" role="heading">
<img class="pull-left hidden-xs" src="img/logo_milleniun2.png" alt="Milleniun Tecnologia" title="Milleniun Tecnologia" width="60">
<h1 class="pull-right">Milleniun Tecnologia</h1>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-menu">
<li><a href="#aempresa">A Empresa</a></li>
<li><a href="#">Produtos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Institucional <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="#">Quem Somos</a></li>
<li><a href="#">Príncipios</a></li>
<li><a href="#">Política</a></li>
</ul>
</li>
<li><a href="#" data-toggle="popover" data-placement="bottom" data-content="11 2232-6955 | 11 3477-3169" data-container="body" title="Contato rápido" class="ppv">Fale conosco</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active hidden-xs hidden-sm"><a href="#">Loja Virtual</a></li>
</ul>
</div>
</div>
</nav>
<!-- // Menu principal -->
Ele pode ser melhor visualizado aqui www.pfrontend.com.br
Eh o seguinte não tem nenhum erro no funcionamento oque eu quero é que na versão mobile quando menu entrar em collapse ao clicar no link da pagina o menu feche sozinho e nao que eu precise clicar no botao de icons-bar para fechar o menu.
Voce conseguiu resolver esse problema? tbm queria arrumar isso nos meus projetos.
GOSTEI 0