I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
Related
Is it possible to have multiple dropdown menus in the same nav class in bootstrap, without putting each menu item in a separate div?
What is happening is that when I click on the dropdown menu , the same dropdown opens up every time( I have two dropdowns for two separate menu items)
I have tried using data-target to open only the dropdown with a specific id but this returns a console error.
<nav>
<a>Menu item 1</a>
<a>Menu item 2</a>
<a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3(dropdown menu 1)</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div>
<a class="dropdown dropdown-toggle" href="#" style= "display:none;" id="certdropdown" data-toggle="dropdown" data-target="#dropdown2" aria-haspopup="true" aria-expanded="false">Menu item 3 ( dropdown menu 2)</a>
<div class="dropdown-menu" aria-labelledby="dropdown" id ="dropdown2">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div></nav>
If i separate both menu items in separate div, it works but my css gets ruined
No, it's not possible to have two dropdown menus inside the same div. They need to be separated since the code to toggle them looks for the first element in the parent div of the button/anchor. So if they are in the same parent div only the first will be toggled.
Since you haven't provided what part of your CSS gets ruined, I'm gonna guess two problems you might encounter with this.
The dropdown buttons gets wrapped to the next row.
You're selecting links inside your nav by doing nav > a, which ignores the links inside the <div class="dropdown"></div> or you're selecting links inside your nav by doing nav a, which includes the links inside the dropdown-menu.
First solution:
If your dropdown buttons/links gets placed on their own row, it's because they have the display value of block. Add the class d-inline to the <div class="dropdown"> to fix this.
Second solution:
Select and style your links inside the nav with this code:
nav a:not(.dropdown-item) {
// styling
}
This will ignore the links inside the dropdown but style all other links.
If you're having some other problem with your CSS please explain what it is and I will try to help you.
The suggestion here looks good. Essentially, you need to use btn-groups, as shown in this example and just above it in the docs.
Using your code with the display none style and the unnecessary id taken off of the second dropdown:
<nav>
<a>Menu item 1</a>
<a>Menu item 2</a>
<div class="btn-group">
<a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu item 3(dropdown menu 1)
</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div>
</div>
<div class="btn-group">
<a class="dropdown dropdown-toggle" href="#" id="certdropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu item 3 ( dropdown menu 2)
</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div>
</div>
</nav>
You can read more specifics about button groups here.
I have a navigation menu which is made up of several dropdowns. The menu is a bootstrap navigation menu. Each link goes to the same page. The next page "/page" has several other links. When the user clicks on the nav link and the next page is loaded i want it to automatically click a link on that page with a specific href attribute. Here is what i got so far but no lucky...
Jquery
$(document).on('click', '.link-1', function(){
$('a[href="#1485519100309"]').click();
});
HTML Part of the bootsrap NavBar
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="http:/#">Title<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>
<a class="link-1" href="http://myurlhere/page">Tab Link 1</a>
</li>
<li>
<a class="link-2" href="http://myurlhere/page">Tab Link 2</a>
</li>
<li>
<a class="link-3" href="http://myurlhere/page">Tab Link 3</a>
</li>
<li>
<a class="link-4" href="http://myurlhere/page">Tab Link 4</a>
</li>
</ul>
Using class:
$(".link-1").trigger('click');
or
$("a[href='href-link']").trigger('click');
Trying to create a changeable button-drop-down from Bootstrap HTML in conjunction with Javascript. The HTML looks as:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
Would like to be able to change the choices of the drop-down button based on what else is happening on the page. So if user clicks a "profile" button somewhere on the page instead of Choice1, Choice2 and Choice3 there would be Resume, Contact Info, Education etc. The number of items in the menu would change as would the exact values for the display text. Ideally would like to use some type of array to push/pop from the choices. Have tried add, childappend, etc.
Here's one approach - have all your menu items in the HTML, and then use CSS to hide/show the appropriate ones
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul id='my-dropdown' class="dropdown-menu" data-menu-id='default'>
<li class='default'>Choice1</li>
<li class='default'>Choice2</li>
<li class='default'>Choice3</li>
<li class="divider"></li>
<li class='default'>Choice..</li>
<li class='profile'>Resume</li>
<li class='profile'>Education</li>
<li class='badgers'>Eat a badger</li>
</ul>
</div>
CSS:
/* hide all menu items */
ul.dropdown-menu > li {
display: none;
}
/* show menu items if they're relevant */
ul.dropdown-menu[data-menu-id=default] > li.default,
ul.dropdown-menu[data-menu-id=profile] > li.profile,
ul.dropdown-menu[data-menu-id=badgers] > li.badgers {
display: list-item;
}
Now use javascript to change the data-menu-id attribute on your dropdown, and the menu items will change automatically:
var dropdownMenu = document.getElementById('my-dropdown');
dropdownMenu.setAttribute("data-menu-id", "profile");
Lots of other ways to do this, but this is probably the slickest approach. The CSS basically says "if the class of the list item matches the menu id attribute on the parent, make it visible".
An advantage of this approach is that you can make a menu item visible in multiple different menus just by giving it multiple classes:
<!-- will be visible in the 'profile' menu and the 'badger' one -->
<li class='profile badgers'>Badger Resume</li>
I have simple Bootstrap 3 toggle navigation :
<ul class="nav navmenu-nav clearfix" >
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-home"></i><i class="title"> Menu item 1 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
test 1
</li>
<li class="clearfix">
test2
</li>
</ul>
</li>
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
Test 3
</li>
<li class="clearfix">
Test 4
</li>
</ul>
</li>
</ul>
I need when click on Test 1 and go to that page,to that part of menu be open on that page.Etc, if I click on test 3,url take me on test 3 page ,to have open second part of menu...
I try with similar problems, but no result,when go to page,menu is collapsed.
Bootply Link
I don't have much time but I am going to suggest a procedure for you. so I suggest you save the variable with Jquery using cookies:
you might need to call this: <script src="/path/to/jquery.cookie.js"></script> and on github plugin link is right here: jquery cookie
Now give an id to all of your dropdowns link
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
add an event listener to get the id of the dropdown link being click:
just like it is done here: get id of item clicked
store the value in a variable known as myVariable
$.cookie('cookieName', 'myVariable');
you can set expiry date
$.cookie('cookieName', 'myVariable', { expires: 1 });//expires after a day
in the other page, you read the cookie and store it in new variable:
newVariable = $.cookie('cookieName');
use that variable for your dropdown to be enabled
$(newVariable).dropdown('toggle');
Other things you might want to check is: send variables -cookies method in javascript, Open a dropdown automatically, store id of a link
If I setup a Master page to display a header similar to the following
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
I want to set the element active for the current page the user is on so in html it will look like this if default.aspx is the active page.
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown active"> <%--active--%>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
The header menu is based on an existing template so is all html with CSS styling and does not contain any asp: controls. I know I can do this in codebehind by setting the attributes but most of the searches I've pulled up say there could be a better way or here's a dirty workaround link1 & link2
What would be the best way(s) of doing this?
First you have to set all li tags as server Controls
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx" runat="server" id="lidefault">Home</a>
</li>
<li>
About Us
</li>
</ul>
do like the above for all li tags
Then in master page load,
string sURL=Request.Url.ToString().ToLower();
if (sURL.Contains("/default.aspx")
lidefault.Attributes.Add("class", "active")
else if (sURL.Contains("/about.aspx")
liabout.Attributes.Add("class", "active")
// do like the above for the rest li tags
You can check it with javascript. Set a foreach loop for check each link of your menu. If your menu url equal the page url, add active class with .addClass() method.