Menu multilevel no Bootstrap 4 não funciona corretamente
Olá Colegas não achei o tópio para boostrap 4 por isso coloquei aqui, reparei que menu multilevel no modo small ou seja smart phone não funciona quando clica do no submenu por ele não funciona. Lembrando que é Bootstrape 4
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- ( Bootstrap css )-->
<link href="js/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- ( Bootstrap css )-->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- (css do MenuMultilevel) -->
<link rel="stylesheet" href="css/bootstrap-dropdownhover.css">
</head>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
/*margin-top: -6px;*/
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-width: 0;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.bg-faded {
background: #ccc;
}
</style>
<body>
<section class="test">
<header class="topo">
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" role="navigation">
<!--
data-target : faz a ligação do menu com o botão de expandir.
data-toggle="collapse" : função de comprimir o menu responsivo.
Classe : navbar-toggler responsável por deixar o menu responsivo.
Classe: navbar-toggler-icon icones do menu responsivo
-->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Empresa ou logo</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-md-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- (Submenu) -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Features
</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="supportedContentDropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">tese</a>
<ul class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<li class="dropdown-item" href="#"><a class="nav-link" href="#">Something else here</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Something else here</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Something else here</a></li>
<li class="dropdown-item dropdown-submenu" href="#">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="false"
aria-expanded="true">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</header>
</section>
<!-- ( Jquery )-->
<script src="js/jquery.js"></script>
<!-- (Tether Bootstrap )-->
<script src="js/bootstrap/js/tether.min.js"></script>
<!-- ( Bootstrap )-->
<script src="js/bootstrap/js/bootstrap.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-submenu a').on("click", function (e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>Discussão (0)
Carregando comentários...