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");
});
});
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".
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
The site I am testing has a dropdown menu with the following code:
<ul class="nav navbar-nav navbar-right" data-ng-show="authentication.user">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span data-ng-bind="authentication.user.displayName" class="ng-binding">Testy McTesterson</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
View Profile
</li>
<li>
Edit Profile
</li>
<li id="h_manage_social_accounts">
Manage Social Accounts
</li>
<li data-ng-show="authentication.user.provider === 'local'" class="">
Change Password
</li>
<li class="divider"></li>
<li>
Signout
</li>
</ul>
</li>
</ul>
How can I get protractor to click the links like "Signout" within the dropdown menu?
First, you need to click the toggle button, then choose the element from the dropdown:
element(by.css('li.dropdown > a.dropdown-toggle')).click();
element(by.linkText('Signout')).click();
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();
});