i have created a dropdown menu with provinces name and below each province its citesties are mentioned. I want these cities to appear in submenu on left side of province when it is clicked.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<select name="campus" id="campuslocation" class="browser-default" required="">
<optgroup label="Eastern Cape">
<option value="31">Umtata / Mthatha</option>
<option value="32">Willowmore</option>
<option value="33">Willowvale</option>
</optgroup>
<optgroup label="Free State">
<option value="47">Koppies</option>
<option value="48">Kroonstad</option>
</optgroup>
</select>
select is not the right element for this task, a dropdown is much better suited.
There is no default way to create submenus but it's easy enough to achieve.
$(document).ready(function() {
$('.dropdown-submenu a').on("click", function(e) {
$(this).parents('ul').find('.dropdown-submenu ul').hide();
$(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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All South Africa
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Eastern Cape</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Umtata / Mthatha</a></li>
<li><a class="dropdown-item" href="#">Willowmore</a></li>
<li><a class="dropdown-item" href="#">Willowvale</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Free State</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Koppies</a></li>
<li><a class="dropdown-item" href="#">Kroonstad</a></li>
</ul>
</li>
</ul>
</div>
Hope, this will help. We can able to use , instead of select.
<!DOCTYPE html>
<html>
<head>
<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>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.dropdown {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Eastern Cape <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
<li><a tabindex="-1" href="#">Willowmore</a></li>
<li><a tabindex="-1" href="#">Willowvale</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Free State <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
<li><a tabindex="-1" href="#">Willowmore</a></li>
<li><a tabindex="-1" href="#">Willowvale</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Related
I have a dropdown menu with contains a data toggle for tabs. I have the problem that once I selected an item, the item stays selected and stays blue.
Any ways to fix this?
Code:
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
Make a id="dropdown-menu" next to class="dropdown-menu". This would be more convenient. reference line -20.
Make a Javascript that will add .active class in your clicked area/HTML. For example if you click on
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
that will add .active class in there
<button class="dropdown-item class" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
And it will remove .active class from the previous position. This .active class is a Bootstrap class. It will render CSS style from Bootstrap.
Code below-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div id="dropdown-menu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
<script>
var header = document.getElementById("dropdown-menu");
var btns = header.getElementsByClassName("dropdown-item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
document.getElementById("overall").innerHTML = this.innerText;
});
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
The application I develop needs a submenu in the option tag. If a user clicks on one of the options from the submenu, it shows up in the search bar to be searched. However, I am not being able to do so.
This is the code:
<div class="form-row">
<select class="form-control mx-sm-3"">
<option selected="selected">Variant</option>
<option>Protein Variant</option>
<option>Copy Number Alterations</option>
<ul class="nav navbar-nav">
<li class="dropdown">
<option href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></option>
<ul class="dropdown-menu">
<option>Service A</option>
<option>Service B</option>
<option>Service C</option>
</ul>
</li>
</ul>
</select>
</div>
Ideally, if the user hovers over 'service' there should be a new box with options 'Service A', 'Service B', 'Service C'
HTML way only offer optgroup
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
if you want a more specific dropdown, you need to implement it with javascript, like:
$(document).ready(function() {
$('.dropdown-submenu a').on("click", function(e) {
$(this).parents('ul').find('.dropdown-submenu ul').hide();
$(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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All South Africa
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Variant</a>
<a class="dropdown-item" href="#">Protein Variant</a>
<a class="dropdown-item" href="#">Copy Number Alterations</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Service A</a></li>
<li><a class="dropdown-item" href="#">Service B</a></li>
<li><a class="dropdown-item" href="#">Service C</a></li>
</ul>
</li>
</ul>
</div>
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>
Here is some code from my project:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
How can I make the text(select) and the caret appear in one line?
use this css:
#btnText{
display: inline;
padding-right: 10px;
}
Put the Span with the caret in the #btnText div.
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
#btnText{
display: inline-block;
margin-right: 10px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
By simply adding display:inline-block to your #bigText div as in the snippet below. I have also added some margin for spacing.
#btnText{
display: inline-block;
margin-right: 5px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>