I am creating bootstrap dropdown menu in my page ..I need to create same dropdown for different elements...I created one dropdown as follows
<ul>
<li class="dropdown" id="menu5"><a class="dropdown-toggle" data-toggle="dropdown" href="#menu5"> Settings
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Content</li>
<li><a>Add
User</a></li>
<li><a href="" id="vwUserHier">
search</a></li>
<li>Edit</li>
</ul></li>
</ul>
one menu created correctly but i want to create other menu with the same options how should i do this ...
Is there any way to reuse the contents of dropdown-menu class...
Have you tried JQuery clone method??
You'll probably have to use it with the 'true' option.
Related
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.
I was working on a mini website project using django. I found bootstrap a while ago and started using some of their features. One that I really liked was the dropdown button.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
But I was having a unexpected "error"/bug. When I click on one of those buttons it will add its href to the url.
And here comes the problem. It will add the href even if the url already contains it. How can I solve this problem and where. On django scripts or with javascript?
The Problem
It looks to me like everything is behaving as it should technically, the problem is with the href target itself.
Since you have a relative link not an absolute one, it assumes it target is relative to the page you are on.
Potential Solutions
1 - Use an absolute link in this case.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
2 - Use the base tag.
This will set a root url for your website, it may cause unexpected results so check and re-check if you use this solution.
HTML Base Tag
I have use the Yeoman angular-fullstack generator and absolutely love it!
I'm trying to add a dropdown in the navbar.
I found the navbar controller in Client/Components/Navbar/navbar.controller.js and added items to the menu object. This works fine for individual pages, however I cannot find any syntax on how to add a dropdown menu!
I'm sure this is an easy question to answer but I am struggling to find any relevant documentation.
Cheers
Angular fullstack uses bootstrap. So you can use a bootstrap 3 drop-down menu where you would like your menu to be in the file that you found. If you go to http://getbootstrap.com/components/#dropdowns it's explained there.
angularfulstack may use bootstrap 3, however, for dropdown you need to use ui-bootstrap way of doing things.
<li ng-show="$ctrl.isLoggedIn()" class="btn-group" uib-dropdown is-open="status.isopen">
<a>
<span id="single-button" type="button" uib-dropdown-toggle ng-disabled="disabled">
<span class="glyphicon glyphicon-cog"></span>
</span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="users"><span class="fa fa-address-card-o"></span> Users</a></li>
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="dashboard"><span class="fa fa-dashboard"></span> Dashboard</a></li>
<li ng-show="$ctrl.isAdmin()" class="divider"></li>
<li ng-show="$ctrl.isLoggedIn()" role="menuitem" ui-sref-active="active"><a ui-sref="company"><span class="fa fa-gears"></span> Company Information</a></li>
</ul>
</li>
I've been using Selenium with the product for a while.
Regular HTML pages, forms and javascript are working well with it.
Our developer just added an AJAX drop-down menu.
I can't 'record' that with selenium, how can I use it? Actually I can record that the control was initially clicked (which makes the drop-down appear) but not what option is then clicked. How can I then detect that they clicked on one of the options?
The HTML that's displayed is:
<ul id="fruit-switcher" class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" href="#">
Change fruit…
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/23-bananas/activate"></a>
</li>
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/28-apples/activate"></a>
<li>
</li>
<li>
other options (a links)...
</li>...
</ul>
</li>
</ul>
<script>
//<![CDATA[
$(function() {
$('#fruit-switcher .dropdown-toggle').dropdown();
})
//]]>
</script>
You can always send_keys to the element.
Actually it was straight-forward selenium code:
click link="Change..."
pause 200
click //ul[contains(#id,'fruit-switcher')]//ul[contains(#class,'dropdown-menu')]/li[3]/a
click link="Change..."
pause 600
click //ul[contains(#id,'fruit-switcher')]//a[contains(text(),'Bananas')]
I've got a project I'm working on and for some reason, I can't get the dropdowns to work on my menu. I've included the proper files which leads me to believe it's a problem in my code.
Here's my page in action: https://git.jobud9.com/ (try the dropdown on the right side of the menu. Also don't mind the prompt your browser will issue because my certificate approval's still pending.)
And here's the code powering it:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>hi</li>
</ul>
</li>
Thanks much in advance!
Your html code is correct. Maybe you forgot to attach a script? Look this dropdown js