As the title states, I'm looking to have one single dropdown then have other HTML content in another dropdown submenu, making the dropdown act as a pop out for HTML content. The issue I'm having so far is that once I try just putting a div and code into the UL tag for the secondary drop down, it no longer stays visible on hover. Here is my current markup,
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <i class="icon-caret-down"></i></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<div>
<h1 style="color: #333;">Things</h1>
</div>
</ul>
</li>
The markup is to be honest horrendous as of now, but is there an easier way to have custom content in a Bootstrap sub drop down? This way is causing miles upon miles of issues.
You can think of this way:
<ul class="unstyled">
<li class="dropdown">
<a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<li>
<div class="custom">
<h1 style="color: #333;">Things</h1>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This makes the menu more semantically correct and valid... I feel something you might require in the CSS is:
.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}
Preview
Fiddle: http://jsfiddle.net/praveenscience/yEJ3c/
If you don't need the other children and you're just looking for a rich dropdown, perhaps you want to be using the Popover component instead of the Dropdown component.
Update for Bootstrap 4 - it's now easy to add custom HTML to dropdowns:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item active" href="#">Option one</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">
<div class="row">
<div class="col">Html</div>
<div class="col">Content</div>
<div class="col">Here</div>
</div>
</a>
</div>
</div>
Related
Goal:
Track all the actions required to reach a certain level in a multi-level dropdown.
Example:
A multi-level dropdown like https://s.bootsnipp.com/iframe/xr4GW which can be opened by hovering on it. Once a menu item is clicked on the dropdown, how can one figure out what hover actions led to that part of the menu being opened ?
In the above bootsnip demo, if the first link in level 3 is clicked on, I want to be able to say that:
3rd link in level 1
--> 2nd link in level 2, resulted in being able to
----> click the 1st link in level 3
Current direction:
Currently I'm using mouseover and click events to see if I can some-how co-relate all the events together. But no luck as of yet.
Thank you in advance :)
I copied the snippet and made the following edits:
added a collectable array path, in which the selected elements of the path will be indicated
added listening for mouseover and mouseout events for .dropdown-submenu elements
added rendering of the path array to be able to observe its changes
var path = []
$(".btn-group, .dropdown")
.hover(
function() {
$('>.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).addClass('open');
path.push($(this).children('a').text().trim());
renderDebug();
},
function() {
$('>.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).removeClass('open');
path.pop();
renderDebug();
}
);
$(".dropdown-submenu")
.on("mouseover", function () {
path.push($(this).children('a').text().trim());
renderDebug();
})
.on("mouseout", function () {
path.pop();
renderDebug();
});
const $debug = $("#debug");
function renderDebug () {
$debug.text(JSON.stringify(path, null, 2));
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>a:after {
content: ">";
float: right;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card my-3">
<div class="card-header">
Bootstrap 4 Multilevel Dropdown Hover
<div class="options float-right">
<a class="settings"><i class="fa fa-cog"></i></a>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-refresh"></i>
<i class=" fa fa-expand"></i>
<i class="fa fa-times"></i>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<div class="btn-group">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href="">
Dropdown
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="dropdown-item" href="#">level 1</a></li>
<li><a class="dropdown-item" href="#">level 1</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">
level 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" tabindex="-1" href="#">level 2</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">
level 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">3rd level</a></li>
<li><a class="dropdown-item" href="#">3rd level</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">level 2</a></li>
<li><a class="dropdown-item" href="#">level 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<pre id="debug"></pre>
I have created a nav bar in a ejs file then using this file by including in all the files.
The problem is it is okay in desktop view but it is not responsive for mobile view as it is not using the entire screen and some space is left in the mobile screen.
Here is my nav bar file which i'm including in all of my files.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<!-- <a class="navbar-brand" href="#"></a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/users/home">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/users/pldReports">M & E</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/expense/">Expense</a>
</li>
<a class="nav-link" href="/procurement/">Asset Requisition</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/procurement/getvendorListView">Impaneled Vendor</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-3" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Timesheets</a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-
labelledby="navbarDropdownMenuLink-3">
<a class="dropdown-item" href="/timesheets/taskListView">Tasks</a>
<a class="dropdown-item" href="/timesheets/timesheetListView">Timesheets</a>
<a class="dropdown-item" href="/users/timesheet">Calendar</a>
</div>
</li>
<% if(objUser.isManager) { %>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"> Manage Approvals</a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-
labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="/approvals/pldFormApprovals">PLD Form Approval</a>
<a class="dropdown-item" href="/approvals/expenseApprovals">Expense Approval</a>
<a class="dropdown-item" href="#">Procurement Approval</a>
</div>
</li>
<% } %>
</ul>
<form class="form my-2 my-lg-0">
<ul class="my-2 my-sm-0 navbar-nav">
<li class="nav-item dropdown" style="float:right">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user "></i> <%= objUser.name%> </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-
labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="/users/editProfile">Edit Profile</a>
<a class="dropdown-item" href="/users/logout">Log out</a>
</div>
</li>
</ul>
</form>
</div>
</nav>
it is showing in mobile view as:
i'm uising this file as <% include ./partials/navbar %>
I think you should take a look at Media Queries, as it'll help you style an element of a page depending on the screen size.
Take a look at the example below.
I have added some queries or each screen size, and I'm changing the background color of an element depending on what the visitor is using.
/* background is blue on default */
.cool { background-color:blue; }
/* if visitor is visiting from a tablet (640px), make background-color orange*/
#media (min-width: 640px) {
.cool { background-color:orange; }
}
/* if visitor is on their laptop, make the background yellow */
#media (min-width: 1024px) {
.cool { background-color:yellow; }
}
/* Desktops */
#media (min-width: 1280px) {
.cool { background-color:red; }
}
I'm using min-width instead of max-width, because as soon as the screen size reaches the minimum width of X, the new CSS rule written inside that query, will take effect.
<div class="cool">
you are cool!
</div>
Links:
Demo on JSfiddle
Read about #media on W3schools
I have a few dropdowns in a list. Currently, when I hover over the dropdowns they open just fine. However, when tabbing through the website when I tab through each list item the dropdown opens. I would like to only open the dropdown when hitting enter then continue to tab through the menu afterwards while keeping the hover functionality the same.
<div class="container">
<ul>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
</ul>
</div>
CSS
.dropdown:hover > .dropdown-menu {
display: block;
}
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!
Can anybody suggest what I am missing in below html to add submenu to bootstrap dropdown?
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li class="dropdown-submenu">
e
<ul class="dropdown-menu">
<li><a ui-sref="e1">e1 (sub of e)</a></li>
</ul>
</li>
</ul>
</div>
EDIT 1
Added plunker
Because uibDropDown directive restricted to attribute.
You should write
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">