Duda con collapse de bootstrap
Hola a tod@s,
Estoy haciendo una web de una sola página en el que hay puntos de anclaje y demás para que al seleccionar el link de un menú, baje hasta donde esté el contenido (el nav está fijo para que el usuario no tenga que hacer un scroll).
Entonces, mi duda está en la versión móvil. Tengo el menú realizado con el collapse de bootstrap, y al hacer click en el botoncito, se abre el menú. Y al hacer click sobre un menú, me desplazo hasta donde está el contenido, pero el menú sigue abierto y es un engorro tener que clickar de nuevo el botón para que se cierre y se vea bien el contenido.
¿Alguien podría ayudarme?
Lo que quiero es que al hacer click en el link del menú que sea, la web se desplace hasta el contenido (como hace ahora) y que además el collapse se cierre automáticamente para así ahorrar al usuario el tener que hacer click de nuevo sobre el botón.
Me temo que eso será cosa de Javascript...
Muchas gracias de antemano.
Un saludo,
Oinatz
www.oiparraguirre.com
feliper
Hola,
yo lo hice así
$('.container a').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.container .in').removeClass('in').height(0);
});
.container aes el botánicoy lo que hace esto es detectar si el menu esta abierto (cuando esta abierto tiene la clase .in) y quitarle la clase y decirle que su altura es 0(height(0))
Si no te funciona prueba a quitar removeClass('in')
saludos !!
feliper
botánico = botoncito
oini
feliper
Buenos días Feliper,
Lamentablemente no me sale (no sé si lo estoy haciendo mal o qué).
Lo he probado como me lo pones y quitándole el removeClass.
Lo pongo así:
$('.aLink').click(function(){var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.navbar .in').height(0);
});
Teniendo en cuenta que .aLink es el enlace del menú, y después el .navbar .in es el menú en sí.
No pasa nada si nolo consigo. Evidentemente me gustaría que saliese, pero bueno, si no se puede pues no se puede.
¡Muchas gracias!
feliper
Hola oini,
copia aqui el código de tu navbar entero, sino será un poco divicil "acertar" ...
como que no pasa nada si no lo consigo ? esto tiene que salir !! :D
saludos ...
oini
feliper
¡Esto tiene que salir! Jajaja
El código es este:
<div class="navbar navbar-fixed-top">
<!-- Logo -->
<a href="index.html" class="brand logo"><h1 class="titLogo">LOGO</h1></a>
<!-- RESPONSIVE TOOGLE MENU -->
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar visible-phone" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navigation -->
<ul class="nav navbar-nav nav-collapse collapse">
<li class="item itemNav"><a href="#one" class="aLink active">One</a></li>
<li class="item itemNav"><a href="#two" class="aLink">Two</a></li>
<li class="item itemNav"><a href="#three" class="aLink">Three</a></li>
<li class="item itemNav"><a href="#four" class="aLink">Four</a></li>
<li class="item itemNav"><a href="#five" class="aLink">Five</a></li>
<li class="item itemNav hidden-phone"><a href="#six" class="aLink">Six</a></li>
<li class="item itemNav hidden-phone"><a href="#seven" class="aLink">Seven</a></li>
<li class="item itemNav hidden-phone"><a href="#eight" class="aLink">Eight</a></li>
</ul>
</div>
Muchísimas gracias por tu tiempo Feliper.
Un saludo,
Oinatz
feliper
Hola,
esto me funciona con tu codigo,
tienes que meter el <ul class="nav navbar-nav nav-collapse collapse"> entero dentro de un DIV
Esto cierra todos los .nav-collapse que estén abiertos, así que si hay varios, ponle una clase distinta a cada uno
$('.itemNav').click(function(){
var $target = $('.nav-collapse');
if($target.hasClass('in')){
$target.removeClass('in').height(0).css('overflow','hidden'); }
});
saludos !!
oini
feliper
Hola de nuevo Feliper,
Pues a mí no me funciona. No sé si estoy haciendo algo mal o qué.
He metido el <ul> dentro de una div y he puesto este script que me dices en el head.
Pero nada, no funciona.
Gracias de todos modos,
Un saludo,
Oinatz
ander-2
Hola a ambos,
he probado el código que ha puesto @feliper y me ha funcionado sin problemas. @oini podrías subir el código completo a algún lado para verlo?
feliper
Te copio el codigo entero que use para probar
saludos !!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- AQUI FALTA cargar bootstrap CSS -->
</head>
<body>
<div class="navbar navbar-fixed-top">
<!-- Logo -->
<a href="index.html" class="brand logo"><h1 class="titLogo">LOGO</h1></a>
<!-- RESPONSIVE TOOGLE MENU -->
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar visible-phone" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navigation -->
<div>
<ul class="nav navbar-nav nav-collapse collapse">
<li class="item itemNav"><a href="#one" class="aLink active">One</a></li>
<li class="item itemNav"><a href="#two" class="aLink">Two</a></li>
<li class="item itemNav"><a href="#three" class="aLink">Three</a></li>
<li class="item itemNav"><a href="#four" class="aLink">Four</a></li>
<li class="item itemNav"><a href="#five" class="aLink">Five</a></li>
<li class="item itemNav hidden-phone"><a href="#six" class="aLink">Six</a></li>
<li class="item itemNav hidden-phone"><a href="#seven" class="aLink">Seven</a></li>
<li class="item itemNav hidden-phone"><a href="#eight" class="aLink">Eight</a></li>
</ul>
</div>
</div>
</div>
<!-- AQUI FALTA CARGAR jquery + bootstrap JS -->
<script>
$(document).ready(function() {
$('.itemNav').click(function(){
var $target = $('.nav-collapse');
if($target.hasClass('in')){
$target.removeClass('in').height(0).css('overflow','hidden'); }
});
});
</script>
</body>
</html>
oini
feliper
¡¡¡Válgame dios qué inútil soy!!!
Me había dejado el trozo de $(document).ready(function() { ... }
Muchísimas gracias (a ti también @vaclad ), me habéis ayudado mucho y os lo agradezco ;)
Un saludo,
Oinatz
oui
Feliper, yo tengo el mismo problema, y he probado sobre estos ejemplos que has pasado pero me sigue sin funcionar.
Te paso mi código para ver si se me pasó algo.
Desde ya mil gracias!
Abrazo, Leo.
<header id="header">
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="scroll active" ><a href="#home">Inicio</a></li>
<li class="scroll"><a href="#marcas">Marcas</a></li>
<li class="scroll"><a href="#services">Servicios</a></li>
<li class="scroll"><a href="#about">Quienes somos</a></li>
<li class="scroll"><a href="#misionvision">Misión / Visión</a></li>
<li class="scroll"><a href="#rse">RSE / Reciclado</a></li>
<li class="scroll"><a href="#cta2">Carro de compras</a></li>
<li class="scroll"><a href="#get-in-touch">Contacto</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
...................
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/mousescroll.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function() {
$('.itemNav').click(function(){
var $target = $('.nav-collapse');
if($target.hasClass('in')){
$target.removeClass('in').height(0).css('overflow','hidden'); }
});
});
</script>
oui
Solucionado con tu primer respuesta Feliper!
grande y mil gracias.
Leo.
different_tv
apoyen me yo quiero ocultar el collapser menu este es mi codigo:
div.obn-backoffice
nav.navbar.navbar-default(role="navigation")
div.navbar-header
button.navbar-toggle(type="button" ng-click="collapser.mainNav = !collapser.mainNav")
span.sr-only
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(ui-sref="backoffice")
span.icon-hamburger_menu
span.menu-item BackOffice
div.navbar-collapse.collapse(uib-collapse="collapser.mainNav")
ul.nav.navbar-nav
li
a.dropdown-toggle(role="button" ng-click="collapser.category = !collapser.category" ) Categories
span(data-ng-class="{'caret-right': collapser.category, 'caret': !collapser.category}")
ul.obn-navbar-link(role="menu" uib-collapse="collapser.category")
li
a(ui-sref="backoffice.category" ng-click="collapser.category = !collapser.category") Category
li
a(ui-sref="backoffice.category-type" ng-click="collapser.category = !collapser.category") Category-Type
camo_0208
Hey chicos, tengo este navbar y no me quiere ocultar con el javaScript, agradezco su ayuda...
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navegacion">
<span class="sr-only">Mostrar/Ocultar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Logotipo</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navegacion">
<ul class="nav navbar-nav">
<li><a href="#seccion1">Inicio</a></li>
<li><a href="#seccion2">Menu</a></li>
<li><a href="#seccion3">Promociones</a></li>
<li><a href="#">Mis Qates</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" id="btnLogin">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>