Menu text is still visible on mouseover while sidebar is hidden - html

Question

I'm working on making a sidebar on My main page something like google ventures (https://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product). but the problem I'm getting is when I click to any menu item in the sidebar , the side bar gets collapse but the text for menu item is still there. I want to keep the sidebar open till the mouse cursor is in the sidebar area (even when user clicks on any menu it should remain opened/expended) but it gets collapse on cliking on any item while the text for the menu item remain in the air. I don't know how to fix it as Im not much hands-on with css and designing.
here is my jquery code for adding classes for collapse/expand the side bar
$('[data-toggle="offcanvas"]').mouseenter(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse');
$("body").addClass('sidebar-open')
}
});
$('[data-toggle="offcanvas"]').mouseleave(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-open')) {
$("body").removeClass('sidebar-open');
$("body").addClass('sidebar-collapse')
};
});
and here are css classes (with media queries) for this
.main-sidebar,
.left-side {
position: absolute;
top: 0px;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 0;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}
#media (max-width: 767px) {
.main-sidebar,
.left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (min-width: 768px) {
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (max-width: 767px) {
.sidebar-open .main-sidebar,
.sidebar-open .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.sidebar {
padding-bottom: 10px;
}
and here is html code where my sidebar resides
<aside class="main-sidebar" data-toggle="offcanvas">
<section class="sidebar">
<ul class="sidebar-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</section>
<aside>
I tried to implement it on mouseclick event by keeping adding the sidebar-open class but this didn't work. Any help would be highly appreciated. Thanks

Answer 1

You can put the text in an element like, say p's. Then you can you try hiding the them when mouse leaves and show them when mouse enters. You can add the lines similar to the below ones in your jquery.
// on mouse leave
$('ul.sidebar-menu li>p').hide();
// on mouse enter
$('ul.sidebar-menu li>p').show();
Edit ---
Alternatively you can try the below CSS for aside.main-sidebar,
white-space: nowrap;
overflow: hidden;