Is there a way to incorporate navigate the moment you click on a dropdown? Id like the page to navigate to section 4 upon clicking section for on the navigation bar and then if the user decides to navigate further from the list, they can by clicking on an item from the list. Thanks!
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
Bootstrap documentation provides exactly what you're looking for, please have a look :
Bootstrap scrollspy on navbar
Related
is it possible to add an Tab to an existing tab menu?
I have a Tab like
<ul class="nav nav-tabs my-tabs" role="tablist"><li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>
<li class="active">Write Mail</li>
<li>Hint</li>
<li>Custom</li>
<li>Mails</li>
<li>Customer Logs</li>
<li>Options</li>
<li>Smartlogs</li>
Is it possible to add a tab with javascript or something else? The Tab is generate by the software herselfe, so I can't add it directly - only with a hook which can insert some code.
Thanks!
Try this like,
$(function(){
$('.my-tabs').append(
'<li>New Tab</li>'
);
});
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(){
....
....
});
To preface, sorry if the answer lies in the javascript but I'm currently taking a course online and haven't yet learned javascript so I can't troubleshoot too well there since my understanding is really lacking right now.
I have a bootstrap dropdown menu with nav-pills below. My issue is that when I click a link in my work dropdown and the href links to another spot on the page (single page website) the menu doesn't close out after clicking. If the href is empty with a "#" then it closes out. I can't for the life of me solve this.
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
</li>
Let me know if I'm missing anything (javascript?) this is my first post.
Not too sure of the source of the problem but this is a nice work-around to forcefully close the dropdown menu.
<script>
//Can go in a sperate .js file as well
function closeDropdowns() {
$(".dropdown-toggle").each(function() {
$(this).attr("aria-expanded", false);
$(this).parent("li").removeClass("open");
});
}
</script>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
When ever the link is clicked set back the.
aria-expanded to true on the main anchor tag with class dropdown-toggle
$('ul.dropdown-menu li a').on('click',function(){
$(this).closest('li.dropdown').find('a.dropdown-toggle').attr('aria-expanded','false');
});
I'm dealing with a problem with Bootstrap navbar, where I have multiple dropdowns but I need the actual dropdown-toggles to be links aswell, it works on desktop, but there is a problem with that on mobile, where there is no hover which Im using to show the dropdown.
For example this basic menu:
<!-- 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 class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
I am controlling the hover dropdown with JQuery.
I want to have the dropdowns shown on mobile automatically, so you can click all of the links.
I used the solution described here on stackoverflow
Problem with that one is that if you have another link or dropdown under the first one, the second one overlays the dropdown menu above it so you can't click it.
Look at this jsFiddle
When the navbar is collapsed, open it and try to hover over the dropdown menu, you can see that the link underneath is highlighted instead.
For some reasone the bottom link element gets expanded, and I can't get rid of it.
Any help would be much appreciated.
I have a multilevel dropdown made with bootstrap, now when I navigate few levels deep and accidentally pointer comes out of current dropdown list, all lists are closed until 1st level. How can I keep all opened dropdowns open and close only when it is clicked outside dropdown? i.e. do the same when mouse is clicked on outer space, not when just moved there.
Here is my demo: http://jsfiddle.net/n8XJb/
<ul class="nav nav-pills">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li class="dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
When you navigate to Level 3, and then mouse pointer comes out of current list, it goes back to Level 1 instantly.
I have solved it by some custom event handling (http://jsfiddle.net/n8XJb/2/):
jQuery('.dropdown-menu li a').mouseover(function(e) {
e.stopPropagation();
jQuery(this).parent().parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
jQuery(this).parent().addClass('open');
});
jQuery('.dropdown-toggle').click(function(e) {
jQuery(this).parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
});
Bootstrap uses class open for open dropdowns, so we can set/unset it manually whenever needed.