├── .gitignore
├── LICENSE
├── README.md
├── bootstrap5-dropdown-ml-hack-hover.css
├── bootstrap5-dropdown-ml-hack.js
├── demo.html
├── gulpfile.js
├── package-lock.json
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Dallas Lu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bootstrap 5 Multiple Level Dropdown.
2 |
3 | For Bootstrap 4, please visit [Bootstrap 4 Multiple Level Dropdown](https://github.com/dallaslu/bootstrap-4-multi-level-dropdown)
4 |
5 | Using official HTML without adding extra CSS styles and classes, it's just like native support.
6 |
7 | All things listed in https://v5.getbootstrap.com/docs/5.0/components/dropdowns/ are not effected. You can use css classes and js methods/events/options freely.
8 |
9 | Dropdown of bootstrap can be easily changed to infinite level. It's a pity that they didn't do it.
10 |
11 | ## Usage
12 |
13 | ### Base
14 | Just add js after bootstrap js files:
15 |
16 | ```html
17 |
18 | ```
19 | #### Base Example
20 | ```html
21 | ...
22 |
23 |
26 |
51 |
52 | ...
53 |
54 | ```
55 | ### Hover
56 | If your want a hover tigger, just add class and some custom styles to reduce spacing to avoid triggering mouseleave.
57 | ```css
58 | .dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend { margin-left:-1px !important }
59 | ```
60 | or:
61 | ```html
62 |
67 |
68 |
69 |
70 |
71 |
72 | ```
73 | #### Hover Example
74 | ```html
75 |
78 |
79 |
80 |
81 |
82 |
83 | ...
84 |
85 | ```
86 |
87 | ## Demo
88 |
89 | ### demo.html
90 | ```bash
91 | git clone git@github.com:dallaslu/bootstrap-5-multi-level-dropdown.git
92 | cd bootstrap-5-multi-level-dropdown
93 | npm install
94 | gulp
95 | ```
96 |
97 | ### jsfiddle
98 |
99 | Here is a perfect demo: https://jsfiddle.net/dallaslu/mvk4uhzL/ (works well with Bootstrap v5.0.2)
100 |
--------------------------------------------------------------------------------
/bootstrap5-dropdown-ml-hack-hover.css:
--------------------------------------------------------------------------------
1 | .dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend { margin-left:-1px !important }
2 |
--------------------------------------------------------------------------------
/bootstrap5-dropdown-ml-hack.js:
--------------------------------------------------------------------------------
1 | (function($bs) {
2 | const CLASS_NAME = 'has-child-dropdown-show';
3 | $bs.Dropdown.prototype.toggle = function(_orginal) {
4 | return function() {
5 | document.querySelectorAll('.' + CLASS_NAME).forEach(function(e) {
6 | e.classList.remove(CLASS_NAME);
7 | });
8 | let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
9 | for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {
10 | dd.classList.add(CLASS_NAME);
11 | }
12 | return _orginal.call(this);
13 | }
14 | }($bs.Dropdown.prototype.toggle);
15 |
16 | document.querySelectorAll('.dropdown').forEach(function(dd) {
17 | dd.addEventListener('hide.bs.dropdown', function(e) {
18 | if (this.classList.contains(CLASS_NAME)) {
19 | this.classList.remove(CLASS_NAME);
20 | e.preventDefault();
21 | }
22 | e.stopPropagation(); // do not need pop in multi level mode
23 | });
24 | });
25 |
26 | // for hover
27 | document.querySelectorAll('.dropdown-hover, .dropdown-hover-all .dropdown').forEach(function(dd) {
28 | dd.addEventListener('mouseenter', function(e) {
29 | let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
30 | if (!toggle.classList.contains('show')) {
31 | $bs.Dropdown.getOrCreateInstance(toggle).toggle();
32 | dd.classList.add(CLASS_NAME);
33 | $bs.Dropdown.clearMenus(e);
34 | }
35 | });
36 | dd.addEventListener('mouseleave', function(e) {
37 | let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
38 | if (toggle.classList.contains('show')) {
39 | $bs.Dropdown.getOrCreateInstance(toggle).toggle();
40 | }
41 | });
42 | });
43 | })(bootstrap);
44 |
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Infinite Multiple Level Dropdown Menu base on Bootstrap
9 |
15 |
59 |
60 |
61 |
62 |
90 |
91 |
92 |
93 |
96 |
117 |
118 |
119 |
120 |
121 |