O
Use the method .hover() of jQuery alternating a class that determines when the menu is open or closed. When adding the class with .hover() at the event mouseenter the menu will open, at the event mouseleave, the class will be removed and the menu will close. Another event click will change the value of a control variable (estado) to prevent the menu from closing in a small time interval determined by setTimeout.The problem is that when you click on a menu item, the aside can lose the hover (event calling mouseleave), which is the condition for it to be open. Controlling by jQuery you avoid, by mouseleave, that the class that keeps the menu open is removed.Change the first two styles of CSS to:.aside .sidebar.ativo {
left: 0;
}
.aside .sidebar {
display: block;
left: -255px;
transition: left .6s ease;
}
And add jQuery code in the script:var estado;
$(".aside").hover(
function(){
$(".sidebar", this).addClass("ativo");
},
function(){
if(!estado){
$(".sidebar", this).removeClass("ativo");
}
}
).on("click", function(){
estado = true;
setTimeout(function(){
estado = false;
}, 50);
});
Operation (full screen operation):var jDocument = $(document);
var navToggle = $('.nav-toggle');
var sidebarToggle = $('.sidebar-toggle');
var sidebar = $('.sidebar');
var collapseSelector = '[data-toggle="collapse-next"]',
colllapsibles = $('.sidebar .collapse').collapse({ toggle: false }),
toggledClass = 'aside-collapsed',
$body = $('body'),
phone_mq = 768;
function notify(a, b, c) {
console.log(b)
}
var fixedSidebar = $('.fixed-sidebar');
var fixedMenu = 0;
fixedSidebar.off("click").on('click', function (e) {
e.preventDefault();
var date = new Date();
date.setTime(date.getTime() + (1000 * 24 * 60 * 60 * 1000));
if (fixedMenu == 0) {
fixedMenu = 1;
sidebar.addClass('fixo');
notify("", "Menu fixo!", "success");
} else {
fixedMenu = 0;
sidebar.removeClass('fixo');
notify("", "Menu dinâmico!", "success");
}
SetCookie("fixedMenu", fixedMenu, date);
});
sidebarToggle.off("click").on("click", function () {
sidebar.toggleClass('toggled');
});
jDocument.on('click.sidebar', collapseSelector, function (e) {
var $that = $(this);
setTimeout(function () {
var $target = $that.siblings('ul');
var $targetParent = $target.parent().parent();
if ($targetParent.has("ul").hasClass("show") == true) {
colllapsibles.not($targetParent).collapse('hide');
} else {
colllapsibles.collapse('hide');
}
$target.collapse('show');
}, 1);
});
var estado;
$(".aside").hover(
function(){
$(".sidebar", this).addClass("ativo");
},
function(){
if(!estado){
$(".sidebar", this).removeClass("ativo");
}
}
).on("click", function(){
estado = true;
setTimeout(function(){
estado = false;
}, 50);
});.aside .sidebar.ativo {
left: 0;
}
.aside .sidebar {
display: block;
left: -255px;
transition: left .6s ease;
}
.aside { position: absolute; margin-top: 0px; top: 0; left: 0; bottom: 0; z-index: 1031; }
.aside .nav-primary { width: 30px; position: fixed; background-color: #39a7df; /#fafafa;/ color: #ffffff; display: block; height: calc(100% - 29px); border-right: 1px solid #39a7df; z-index: 1; }
.aside .nav-primary>.item-text { color: #ffffff; font-size: 20px; font-weight: 100; display: block; margin: 0px 8px; /@include rotate(-90,3);/ }
.aside .nav-primary .item-text i { font-size: 16px; }
.aside .sidebar { position: fixed; top: 0; background-color: #39a7df; height: calc(100% - 29px); overflow-y: auto; border-right: 1px solid #39a7df; -webkit-overflow-scrolling: touch; width: 250px; z-index: 2; }
.sidebar>.nav { position: relative; margin-top: 5px; }
.sidebar>.nav>.nav-heading:first-child { padding-top: 0px; }
.sidebar .nav-heading:hover { background-color: #39a7df !important; color: #ffffff !important; }
.sidebar .nav-labels { list-style-type: none; padding: 0; margin: 0; }
.sidebar .nav-labels>.nav-labels-item { padding: 5px 25px; font-size: 13px; }
.sidebar .nav-labels>.nav-labels-item>a { color: #ffffff; }
.sidebar .nav-labels>.nav-labels-item .circle { margin-right: 20px; margin-left: 0; }
.sidebar .nav>li { border-left: 2px solid transparent; display: block; width: 100%; }
.sidebar .nav>li>a, .sidebar .nav>li>.nav-item { padding: 12px 5px 12px 10px; color: #ffffff; letter-spacing: .025em; /font-weight: 600;/ -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; transition: background-color 0.2s ease; display: block; text-decoration: none; }
.sidebar .nav>li>a:focus, .sidebar .nav>li>.nav-item:focus { color: #fff; background-color: #45AC6C; }
.sidebar .nav>li>a>em, .sidebar .nav>li>.nav-item>em { width: 1.5em; color: #ffffff; }
.sidebar .nav>li.active /.sidebar .nav > li.active > a,/ /.sidebar .nav > li.active > a > .item-text/ /.sidebar .nav > li.active .nav,/ { background-color: #45AC6C; color: #fff; }
.sidebar .nav>li:hover, .sidebar .nav>li:hover>a, .sidebar .nav>li:hover>a>.item-text .sidebar .nav>li:hover .nav { background-color: #C1332F; color: #fff; }
.sidebar .nav>li.active>a>em, .sidebar .nav>li:hover>a>em { color: #ffffff; }
.sidebar .nav>li.active { border-left-color: #39a7df; }
.sidebar .nav .nav { padding-left: 25px; background-color: #39a7df; }
.sidebar .nav .nav>li { border-left: 0; }
.sidebar .nav .nav>li>a, .sidebar .nav .nav>li>.nav-item { display: block; position: relative; padding: 10px 2px 10px 6px; background-color: transparent !important; font-weight: normal; }
.sidebar .nav .nav>li>a:focus, .sidebar .nav .nav>li>.nav-item:focus, .sidebar .nav .nav>li>a:hover, .sidebar .nav .nav>li>.nav-item:hover { color: #fff; }
.sidebar .nav .nav>li.active>a, .sidebar .nav .nav>li.active>.nav-item { color: #fff; }
.sidebar .nav .nav>li.active>a:after, .sidebar .nav .nav>li.active>.nav-item:after { border-color: #1c75bf; background-color: #1c75bf; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<aside class="aside">
<div class="nav-primary nav-toggle d-none d-md-inline"> <span class="item-text"><i class="fa fa-bars"></i> </span> </div>
<nav id="" class="sidebar">
<ul id="menu-itens" class="nav">
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-address-card"></em><span class="item-text">item</span> </a>
<ul class="nav collapse" aria-expanded="false" style="">
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-boxes"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fas fa-user-tie"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-university"></em><span class="item-text">item</span> </a> </li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a>
<ul class="nav collapse" aria-expanded="false" style="">
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
</ul>
</li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-object-ungroup"></em><span class="item-text">item</span> </a> </li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-handshake"></em><span class="item-text">item</span> </a>
<ul class="nav collapse show" aria-expanded="false" style="">
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a> </li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck"></em><span class="item-text">item</span> </a>
<ul class="nav collapse" aria-expanded="false">
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
</ul>
</li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck-loading"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-shopping-cart"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-wrench"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a> </li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
<em class="far fa-shopping-basket"></em><span
</li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-users"></em><span class="item-text">item</span> </a> </li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
<em class="fal fa-dot-circle"></em><span
</li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-box-full"></em><span class="item-text">item</span> </a> </li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
<em class="fal fa-dot-circle"></em><span
</li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-cubes"></em><span class="item-text">item</span> </a>
<ul class="nav collapse" aria-expanded="false" style="">
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a> </li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a>
<ul class="nav collapse" aria-expanded="false" style="">
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-money-check-alt"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a> </li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-university"></em><span class="item-text">item</span> </a>
<ul class="nav collapse" aria-expanded="false" style="">
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a> </li>
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a> </li>
</ul>
</li>
<li>
<a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a>
<ul class="nav collapse" aria-expanded="false" style="">
<li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a> </li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
<li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
</ul>
</li>
</ul>
</nav>
</aside>
