I have been working some code, where I use Hamburger responsive menu. The menu opens and closes when clicked on the hamburger icon. I wanted to add a functionality for closing the menu when clicked outside the menu. I managed to close the menu when clicked outside but without the close animation.
Here is the JS code that I tried:
$(document).on("click", function () {
$(".navbar-collapse").removeClass("show");
});
and the HTML code:
<nav class="navbar navbar-expand-lg tm-navbar" id="tmNav">
<div class="container">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars navbar-toggler-icon"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
A
</li>
<li class="nav-item">
B
</li>
<li class="nav-item">
C
</li>
<li class="nav-item">
D
</li>
</ul>
</div>
The above JS code closes the menu when clicked outside the menu but without the animations. I would like to close the menu with the closing animation. Would appreciate some help with this issue.
If this is Bootstrap's Collapse component (which it looks like considering the collapse and navbar-collapse classes), you don't want to remove the show class yourself. As you found out, that will skip all the other work Bootstrap does; including animating the transition.
Instead, use the provided .collapse('hide') event to cause Bootstrap to close the Collapse for you.
$(document).on('click', function () {
$('#navbarSupportedContent').collapse('hide');
});
Related
In my navbar there is a project submenu completed and ongoing both two are also a submenus containing abc project for completed submenu and ongoing submenu consist bcd project. when I click on completed its shows the abc project and when I click on ongoing its shows the bcd project but also redirect me to the page of bcd project .So the problem is I want bcd project page to appear only when I click on bcd project 'a' tag not on ongoing submenu click.it work fine for completed submenu. The flow should be I click on project menu then ongoing menu and then bcd project then clicking bcd project redirecting me to its page. but the flow here is project -> ongoing->redirecting to bcd project. On going menu also work when I first click on it , it doent redirect me but if I first open completed menu and then ongoing menu the problem is coming.
<nav class="navbar navbar-default navbar-fixed-top probootstrap-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
<a class="navbar-brand" href="index.html" title="uiCookies:FineOak"></a>
</div>
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown" >
<a data-toggle="dropdown" class="dropdown-toggle">Projects</a>
<ul class="dropdown-menu" >
<!-- <form> -->
<li class="dropdown-submenu dropdown" >
<span>Completed</span>
<ul class="dropdown-menu">
<li>ABC Project</li>
</ul>
</li>
<li class="dropdown-submenu dropdown">
<span>Ongoing</span>
<ul class="dropdown-menu">
<li>BCD Project</li>
</ul>
</li>
<!-- </form> -->
</ul>
</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<!--TO PREVENT CLOSING OF MAIN MENU WHEN CLICKED ON SUB MENU -->
<script>
$('ul.dropdown-menu').on('click', function (event) {
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
</script>
I am looking at this theme and it is exactly perfect of what I am looking for (Side bar wise): http://themesdesign.in/webadmin_1.1/layouts/green/index.html
I want the Menu Button that expands/minimizes the side bar, while still retaining all the side bar menus.
When it's in XS screen, I want the side bar hidden, but pops up when that menu button is pressed.
This is what I have so far in codes:
<nav class="navbar-default navbar-static-side" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="sidebar-collapse hidden-xs">
<ul class="nav navbar-collapse collapse" id="side-menu">
<li class="nav-header">
<h2 style="color: #e8e8e8"></h2>
<h6 class="" style="color:#808080;">By: </h6>
</li>
<li>
<a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
<ul class="side-menu-ul collapse in" id="firstMenu">
<li>Dashboard v.1</li>
<li class="active">Dashboard v.2</li>
<li>Dashboard v.3</li>
<li>Dashboard v.4</li>
<li>Dashboard v.5 </li>
</ul>
</li>
<li>
<a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a>
<ul class="side-menu-ul collapse" id="secondMenu">
<li>Inbox</li>
<li>Compose Mail</li>
<li>Single Mail</li>
</ul>
</li>
</ul>
</div>
</nav>
Having not much design experience, I'm not really sure on how to proceed from here. Especially the part where clicking a button minimizes the side navbar. Would anyone be able to help me?
Edit: I just found another great example here: http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/ The section "Left sidebar that collapses to icons" has what I am looking for. However, the problem with that one is, when it's collapsed to icons, it does not show any menu sub-items.
You can use a click event to update the state of your application when the button is clicked.
https://developer.mozilla.org/en-US/docs/Web/Events/click
Since you are going from one CSS state to another with your sidebar, your best bet would probably be to make both solutions in CSS. This way you can change a parent containers class through the onclick event of the button.
If you want it closed for example you would add a closed class to your sidebar and have your closed css cascade downwards by using:
.closed .child-element {}
To target child elements of the closed state.
I have a bootstrap list-group-item with a badge as follows:
<a class="list-group-item list-group-item-action" href="#" revision="211147" id="commit0">
<span class="badge collapsed" id="badge0" data-toggle="collapse" data-target="#ul0" >
changed files:1
</span>
<ul class="list-group changed-files-list collapse" id="ul0" aria-expanded="false" style="height: 0px;">
<li class="list-group-item changed-file">
release.groovy
</li>
</ul>
</a>
It contains a collapsed ul that is targeted by the badge.
At the same time, when clicked, the a element is selected(as it is part of a list-group with multiple selection possible).
I try to insert this bit of code:
$('.badge').on('click', function(e){
//$('#'+this.id).click();
e.stopPropagation();
});
so that when clicking on the badge the a element is not selected.
If I use this code the ul element is not being shown. I guess bootstrap uses the on click function and so it has something to do with my function overriding the bootstrap one.
How can I stop propagation while keeping the collapse behavior?
I found the solution by using bootstrap's collapse function:
$('.badge').click( function(e){
$('#ul'+this.id.substring(5)).collapse("toggle");
e.stopPropagation();
});
I have a website and each page is using a bootstrap toggle/collapse navbar. All the page this works fine except for one. For some reason on one of the pages the navbar collapses once to the appropriate screen size, but it does not drop down. However, I noticed that if I comment out a JS file I have being sourced at the bottom of the html, like so <!--<script src="js/index.js"</script>--> then the drop down works. What's weird is that, 2 of the other pages on the same site source the same JS script, and the dropdown still works...maybe I'm just blind. The code for the nav is as follows :
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And there's honestly not a lot of JS, just one scroll function, and another "hover" function that I will probably move over to CSS eventually..
$(document).ready(function() {
$(".business-header img").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $(".section-two").offset().top
}, 1500);
});
});
$(".image-wrapper img").mouseenter(function() {
$(this).css("box-shadow", " 0 0 30px #F0DEBD");
}).mouseleave(function() {
$(this).css("box-shadow", "none");
});
I should mention as well that each page has an identical nav. Is there something one of the functions that is causing this? I tried to search this topic on other posts, but was unsuccessful. Cheers
This is, most times, due to bootstrap js library being loaded more than one time
So I've spent the last 48 hours trying everything I found under the sun and cannot get anywhere, so I'm leaving it up to all of your fantastic, smart brains.
I just started using bootstrap not too long ago, I have a NAV bar that has 4 items: Home, Services, Download, and Contact.
The Services item is the only one that will have a dropdown.
The dropdown works perfectly on desktop/laptop browsers, but on my phone (android using chrome browser) it doesn't work so great.
On mobile, because of screen size, Bootstrap turns the whole nav bar into a dropdown menu, so the "services" dropdown is inside a parent dropdown. When I click "services" to get the dropdown menu with all the services, I see for a split second that the dropdown is opening because i see a glimpse of the text, then immediately the parent and services div will close.
<!-- start navigation -->
<script type="text/javascript">
$('body').on('touchstart.dropdown'.'.dropdown-menu', function(e){e.stopPrpagation(); })
</script>
<nav class="navbar navbar-default navbar-fixed-top templatemo-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<img src="images/Logo-banner.jpg" height="auto" width="auto" />
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Download</li>
<!--<li>Contact</li>-->
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- end navigation -->
I've looked up many problems on here, some say to use a javascript function similar to this one:
<script type="text/javascript">
$('.dropdown li, .dropdown a').click(function(e) {
e.stopPropagation();
});
</script>
Others say you need to manually show/hide the dropdown.
So far nothing has worked for me. I'm self taught programmer so as detailed as you can put it would be greatly appreciated. If you need anything else let me know,
Thanks,