As demonstrated in this jsFiddle, I've a nav bar with 2 dropdowns. A link in the first drop down fires a JS click event where I manually show the second drop down. It works, except that after being shown, the second drop down automatically and immediately hides. I've added an alert to give you time to see the second dropdown before it hides.
http://jsfiddle.net/xNkS5/8/
Copy/paste of the JsFiddle code:
<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=".navbar-ex1-collapse">
<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="http://toujoursplus.be/">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="DropDown1" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="SwitchLink">Switch to drop down 2</a></li>
</ul>
</li>
<li class="dropdown">
<a id="DropDown2" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JavaScript
$(document).ready(function() {
$("#SwitchLink").click(function(e) {
e.preventDefault();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
});
In case you wonder why I'm doing that: In our application the DropDown2 shows a login form. Sometimes, clicking the menu link in the DropDown1 should make the login form appear.
jQuery 1.9.1 - Bootstrap 3.0.0
Happens on both Chrome and Firefox.
I'm a Bootstrap newbie, and I'm convinced that I'm doing it wrong. Many thanks for your help.
John.
Try this way:
Stop the event from propagating as well. Otherwise it causes the default dropdown handling of bootstrap from being executed which collapses all the dropdowns when you click on the link.
$(".SwitchLink").click(function(e) {
e.preventDefault();
e.stopPropagation();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
Fiddle
try to add this script on document.ready. wroked for me.
$(function(){
$("[data-toggle=dropdown]").prop('onclick', null).off('click');
$("[data-toggle=dropdown]").click(function (e) {
e.preventDefault();
e.stopPropagation();
let el = $(this);
let expanded = el.attr("aria-expanded") || false;
if (!expanded) {
$(this).dropdown('toggle');
}
});
});
Related
I am using Creative Tim's material dashboard that is based off bootstrap. The demo page shows a set notification and user dropdown menu items. I am trying to create the first set for the notification. Here is the source code, then I will explain further.
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="javascript:;">Your Monthly Reports</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle Navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="javascript:;" class="nav-link" id="navbarDropdownNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class='material-icons'>notifications</i>
<span class='notification'>1</span>
<p class='d-lg-none d-md-block'>Notifications</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownNotifications">
Some Action
</div>
</li>
</ul>
</div>
</div>
</nav>
I cannot seem to get the dropdown menu to actually SHOW. Oh the element changes classes and gets the show, showing, hide, & hiding elements when appropriate, and upon inspecting the element and focusing on it, it shows that the element is "locating" itself in the right place, but you just cannot see it. I have even tried altering the z-index, and other styling of div.dropdown-menu using the element inspector, but it doesn't seem to want to show its face.
I even looked on the 3D view to see if something was in front of it, and there isn't. The display for the element is not none and has all the elements you would expect to see. But the issue is that you can't see it when you click the notification icon. It changes the DOM code, but nothing changes visually.
The issue was something not related to anything I had shared. I also had altered the theme using colormind.io. The issue was that the drop down menu was being incorrectly altered. I found the rule that had changed its VISIBILITY to hidden, but the on click function had actually not be updated correctly.
I have a webpage with 3 items in the navbar; Products, Partners and Support. I have moved this navbar to a seperate .html file; navbar.html and called it using load-navbar.js. I have done this to avoid code repetition. Is it possible to use javascript to show which navbar item is active? Is it possible to use switch statements to do this. If yes, how can I do this?
navbar.html
<nav class="navbar navbar-default mc-header navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="logo" src="images/logo.svg" alt="Company Logo">
</div>
<div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
<ul class="nav navbar-nav navbar-right" >
<li><a class="mc-active" href="Items/products.html">Products</a></li>
<li>Partners</li>
<li>Support</li>
</ul>
</div>
</nav>
load-navbar.js
$(function(){
$("#main-nav").load("main-nav.html");
});
The mc-active class in products is added to the class to show that products.html is the active class.
You can store the current url in a variable:
var x = $(location).attr('href');
And then assign an "active" class to a link if the href matches the url, or if it's href is contained within the url, whichever fits your situation. You can use this link:
css-tricks link
or this search:
jquery active link google
for more info that might fit your situation better. I don't think you'd need more than a simple comparison between the window href and link href. Also I'd definitely follow the advice given in the comments.
This situation is strange. When I open my website (built on bootstrap) on small screens navbar is visible, but it should be collapse. When I click on button to collapse, it is still visible, when I click second time it is collapse just now. And since that it works good. But when I reload page, I still have this issue.
<div class=container>
<!--MENU-->
<nav style="border-bottom:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu_button" data-toggle="collapse" data-target=".nbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container nbar">
<ul class="nav nav-justified">
<li><a href=#>o nas</a></li>
<li><a href=#>galeria</a></li>
<li><a href=#>blog</a></li>
<li><a href=#>kontakt</a></li>
</ul>
</div>
</nav>
Add the class collapse in classes to your nav element. This way it will still be visible on mobile but the button will work like expected. If you only apply collapse as class and set the aria-expanded to false it will not be visible on mobile (but most likely also not in normal view).
<div class="container nbar collapse in" aria-expanded="true">
<ul class="nav nav-justified">
<!-- li's here -->
</ul>
</div>
I am creating a navbar for my site with Twitter Bootstrap. I usually use the Dropdown plugin for creating menus with multiple menu-items; but for the menus that I don't want to close unless intentionally done so (e.g. Search box [1]), I use the collapse plugin to create a collapsible menu.
To give you an idea, here's a skeleton of the navbar's markup:
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="/">...</a>
</div>
<div class="collapse navbar-collapse">
<!-- Dropdown Menu -->
<ul class="nav navbar-nav">
<li class="dropdown">
Categories
<ul class="dropdown-menu">
<li>Tech</li>
<li>Autos</li>
<li>Travel</li>
</ul>
</li>
</ul>
<!-- Collapsible Menu -->
<ul class="nav navbar-nav navbar-right">
<li id="nav-search" class="collapsible-menu">
<a data-toggle="collapse" data-target="#nav-searchform" class="collapsed" href="#">Search</a>
<div id="nav-searchform" class="collapse">
<!-- Search Form -->
</div>
</li>
</ul>
</div>
</nav>
Please note the comments <!-- Dropdown Menu --> and <!-- Collapsible Menu --> in the code above, which denote the dropdown and collapsible menus respectively.
Problem: If the collapsible menu (which doesn't close unless the menu is clicked again) is open, and user clicks on one of the dropdown menus, both menus are open. I want the collapsible menu to automatically close when the dropdown menu is opened.
How do I do it (with jQuery)?
I've tried these, among others, but none seem to work:
jQuery(document).ready(function($){
$('.dropdown-toggle').click(function() {
$(this).closest('#nav-search').toggleClass('selected');
});
});
and
jQuery(document).ready(function($){
$('.dropdown-toggle').on('show.bs.dropdown', function () {
$(this).closest('#nav-search').children().toggleClass('in');
});
});
and
jQuery(document).ready(function($){
$('.dropdown-toggle').on('show.bs.dropdown', function () {
$(this).closest('#nav-search').children().removeClass('in');
});
});
I am not sure what I am doing wrong.
Footnotes:
If I use Bootstrap's Dropdown plugin for search box too, the dropdown'd close when the user clicks on the input/text area which is why I chose to go with the Collapse plugin.
$('.dropdown').click(function(){
if($('#nav-searchform').hasClass('in'))
$('#nav-searchform').collapse('hide');
});
http://www.bootply.com/122096
I am trying to display a Twitter Bootstrap dropdown menu on right click on a element. This is the code that I wrote:
Javascript
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
toggle.dropdown('toggle');
return false;
});
HTML
<div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This code works fine in Chrome and when I right click the menu is displayed properly, but on Firefox when I right click, the menu is displayed for a second and it disappears. Is there any other event that I need to handle too?
JSFiddle: http://jsfiddle.net/Serff/3/
Remove
data-toggle="dropdown"
The final html markup:
<div class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This should work.
Use this script:
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
e.preventDefault();
toggle.dropdown('toggle');
});