82 |
89 |
83 |
88 |
84 |
87 | Bootstrap 4 Navbar
85 |Display Submenu on Hover
86 |
4 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #f2eee3;
3 | }
4 |
5 | header {
6 | min-height: 100px;
7 | }
8 |
9 | main {
10 | min-height: 100vh;
11 | }
12 |
13 | .container-fluid {
14 | margin: 0;
15 | padding: 0;
16 | }
17 | .container-fluid .row {
18 | margin: 0;
19 | padding: 0;
20 | }
21 |
22 |
23 | .dropdown:hover > .dropdown-menu {
24 | display: block;
25 | }
26 |
27 | .megamenu {
28 | position: static;
29 | }
30 | .megamenu .dropdown-menu {
31 | border: none;
32 | width: 100%;
33 | }
34 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | toggleDropdown (e) => {
2 | const _d = $(e.target).closest('.dropdown'),
3 | _m = $('.dropdown-menu', _d);
4 | setTimeout(function(){
5 | const shouldOpen = e.type !== 'click' && _d.is(':hover');
6 | _m.toggleClass('show', shouldOpen);
7 | _d.toggleClass('show', shouldOpen);
8 | $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
9 | }, e.type === 'mouseleave' ? 300 : 0);
10 | }
11 |
12 | $('body')
13 | .on('mouseenter mouseleave','.dropdown',toggleDropdown)
14 | .on('click', '.dropdown-menu a', toggleDropdown);
15 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Display Submenu on Hover
86 |