I am struggling to get my dropdown menu to function properly. I pulled the template for the dropdown straight from the Twitter Bootstrap guide(v3) and tweaked it for my purposes. The app is built in Sinatra, and the code for the dropdown resides in my layout view. The menu works properly from any views the are on the same level as layout, but when clicking on the dropdown from any view located in a subdirectory, clicking it just appends a # to the end of the URL and the menu does not drop down.
<li class="dropdown">
<a data-target="#" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Campaigns <span class="caret"></span></a>
<ul class="dropdown-menu">
<% current_user.campaigns.each do |campaign| %>
<li><%= campaign.name %></li>
<% end %>
<li role="separator" class="divider"></li>
<li>New Campaign</li>
</ul>
</li>
Any help is greatly appreciated!
Use jQuery for multi level dropdown, if that's what you are looking for.
Substitute your dropdown data into this.
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">MENU
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">List 1</a></li>
<li><a tabindex="-1" href="#">List 2</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Related
I'm trying to get a collapse menu item to show the arrow upon page load, is there a way to do this? Currently on load, it doesn't display the arrow until the user clicks on "Files"
Here is my code:
<ul class="list-unstyled components">
<p><b>Main Menu</b> </p>
<li>
About
Files
<ul class="collapse list-unstyled " id="pageSubmenu">
<li>+Photos</li>
<li>+Videos</li>
<li>+Music</li>
</ul>
</li>
</ul>
Here are some screenshots of what is happening
This is on page load
This is after I click on "files"
Finally this is after I close the list
As you can see the arrow on the right doesn't appear when the page is loaded. Trying to get it to appear so users know it's a dropdown
thanks!
Add aria-expanded="false" to
Files
So it will be
Files
This will maintain your current css
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
<style>
.dropdown-menu{
border-radius:0px !important;
}
.dropdown-submenu {
position: relative;
border-radius:0px !important;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
border-radius:0px !important;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Menu Tutorials <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Dropdown Menu 1</a></li>
<li><a tabindex="-1" href="#">Dropdown Menu 2</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown Menu 3 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">dropdown 1</a></li>
<li><a tabindex="-1" href="#">dropdown 2</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">dropdown 3 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>dropdown 1</li>
<li>dropdown 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
you have two choices :
first choice , by adding aria-expanded="false" to your "a" tag as the following:
Files
second choice , by using "fontawesome" icon inside your "a" tag as the following:
</i>
*if you want to use "fontawesome" don't forget to install "fontawesome" library in your header, see the docs on the following link for more information :
https://fontawesome.com/v5.15/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont#load-all-styles
i hope this helpful .
I've got this working pretty much how I want EXCEPT that the drop down box values are on the left and the rest is properly centered. PLEASE HELP!
I want to keep the level 2 vales to the right of the caret and I've tried everythign I could find online. I'm drawing a total blank.
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle center-block" type="button" data-toggle="dropdown">Pick One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1">January</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Februrary <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">Link</a></li>
</ul>
</li>
<li><a tabindex="-1">March</a></li>
<li><a tabindex="-1">April</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">May <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li>
</ul>
</li>
<li><a tabindex="-1">June</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">July<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li>
</ul>
</li>
</ul>
</div>
</div>
You would just need to modify your container and dropdown divs:
The container needs to center its content
The dropdown display should be changed so that it doesn't automatically take up all the width within its container.
Here's an example:
<div class="container" style="text-align: center;">
<div class="dropdown open" style="display: inline-block;">
....
</div>
</div>
The options listed on the website do not change the dropdown name when a dropdown element is clicked
If I have understood your question correctly and I done have your code, Try the below code.
Hope this helps.
$(function () {
$(".dropdown-menu li a").click(function () {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="btn">Please Select From List</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Class I</a></li>
<li><a tabindex="-1" href="#">Class II</a></li>
<li><a tabindex="-1" href="#">Class III</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Other</a></li>
</ul>
</div>
I want user to be able to select everything within Morphological Transformation (Erosion, Dilation, Opening, Closing), but not 'Morphological Transformation' itself. Thank you for every answer!
HTML Code:
<div class="container">
<div class="row">
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Select Pre-Processing Method <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Normalisation</li>
<li>Canny Edge Detection</li>
<li>Smoothing</li>
<li></li>
<li class="divider"></li>
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Morphological Transformation</a>
<ul class="dropdown-menu">
<li><a>Erosion</a></li>
<li><a>Dilation</a></li>
<li><a>Opening</a></li>
<li><a>Closing</a></li>
</ul>
</li>
...
</ul>
</li>
</ul>
</div>
</div>
You can disable anchor events and keep hover effects by using this:
.disabled-link:hover{
background: red;
}
.disabled-link:active{
pointer-events: none;
}
Test
It is usable for all modern browsers:
click!
I am trying to build my first website using the bootstrap template and I cannot get the dropdown button in the nav bar to show anything or open. It will display everything the way I want it, but the "open" function of it isn't working properly for some reason.
Here is what I have in the HTML part:
<li div class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
(I haven't updated all of the target links yet, for now most of them just show as a #)
and for the CSS I have:
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
Please help!
Error in your code <li class="dropdown"> try this code
Your page does not include necessary js files so insert tis line in section
Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
HTML
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
Example Markup
<!-- start: User Dropdown -->
<li class="dropdown">
<a id= "uname" style="color:#fff;text-shadow:none" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i>
Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li></i> Change Password</li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
<!-- end: User Dropdown -->