"MenuBootstrap 4/3/X"
Bootstrap 4.1.1 Snippet by uaKalwin

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- CDN JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Jasny Bootstrap and JS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/js/jasny-bootstrap.min.js"></script>
<!-- Bootstrap select JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/i18n/defaults-ua_UA.js"></script>
<!-- FontAwesome and JS -->
<script type="text/javascript" src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Bootstrap select CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<hgroup class="panel-nav container-fluid" style="background: rgba(255,35,51,1);z-index:2;">
<div class="row">
<div class="menu col-3 p-0">
<span class="btn btn-secondary rounded-0 w-100 h-100" role="button">
<i class="fas fa-bars"></i> Category
</span>
<menu class="position-absolute bg-light w-100 border-left border-right" style="z-index:3;">
<div>
<a href="" class="p-1 d-block">Category №1</a>
<nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
<div class="position-relative w-100 img-thumbnail text-center" style="background:url(https://my-asia.net/image/catalog/NP-truck.jpg) center;height:65px;overflow:hidden;background-size:cover;">
<div class="position-absolute w-100 h-100" style="background:url(https://my-asia.net/image/catalog/NP-truck.jpg) center;filter:blur(5px);background-size:cover;"></div>
<h4 class="position-absolute w-100 pt-3">
category 1
</h4>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
hgroup { width: 100%; }
hgroup.fixed { position: fixed; top: 0; left: 0; width: 100%; }
.panel-nav { background: rgb(255,35,51); }
.panel-nav .btn { background: rgb(234, 33, 48) !important; border: 0; }
.panel-nav hgroup.btn { background: rgb(234, 33, 48) !important; border: 0; cursor: pointer; }
.panel-nav .btn:hover { background: rgb(222, 34, 47) !important; }
.panel-nav div div form .btn { background: rgb(255, 255, 255) !important; }
.panel-nav div div form .btn:hover { background: rgb(224, 224, 224) !important; }
.menu menu {display:none; margin:0; padding:0; }
.menu menu::after { content: ''; position: absolute; left: 45%; top: -20px; border: 10px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 10px; border-top: 10px solid #f8f9fa; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.menu:hover menu { display:block; }
.menu menu nav { display:none;left: calc(100% - (-1px));top:0;min-width: calc(768px - (-30.74%)); }
.menu menu div:hover nav { display:block; }
.menu menu div a { padding: .5em .8em !important; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(222,226,230,1); font-weight: 600; color: rgba(0,0,0,1); font-size: .75em; }
.menu menu div nav a { padding: .5em .8em !important; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(222,226,230,1); font-weight: 600; color: rgba(0,0,0,1); display: block; text-align: center; }
.category-list-index nav { margin: auto; padding: 0; list-style-type: none; }
.category-list-index nav li { padding: 1em 0 1.3em 0; height: 8em; text-align: center; font-size: 1em; color: rgb(255,255,255); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; overflow-y: hidden; background-size: 22%; background-position: center 50px; background-repeat: no-repeat; text-align: center; -webkit-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); -moz-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); }
.category-list-index nav li:nth-child(1) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2);}
.category-list-index nav li:nth-child(2) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2);}
.category-list-index nav li:nth-child(3) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(4) { border-bottom: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(5) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(6) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(7) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(8) { border-bottom: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(9) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(10) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(11) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(12) { border-bottom: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(13) { border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(14) { border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(15) { border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(16) { }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var elementPosition = $('hgroup').offset();
var elementheight = $("hgroup").height();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('.panel-nav').addClass("fixed");
$("body").css({
"paddingTop": elementheight
})
} else {
$('.panel-nav').removeClass("fixed");
$("body").css({
"paddingTop": "0"
})
}
});
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
$(function () {
$('[data-toggle="popover"]').popover()
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: