I need to make a div as a dropdown and when clicking on it,
the menu slides and shows its items.
I've tried to implement this but when clicking on the div it doesn't show
it's items at all.
I've used this reference:
http://getbootstrap.com/javascript/#dropdowns-examples
Here's the way I've implemented this:
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
</div>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</div>
How can it be solved ?
There's 2 things wrong here:
You're mixing both data-* attributes and JavaScript initialization, it should be either one or the other (maybe this isn't a real problem, but it is unnecessary and messy).
You haven't followed the example correctly, the dropdown trigger and contents need to both be contained within the div with class "dropdown".
Change the HTML to:
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
No JS required (just include the bootstrap.js and it should do the rest).
Working fiddle:
https://jsfiddle.net/dpjpcfuy/1/
You can do this easily with data-target attribute
<ul class="no-bullets droppable-menu">
<li>Our Story</li>
<li>Our Menu</li>
</ul>
target is in the div
<div class="dropdown-menu" id="m-target-1">
... content in your div
</div>
<div class="dropdown-menu" id="m-target-2">
... content in your div
</div>
and remove
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
from your JS code. This should work!
Related
I tried adding a toggle to every link in my menu so the menu would close on mobile after pressing a link. I found a solution for this by adding data-toggle="collapse" data-target="#navbarSupportedContent" to the <a href=""?>. Now this solution worked in bootstrap 3 but in bootstrap 4 it still closes the menu, but doesn't link to the text put in the <a href=""> anymore.
Why does this stop from linking to the link and how do I solve this?
The following fiddle shows the problem, I added a comment above both the links without toggle and the links with toggle. Ignore everything around it, I'm pretty sure it issn't in any of the code around it.
code:
.block{
height: 200px;
padding: 100px;
font-size: 30px;
border-top: 3px solid gray;
}
.navbar li a {
color: #bbb;
}
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto container px-md-5">
<!-- Links WITHOUT data-toggle -->
<li data-menuanchor="block1">
block1
</li>
<li data-menuanchor="block2">
block2
</li>
<li data-menuanchor="block3">
block3
</li>
<!-- END of Links WITHOUT data-toggle -->
<!-- Links WITH data-toggle -->
<li data-menuanchor="block1">
block1 (with toggle+target)
</li>
<li data-menuanchor="block2">
block2 (with toggle+target)
</li>
<li data-menuanchor="block3">
block3 (with toggle+target)
</li>
<!-- END of Links WITH data-toggle -->
</ul>
</div>
</nav>
<a name="block1"></a>
<div class="block" data-anchor="block1">block1</div>
<a name="block2"></a>
<div class="block" data-anchor="block2">block2</div>
<a name="block3"></a>
<div class="block" data-anchor="block3">block3</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I'm also open for other solutions, like solutions in JavaScript or html.
Try this
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu Name 1 </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Submenu 1-1
Submenu 1-2
Submenu 1-3
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu Name 2 </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Submenu 2-1
Submenu 2-2
Submenu 2-3
</div>
</li>
</ul>
</div>
I have a table created with dynamically created number of rows. Every row has a dropdown-menu button.
I want to show the selected item from dropdown-menu on the dropdown-menu button, but am unable to do so. Below is my code:
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</button>
<ul class="dropdown-menu" role="menu" onchange="selectFromDropDown(this.value)">
<li><a id="option1" selected>option 1</a></li>
<li><a id="option2">option 2</a></li>
<li><a id="option3">option 3</a></li>
</ul>
</div>
</td>
The javascript code is as below
function selectFromDropDown(value){
$(document).ready(function() {
$(".dropdown-menu li a").click(function(){
var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
parent.html($(this).text());
parent.val($(this).data('value'));
});
});
}
Try text() instead of html():
parent.text($(this).text());
Also, $(this).data('value')) is undefined. So the attribute value will not be set to anything.
I will suggest you to use $(document).ready(function() { to wrap the whole code instead of using it inside the function.
$(document).ready(function() {
function selectFromDropDown(value){
$(".dropdown-menu li a").click(function(){
var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
parent.text($(this).text().trim());
parent.val($(this).data('value'));
});
}
selectFromDropDown($('.dropdown-menu').val());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="option1" selected>option 1</a></li>
<li><a id="option2">option 2</a></li>
<li><a id="option3">option 3</a></li>
</ul>
</div>
</td>
In my application, the navbar has upto 2 levels of submenu. My requirement is to change few features of a menu when either it is selected or any of its submenu (of any level) is selected. I have been given this code that does it in an ineffective way till date (ie) writing one function for every in navbar which will make all of its specific CSS/image changes. But I would like to find an effective way (mostly one method) which will perform all the CSS changes when required data is provided as input.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wrapper zeroPadding">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="firstEmptyDiv">
<div class="toggleBtnDiv" (click)="toggleBtn()">
<i class="fa fa-bars toggleButton" aria-hidden="true"></i>
</div>
</li>
<li>
<a routerLink="/dashboard" routerLinkActive="active">
<img class="iconImg" id="iconImg" src="/assets/images/dashboard_icon.svg" alt="Dashboard menu icon" />
<br>
<span class="textWrap" *ngIf="buttonColor">Dashboard</span>
</a>
</li>
<li class="nav nav-stacked" *ngIf="this.hasCompanyStructureAccess">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="borderColor"
[style.background-color]="color">
<img class="iconImg" id="iconImg" [src]="imgSrc" alt="Company structure menu icon" />
<span [style.color]="routerText" *ngIf="buttonColor" class="textWrap overflow-wrap">Company Structure</span>
<span [style.color]="caretColor" class="caret"></span>
</button>
<ul class="dropdown-menu slide">
<li *ngIf="this.dataService.hasViewLocationAccess">
<a routerLink="/location" routerLinkActive="active">Location</a>
</li>
<li *ngIf="this.dataService.hasViewBranchAccess">
<a routerLink="/branch" routerLinkActive="active">Branch</a>
<li *ngIf="this.dataService.hasViewRoleAccess">
<a routerLink="/role" routerLinkActive="active">Role</a>
</li>
<li *ngIf="this.dataService.hasViewDepartmentAccess">
<a routerLink="/department" routerLinkActive="active">Department</a>
</li>
<li *ngIf="this.dataService.hasViewDesignationAccess">
<a routerLink="/designation" routerLinkActive="active">Designation</a>
</li>
<li *ngIf="!needToShowFlag">
<a routerLink="ACL" (click)="ACL()" routerLinkActive="active">ACL</a>
</li>
</ul>
</div>
</li>
<li class="nav nav-stacked">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="leaveModuleborderColor"
[style.background-color]="leaveModulecolor">
<img class="iconImg" [style.padding]="iconImgPadding" id="iconImg" [src]="leaveModuleSrc" alt="Leave menu icon" />
<span class="textWrap" [style.color]="leaveRouterText" *ngIf="buttonColor">Leave</span>
<span [style.color]="caretColorLeave" class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="submenuList" (click)="openSecondList()" (mouseover)="openSecondList()" [style.display]="submenuListDisplay">
<a class="test" tabindex="-1" id="leaveManagementlist">Configuration<span class="caret"></span>
</a>
<ul class="dropdown-menu" *ngIf="openSecondListFlag">
<li *ngIf="this.dataService.hasViewGeneralConfigurationAccess">
<a tabindex="-1" routerLink="generalconfiguration" (click)="generalConfiguration()" routerLinkActive="active">General Configuration</a>
</li>
<li *ngIf="this.dataService.hasViewListLeaveAllocationAccess">
<a tabindex="-1" (click)="listLeaveAllocation()" routerLinkActive="active">Modify Leave Allocation</a>
</li>
</ul>
</li>
<li class="applyLeaveTab">
<a (click)="applyLeave()">Apply Leave</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" id="content">
<router-outlet></router-outlet>
</div>
In this code excerpt, when I select a submenu say 'Location', then its main menu 'Company Structure' should be changed with the following CSS values.
1) A different image should be loaded for this menu
2) background color to be changed
3) Color of caret symbol to be changed
4) A different colored border-left to be included
5) Background color of 'Location' submenu should be changed.
Similar CSS change should happen when clicking on 2 level submenu too like 'General configuration' in the example.
Any suggestions to come up with an effective way to meet this requirement is welcome. Thank you!
I am having a menu, but my icon doesn't want to go next to menu item.
I worked while i had this code
<li class="dropdown">
<a class="dropdown-toggle" data-over="dropdown" href="partners.php">Partners</a>
<span class="caret"></span>
</a>
</li>
I change it, cause I want a separate link when user clicks on link-menu-item and want to make my caret to work with drop-down, So ichange my to :
<li class="dropdown">
Partners
<a class="dropdown-toggle" data-hover="dropdown">
<span class="caret"></span>
</a>
</li>
I moved my dropdown-toogle with an <a> tag to the <span class='caret'> and now I have two <a> tags inside the <li> but the caret not coming next to text for no reason..
Any thoughts?
Here's a sample of my code
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.dropdown-menu li a').click(function(){
$(this).parents('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})
<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.1/jquery.min.js"></script>
<div class="collapse navbar-collapse btnCollapse"><div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Partners<a class="dropdown-toggle" data-hover="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-4">
<li>Club</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><i class="fa fa-sign-in" aria-hidden="true"></i> Sign in</li> </ul>
</div></div>
Hers a fiddle as well: https://fiddle.jshell.net/xjpt2p44/
Cause snippet display only in full mode
Add this css
.nav .dropdown > a {
display: inline-block;
}
So I've came across a really weird compatibility issue, i'm using a dropdown for a sidenav menu with bootsrap 4.0 beta, and it works perfectly fine on Firefox, but on chrome I have a problem :
Basically right when the page loads, if you click the dropdown button it will go up as if it had an invisible negative margin-top, but then when you scroll the page just a bit, and you reclick it, the dropdown will display normally ....
Here is a sample of the code i'm using
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron" style="background-color:transparent">
<img src="img/logo.png">
<div id="titre">
<h1>My Website</h1><br>
</div>
</div>
<div id="wrapper" class="row">
<div class="col-md-2">
<div class="dropdown show">
<button class="btn dropdown-toggle ml-md-1" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose an option
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<ul class="list-group">
<li class="dropdown-item list-group-item">Option 1</li>
<li class="dropdown-item list-group-item">Option 2</li>
<li class="dropdown-item list-group-item">Option 3</li>
<li class="dropdown-item list-group-item">Option 4</li>
<li class="dropdown-item list-group-item">Option 5</li>
<li class="dropdown-item list-group-item">Option 6</li>
<li class="dropdown-item list-group-item">Option 7</li>
<li class="dropdown-item list-group-item">Option 8</li>
<li class="dropdown-item list-group-item">Option 9</li>
<li class="dropdown-item list-group-item">Option 10</li>
</ul>
</div>
</div>
</div>
<div class="schedulePanel col-md-8">
</div>
<div class="col-md-2" >
<div id="mydiv">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
for dropdown item use html a tag element instead of ul and li element.
<div class="dropdown-menu" aria-labelledby="frontend">
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
</div>
Example Mytutorialbox html online editor
for more detail you can check this tutorial. Bootstrap 4 button groups