Collapse Booststrap Well When Link Clicked

Collapse Booststrap Well When Link Clicked - javascript

I've built a nav menu using expand and collapse in and not using a dropdown. My problem is that I can't get the div to toggle when I click a menu link. I've tried using js to toggle it closed when a link is clicked, but then I can't re-open the menu again.
Here's my html:
<header style="padding:0px 0%;">
<nav class="navbar navbar-inverse navbar-static-top" style="margin:0px 0px;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header hidden-md hidden-lg">
<button type="button" class="navbar-toggle collapsed hidden-sm hidden-xs" data-toggle="collapse" data-target="#myNavmenu" aria-expanded="true" style="color:#fff;display:inline-block;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right inverse hidden-xs hidden-sm" style="margin:0px 0px; font-size:0.8em;">
<li style="float:left !important"><img src="/products/greg2/images/avatierwatermark.png" style="height:34px; width:auto;"></li>
<li>Customers</li>
<li>Solutions</li>
<li>Products</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="collapse" id="expandmenu">
<div class="well">
<div class="container">
<button type="button" class="navbar-toggle2 pull-right" data-toggle="collapse" href="#expandmenu" aria-expanded="false" aria-controls="collapseExample" style="float:right; padding:16px 5px 17px 0px; color:#333;"><p class="explore" style="font-size:0.8em; color:#333;">Close </p>
<span class="glyphicon glyphicon-remove" aria-hidden="true" style="font-size:1.1em;"></span>
</button>
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="row">
<ul class="expand txt-ctr" style="padding-left:0px;">
<li class="blue"><div style="background-position:0px 0px;"></div><span>Benefits</span></li>
<li class="blue"><div style="background-position:-165px 0px;"></div><span>Overview</span></li>
<li class="blue"><div style="background-position:-330px 0px;"></div><span>Features</span></li>
<li class="blue"><div style="background-position:-495px 0px;"></div><span>Reports</span></li>
<li class="blue"><div style="background-position:-660px 0px;"></div><span>Security</span></li>
<li class="blue"><div style="background-position:-825px 0px;"></div><span>Help Desk</span></li>
<li class="blue"><div style="background-position:-990px 0px;"></div><span>App Support</span></li>
<li class="blue"><div style="background-position:-1155px 0px;"></div><span>Architecture</span></li>
<li class="blue"><div style="background-position:-1315px 0px;"></div><span>Languages</span></li>
<li class="blue"><div style="background-position:-1490px 0px;"></div><span>Ticketing</span></li>
<li class="blue"><div style="background-position:-1665px 0px;"></div><span>Testimonials</span></li>
<li class="blue"><div style="background-position:-1825px 0px;"></div><span>Demo</span></li>
<li class="blue"><div style="background-position:-1998px 0px;"></div><span>Resources</span></li>
<li class="blue"><div style="background-position:-2165px 0px;"></div><span>True Cost</span></li>
</ul>
</div>
</div>
</div>
</div>
And here's the js I've tried:
$('.collapse a').click(function(){
$("#expandmenu").toggle();
});
Thank you for your help!

Try this, it worked for me:
$('#expandmenu a').click(function(){
$("#expandmenu button").click();
});

Related

Bootstrap navigation is not collapsing on mobile screen for same page navigation ( #sections )?

I want to use navigation on same page using sections (#sections) it is working fine on all devices except xs devices when i click any navigation link on mobile it is going to the exact section but the navigation options is not closing or collapsing (because target link in the same page)
i am using bootstrap navigation
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav" >
<li><a class="scroll" href="#home"><i class="fa fa-home"></i>Home</a></li>
<li><a class="scroll" href="#about"><i class="fa fa-cog"></i>About us</a></li>
<li><a class="scroll" href="#products"><i class="fa fa-cubes"></i>Products</a></li>
<li><a class="scroll" href="#gallery"><i class="fa fa-camera-retro"></i>Gallery</a></li>
<li><a class="scroll" href="#contact"><i class="fa fa-pencil"></i>Contact Us</a></li>
</ul>
</div>
</div>
</nav>
when i click navigation option on mobile navigation should close & it should takes me to the exact section how can i do that ?

You can achieve this by using jquery
$('.nav li a').click(function(e) {
$('.navbar-toggle').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav" >
<li><a class="scroll" href="#home"><i class="fa fa-home"></i>Home</a></li>
<li><a class="scroll" href="#about"><i class="fa fa-cog"></i>About us</a></li>
<li><a class="scroll" href="#products"><i class="fa fa-cubes"></i>Products</a></li>
<li><a class="scroll" href="#gallery"><i class="fa fa-camera-retro"></i>Gallery</a></li>
<li><a class="scroll" href="#contact"><i class="fa fa-pencil"></i>Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div id="home" style="height:500px;"></div>
<div id="gallery" style="height:500px;"></div>
<div id="contact" style="height:500px;"></div>
<div id="home" style="height:500px;"></div>
<div id="gallery" style="height:500px;"></div>
<div id="contact" style="height:500px;"></div>

Bootstrap always open responsive navbar

I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Burger menu not hiding on menu click

I have a problem in my burger menu. It is not hiding after I click on the menu. I'm a beginner and I don't know where the problem is?
I need your help please. If you need any other information about my code feel free to ask me.
<nav id="navbar" class="navbar default">
<div class="container mob-logo">
<div class="navbar-header col-sm-2 tablet-logo">
<button type="button" class="navbar-toggle mob-menu" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
</button>
<div class="mobile-sidebar">
<span class="sidebar-btn btn fa-bar-hide" data-action="toggle" data-side="right" >
<i class="fa fa-bars"></i>
</span>
</div>
</div>
<div class="collapse navbar-collapse " id="myNavbar" >
<ul class="nav navbar-nav pull-right ">
<li class="active">
<a href="#accueil" data-du-smooth-scroll data-du-scrollspy>Accueil</a>
</li>
<li class="active">
<a href="#home" data-du-smooth-scroll data-du-scrollspy>Groupe</a>
</li>
<li>
<a href="#Competences" data-du-smooth-scroll data-du-scrollspy>Competences</a>
</li>
<li>
<a href="#Services" data-du-smooth-scroll data-du-scrollspy>Services</a>
</li>
<li>
<a href="#References" data-du-smooth-scroll data-du-scrollspy>References</a>
</li>
<li>
<a href="#contact" data-du-smooth-scroll data-du-scrollspy>Contact</a>
</li>
</ul>
</div>
</div>
</nav>

$(document).ready(function(){
$(".mob-menu").click(function(){
$(this).hide();
});
});

Stacked collapsable menu's in Bootsrap causing conflicts

I'm having a problem with the following piece of code.
<header style="position: fixed; z-index: 999999; width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top" style=" position: relative; margin-bottom:0;">
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-3">
<a class="navbar-company" href="http://www.premiersoftware.co.uk"> </a>
</div>
<div class="col-xs-12 col-sm-9 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-product" aria-expanded="false" aria-controls="navbar">
<span class="caret"></span>
</button>
</div>
<div id="navbar-product" class="navbar-collapse collapse mainlist">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Products<span class="caret"></span>
<ul class="dropdown-menu">
<li>Salonlite</li>
<li>Premier Salon</li>
<li>Premier Spa</li>
<li>Core by Premier Software</li>
<li>College by Premier Software</li>
</ul>
</li>
<!--<li>
About Us
</li>-->
<li>
Careers
</li>
<li>
Partners
</li>
<li>
Support
</li>
<li class="dropdown">
News<span class="caret"></span>
<ul class="dropdown-menu">
<li>Premier News</li>
<li>Premier Blog</li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle grey" href="javascript:;" data-toggle="dropdown" id="navLogin">Login<span class="caret"></span></a>
<div class="dropdown-menu">
<h4 class="logintxt">Client Login</h4>
<p class="logintxt">Premier Softwares client login area allows you to manage your online premier web booking.</p>
<form class="form" id="dologin" action="../Web-Portal/doLogin.php" method="post">
<input name="txtSerial" id="txtSerial" class="form-control" type="text" placeholder="Serial number">
<input name="txtPostCode" id="txtPostCode" class="form-control" type="text" placeholder="Postcode">
<button type="submit" id="login-submit" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default product-nav-bar">
<div class="container">
<div class="row">
<div class="col-md-push-3 col-sm-push-3 col-lg-push-2 remove-padding-and-center col-xs-3 col-lg-3">
<a class="call" href="tel:01543466580">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>01543 4666580</div>
</a>
</div>
<div class=" col-xs-6 col-sm-3 col-lg-2 col-md-pull-3 col-sm-pull-3 col-lg-pull-3">
<a class="navbar-brand" href="#"> </a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-push-2 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="book-consultation-nav">
<a href="#contact-us" class="scroll-to" >Book a FREE Consultation</a>
</li>
<li class="nav-small-contact-us">
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
<li>
<a class="scroll-to" href="#marketing">Overview</a>
</li>
<li>
<a class="scroll-to" href="#features">Key Features</a>
</li>
<li>
<a class="scroll-to" href="#additional-reasons">In-Depth</a>
</li>
<li class="nav-small-brochure">
<a class="scroll-to" href="#brochure">View Core Brochure</a>
</li>
<li>
<a class="scroll-to" href="#casestudies">Testimonials</a>
</li>
<li>
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="hidden-xs col-lg-pull-5 col-sm-12 col-lg-2">
<a class="btn btn-primary book-consultation scroll-to" href="#contact-us" role="button">Book a FREE Consultation</a>
</div>
</div>
</div>
</nav>
</header>
<script>
$(".scroll-to").on('click', function(event)
{
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -153
}, 800, function(){
window.location.hash = hash;
});
}
});
</script>
I'm using bootstrap and have two collapsible navigation on top of each other. When I select on of the options in the lower navigation in smaller screens (ie mobile screens), the top navigation opens.
To see this in action please visit:
http://www.premiersoftware.co.uk/corebypremier/index9.php
Really I would just like the lower navigation animate the page without the top one opening.
Any suggestions would really be appreciated.
Thanks
Dan

Putting a dropdown panel in the navbar Bootstrap 3.0.3

I'm trying to put a panel with a few form elements and a dropdown category selection into a collapsible navbar in bootstrap. Currently I have
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data>
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
</div>
I stopped event propagation on the panel, and the radio buttons work great, but whenever I click the "Personal" button to select from categories, the panel shuts. I'm sure it has something to do with having the data target of the parent dropdown, but I'm not sure how to fix that.

Bootstrap 3.0.3 can't show 2 dropdown-menu class with data-toggle="dropdown" because first click show class="dropdown-menu" and second click hide first class="dropdown-menu" and show the second . this your problem .
try this solution :
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#dp2").click(function(){
$("#dp1").attr("data-toggle","");
$("#dp1").one("click",function(){
$("#dp1").attr("data-toggle","dropdown");
});
});
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

Collapse Booststrap Well When Link Clicked - javascript

Try this, it worked for me: $('#expandmenu a').click(function(){ $("#expandmenu button").click(); });

Related

Bootstrap navigation is not collapsing on mobile screen for same page navigation ( #sections )?

Bootstrap always open responsive navbar

Burger menu not hiding on menu click

Stacked collapsable menu's in Bootsrap causing conflicts

Putting a dropdown panel in the navbar Bootstrap 3.0.3

Categories

Resources