I'm building a layout template for devs to integrate into their AngularJS/Bootstrap application using Bootstrap 3.3.6. This layout features a left side nav contextual menu which slides over the top of the main page content when opened, or optionally can be 'pinned' open, which then pushes main content to the right.
The navigation itself is in the form of an unordered list containing two buttons. The idea is that when a button is clicked, the relevant div for the sub menu contents is toggled to display (using bootstrap 'collapse' and 'in') classes. Any other sub menu content div elements should be set to not display (without the 'in' class).
This is becoming tricky. If you simply click one button or the other exclusively to control it's relevant content element, it works fine, toggling display of the relevant content. However, if you click each button without clicking the same button again to close it's relevant content, the behavior of the content divs is unexpected, where the second nav button clicked overrides the behavior of the first and it's content persists despite clicking the first nav button again.
My expectation is that the menu buttons need to function as true toggles, where only the relevant content is displayed, and all other menu content divs are not displayed.
Below is the markup for the nav and it's relevant content divs:
<div class="filter-bar pull-left">
<ul class="">
<li><!-- NAV ITEM 1 -->
<button type="button"
id="left-nav-toggle-menu"
class="left-nav-toggle mnc-filter-icn"
title="menu">
<i class="fa fa-list-ul fa-fw"></i>
</button>
</li>
<li><!-- NAV ITEM 2 -->
<button type="button"
id="left-nav-toggle-filters"
class="left-nav-toggle mnc-filter-icn"
title="filters">
<i class="fa fa-filter fa-fw"></i>
</button>
</li>
</ul>
</div>
<div class="collapse push-menu-content"><!-- NAV ITEM 1 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
</div>
<div class="collapse push-filter-content"><!-- NAV ITEM 2 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Filter 1 Category</li>
<li>Filter 2 Category</li>
<li>Filter 3 Category</li>
</ul>
</div>
Now the js function to toggle the nav content:
$(document).ready(function(){
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-filter-content").toggleClass("in");
});
});
I'm not a js or Bootstrap guru for that matter, I simply used the Bootstrap documentation (collapse and toggleClass) to create these functions. I need help from someone who knows Bootstrap in modifying them so that the nav buttons function as true toggles for the content using Bootstrap and jQuery's built in functionality.
Any help is much appreciated!
If I understand you correctly, you want to remove the .in class from any open divs:
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-filter-content").removeClass("in");
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-menu-content").removeClass("in");
$("div.collapse.push-filter-content").toggleClass("in");
});
Related
I have some Bootstrap Dropdown elements in my navbar that should hide if the user scrolls. However, after calling the toggle method on the dropdown clicking on the dropdown no longer toggles the dropdown.
After pageload you can scroll the page and repeatedly toggle dropdowns via click. If you scroll while a dropdown is open the JS closes the open dropdown. After that point you cannot toggle that dropdown via click. Other dropdowns continue to toggle until you scroll while the dropdown is open.
<nav>
<li class="menu-item menu-item-has-children dropdown">
<span class="dropdown-header"></span>About Our Company
<div role="menu" class=" dropdown-menu">
<div class="container">
<div class="row">
<section class="widget menu-post-widget-2 menu-post-widget-class">
<div class="row">
...
</div>
</section>
</div>
</div>
</div>
</li>
</nav>
The JS:
$(window).on('scroll', function(){
// Close the drop down on scroll
$('nav .dropdown.open').dropdown('toggle');
});
Ok, I am really desperate at this point. I've created a submenu for the original Bootstrap dropdown menu:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Open submenu >
<ul class="dropdown-menu">
<li>
Submenu link
</li>
</ul>
</li> <!-- / .dropdown-submenu -->
</ul>
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->
http://codepen.io/Deka87/pen/ORyRLd
It works as expected until I try to add another submenu dynamically. Please try to click "Add another menu" in the example Codepen. This will add a menu, however, you won't be able to toggle it. Instead it will simply close the current parent menu and that's gonna be it.
Any ideas would be highly appreciated!
Since the item is generated dynamically, you need to select it by a static parent for it to respond to the click event
$(".navbar").on("click", ".dropdown-submenu > a", function(){
....
....
});
How to include edit,delete icon in bootstrap menu item on mouse over. and also while click on edit/delete icon, it should call edit/delete method respectively.
Need to achieve this in the below bootstrap dropdown,
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
On mouse over HTML/CSS/JavaScript menu item that should display 'edit/delete' icon nearby.
I have done this with CSS but there are several many ways.
You can call edit or delete functions by adding a click event on <i> tag with an appropriate classname.
ul>li>a:hover i{
display:block !important;
float:right !important;
}
ul>li>a>i{
display:none !important;
}
.glyphicon-edit{
padding-left:7%;
}
Working jsfiddle:
https://jsfiddle.net/6v4d7kg9/
<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>
i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE
I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});
Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".
Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">
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