I have build a stacked navigation with several sub-menus.
<ul class="nav nav-pills nav-stacked">
<li data-toggle="collapse" data-target="#subnav">
Nav
<ul class="nav nav-pills collapse" id="subnav">
<li>Subnav1</li>
<li>Subnav2</li>
<li>Subnav3</li>
</ul>
</li>
</ul>
When click on the parent, the sub-menus will open nicely. However, when I click on any of the sub-items, the parent menu will close again. How can I prevent this?
Edit: Try out on jsFiddle
One way is to extract the trigger element out of the collapsible...
Bootply
HTML :
<ul class="nav nav-pills nav-stacked">
<li>
<span data-toggle="collapse" data-target="#subnav">Nav</span>
<ul class="nav nav-pills collapse" id="subnav">
<li>Subnav1</li>
<li>Subnav2</li>
<li>Subnav3</li>
</ul>
</li>
</ul>
You could do something like this :
$("#subnav").on( "click.bs.collapse.data-api", function(e) {
e.stopPropagation();
});
Related
when i click on main category like Kundan it's not working, thats is my code:
<div class="collapse navbar-collapse" id="mainNav">
<ul class="nav navbar-nav">
<li class="dropdown">Kundan
<ul class="dropdown-menu" role="menu">
<li>Bangles</li>
</ul>
</li>
</ul>
</div>
try data-toggle="href" instead of data-toggle="dropdown".
The html code is
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
The jquery code is
$('#accountNavX' ).hide();
This has not worked.My end goal is to only hide all the account nav list items.
Edit:
Was lazy accountNavX was referring to me repeating it three times with the respective number.
jQuery hides by writing display:none directly on the element. Usually it takes precedence over all. Bootstrap attaches !important to it's display: block code, thus preventing jquery from overriding it.
You would have to do the following:
$('.accountNavX').removeClass('visible-xs-block').hide();
In below code snippet, I have added a class acc-nav. I am using that to hide elements.
Or you can use a different selector like li[id^=accountNav].
function hideNavItems() {
// $('.acc-nav').hide()
$("li[id^=accountNav]").hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="acc-nav visible-xs-block">Account</li>
<li id="accountNav2" class="acc-nav visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="acc-nav visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
<button onclick="hideNavItems()">Hide Account Nav items</button>
</div>
Try this:
$('[id^=accountNav]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
#f.khantsis answer is correct.
Here's my solution in CSS way. You can use media query to hide certain elements in smaller break points,
#media (max-width: 767px){
#accountNav1, #accountNav2, #accountNav3{
display: none !imporant;
}
}
This way you don't need to worry for larger screen which button will appear automatically.
Just add a new class to all the accountNav-id- items. For example add a class called accountNav to all of those. Then just call $(".accountNav").hide();
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
and js code:
function logout(){
$('.nav').children().hide();
}
I am trying to active menu and sub menu whichever is active. If a sub menu is active, main of that should also be active.
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
<li class="active">HOME</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LEARNING CURVE<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>ABOUT US</li>
<li>CONTENT DEVELOPMENT PROGRAM</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">SKILL UP<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>ONLINE COURSES</li>
<li>SKILL TEST</li>
<li>JOBS</li>
</ul>
</li>
</div>
I put the script in a js file and named it as active.js.
This is the js code:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("navbar ul a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});[![menu menu bare home is active now manually][1]][1]
$(this).addClass("active"); is only for applying sub menu only. You also want to apply sub menu class. user parent element class
On my mobile part of the site I want to show the submenu without having to click/hover the parent.
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown "><a class="dropdown-toggle" href="/">Home</a>
<ul class="dropdown-menu" >
<li>News</li>
<li>Contact
<li>About us</li>
</ul>
<li>
</ul>
</div>
I want to show the submenu without having to click or hover the parent. Codes I'm using is CSS, Javascript and Jquery so I can use one (or all) of them to make this. Using the latest version of Bootstrap to make the site (3.3.6).
EDIT
The JSFiddle: https://jsfiddle.net/uvd5jp0o/
Here you can also see I've made the submenu display on hover in jquery.
You can add the class visible-xs- to make the nav displayed in mobile browsers
Checkout the bootstrap website
http://getbootstrap.com/css/
So, for extra small (xs) screens for example, the available
.visible-- classes are: .visible-xs-block, .visible-xs-inline, and
.visible-xs-inline-block.
Try This:
DEMO
Use some piece of script :)
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul id="Drp" class="dropdown-menu visible-xs">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
SCRIPT:
$(document).ready(function(){
CheckScreenSize();
});
window.onresize = function(event) {
CheckScreenSize();
};
function CheckScreenSize(){
if($(window).width()<768){
$("#Drp").addClass('visible-xs');
}else
{
$("#Drp").removeClass('visible-xs');
}
}
Or you can set a width when you whant the menu to show, like this:
window.onload = checkWindowSize;
window.onresize = checkWindowSize;
function checkWindowSize() {
if ($(window).width() < "768") { //example width of 768px
$("#bs-example-navbar-collapse-1 li").addClass('open');
}else{
$("#bs-example-navbar-collapse-1 li").removeClass('open');
}
}
Or you can use the built in class in bootstrap and add it to your ul-element like this:
<ul class="dropdown-menu visible-xs">
The codes will check the window width and only react when the width is smaller then 768px
I'm using backbone and Jquery and I have a backbone menu with a bunch of click able links.
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li class="dropdown">
<a data-toggle="dropdown" id="n-btn" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li> dropdown1</li>
<li> dropdown2</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
I'd like to be able to do the following make a generic function such that I can click any of the links in the menu bar div above and have one generic function to handle all of the clicks.
Currently I have to create a separate function using jQuery for each id/herf
$(window).load(function(){
$("#dropdown1").on('click.dropdown.data-api', function(e) {
e.preventDefault();
alert("test");
});
});