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 .
Related
I am trying to add a submenu for the 3rd item in the list that is in a dropdown from the item in the navbar, I've tried using the classes built into bootstrap and was unsuccessful. This is in my navbar
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
Edit:
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
<!-- from w3schools-->
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
This link better shows what I want to do but haven't been able to.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
Check below snippet.
As per your given link you need to change little html code and you have to add script to toggle dropdown.
You can also achieve this using css. see https://codepen.io/Magisters/pen/MwbeWv
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
<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>
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li class="dropdown-submenu">
item3<span class="caret"></span>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
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>
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>
I can't get this menu to show horizontal, I want it to show like the one on w3Schools (enter their page, and above, in the navbar there is an option with "MORE", so when you click it, it shows a big menu with many a lot of options.)
The CSS is the simple Bootstrap default one.
I can't get mine to do so. Here is the code I'm using:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Extra Verification <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Provides Address, Status, Previous Names</li>
<li>Connecticut </li>
<li>Georgia </li>
<li>Louisiana</li>
<li>Vermont</li>
<li>New Mexico</li>
<li class="divider"></li>
<li class="dropdown-header">Provides Address and Status</li>
<li>Alabama</li>
<li>Alaska</li>
<li>Arkansas</li>
<li>Arizona</li>
<li>California</li>
<li>Colorado</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Maryland</li>
</ul>
</div>
So if I'm understanding correctly, you want the dropdowns to appear/disappear on click? You need jQuery to do that. With CSS you can make them appear/disappear on hover but not toggle on clicking.
You have to include jQuery and Bootstrap JavaScript into your page:
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Extra Verification
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Provides Address, Status, Previous Names</li>
<li>Connecticut </li>
<li>Georgia </li>
<li>Louisiana</li>
<li>Vermont</li>
<li>New Mexico</li>
<li class="divider"></li>
<li class="dropdown-header">Provides Address and Status</li>
<li>Alabama</li>
<li>Alaska</li>
<li>Arkansas</li>
<li>Arizona</li>
<li>California</li>
<li>Colorado</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Maryland</li>
</ul>
</div>
</body>
</html>
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!