Add mouseleave function to multiple accordions in a div?

I have a menu which is made up of accordions. The reason is that I wanted a horizontal one so I added the same div 4 times, for the 4 different accordions and aligned them horizontally.

Currently, it is opened on mouseclick. When I change it to hover it opens; however when I move down my cursor to the sub-menu it retracts the sub-menu. So it's not possible to click the sub-menu's.

Any help would be appreciated. I have tried adding a line in jquery which cancels when moved away from the div but it did not work.

CODE

$(document).ready(function(){

$('#cssmenu > ul > li > a').click(function() {

var checkElement = $(this).next();

$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');

if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}

if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}

if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
$("#cssmenu").mouseleave(close_cssmenu); //Line which I tried but did not work
});
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
position: relative;
}


#cssmenu a {
line-height: 1.3;
}

.glyphicon {
font-size: 14px;
}

#cssmenu {
float: right;
display:inline-block;
width: auto; height: auto;
border-bottom: 4px solid #656659;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

 .img2 {

padding: 6px;

}


#cssmenu > ul > li {
background: #e94f31;
background: -moz-linear-gradient(#e94f31 0%, #d13516 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516));
background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%);
background: linear-gradient(#e94f31 0%, #d13516 100%);
}
#cssmenu > ul > li:hover {
background: #e84323;
background: -moz-linear-gradient(#e84323 0%, #c33115 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115));
background: -webkit-linear-gradient(#e84323 0%, #c33115 100%);
background: linear-gradient(#e84323 0%, #c33115 100%);
}
#cssmenu > ul > li > a {
font-size: .9em;
display: block;
background: url(menu_images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #ba2f14;
border-top: none;
text-shadow: 0 -1px 1px #751d0c;
}
#cssmenu > ul > li > a > span {
display:block;
padding: 12px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.has-sub > a span {
background: url(menu_images/icon_plus.png) 96% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(menu_images/icon_minus.png) 96% center no-repeat;
}

/* Sub menu */
#cssmenu ul ul {
display: none;
background: #fff;
border-right: 1px solid #a2a194;
border-left: 1px solid #a2a194;
}
#cssmenu ul ul li {
padding: 0;
border-bottom: 1px solid #d4d4d4;
border-top: none;
background: #f7f7f7;
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#cssmenu ul ul li:last-child {
border-bottom: none;
}
#cssmenu ul ul a {
padding: 10px 10px 10px 25px;
display: block;
color: #676767;
font-size: .8em;
font-weight: normal;
}
#cssmenu ul ul a:before {
content: '\00BB';
position: absolute;
left: 10px;
color: #e94f31;
}
#cssmenu ul ul a:hover {
color: #e94f31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/house-24.png" alt="home" />Welcome back, John Smith</a>
<ul>
<li style="list-style:none;"><a href="#">Home</a></li>
<li style="list-style:none;"><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;">

<a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/paper-24.png" alt="order-history" />History</a>
<ul>
<li style="list-style:none;"><a href="#">Order History</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/businessman-24.png" alt="profile" />Profile</a>
<ul>
<li style="list-style:none;"><a href="#">Edit Profile</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/purchase-order-24.png" alt="home" />Load Request</a>

<ul>
<li style="list-style:none;"><a href="#">Airport</a></li>
<li style="list-style:none;"><a href="#">City</a></li>

<li style="list-style:none;"><a href="#">Seaport</a></li>
</ul>
</li>
</ul>
</div>

notes I've already included the jquery library on my index.php. I'll remove the php. It's only there to get the username of the currently logged in user, which is working so far.

Answers 1

  • Take a look at this. You want to bind your event to an element that would include your entire submenu on mouseenter so that it never triggers the leave while inside the submenu. That's why I'm using the <ul> here and not the <a>. When you leave the <a> the menu closes but the <ul> contains the submenu and it doesn't. Hope this helps.

    $(document).ready(function(){
    
    $('#cssmenu > ul').mouseenter(function() {
    
        var checkElement = $(this).find('a').next();
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');
    
        $(this).closest('li').removeClass('active');
        checkElement.stop().slideDown('normal');
     
    }).mouseleave(function(){
       $(this).find('a').next().stop().slideUp('normal');
    });
    
    });
    @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
    
    /* Base Styles */
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    position: relative;
    }
    
    
    #cssmenu a {
    line-height: 1.3;
    }
    
    .glyphicon {
    font-size: 14px;
    }
    
    #cssmenu {
    float: right;
    display:inline-block;
    width: auto; height: auto;
    border-bottom: 4px solid #656659;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }
    
     .img2 {
    
    padding: 6px;
    
    }
    
    
    #cssmenu > ul > li {
    background: #e94f31;
    background: -moz-linear-gradient(#e94f31 0%, #d13516 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516));
    background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%);
    background: linear-gradient(#e94f31 0%, #d13516 100%);
    }
    #cssmenu > ul > li:hover {
    background: #e84323;
    background: -moz-linear-gradient(#e84323 0%, #c33115 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115));
    background: -webkit-linear-gradient(#e84323 0%, #c33115 100%);
    background: linear-gradient(#e84323 0%, #c33115 100%);
    }
    #cssmenu > ul > li > a {
    font-size: .9em;
    display: block;
    background: url(menu_images/pattern.png) top left repeat;
    color: #ffffff;
    border: 1px solid #ba2f14;
    border-top: none;
    text-shadow: 0 -1px 1px #751d0c;
    }
    #cssmenu > ul > li > a > span {
    display:block;
    padding: 12px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    #cssmenu > ul > li > a:hover {
    text-decoration: none;
    }
    #cssmenu > ul > li.active {
    border-bottom: none;
    }
    #cssmenu > ul > li.has-sub > a span {
    background: url(menu_images/icon_plus.png) 96% center no-repeat;
    }
    #cssmenu > ul > li.has-sub.active > a span {
    background: url(menu_images/icon_minus.png) 96% center no-repeat;
    }
    
    /* Sub menu */
    #cssmenu ul ul {
    display: none;
    background: #fff;
    border-right: 1px solid #a2a194;
    border-left: 1px solid #a2a194;
    }
    #cssmenu ul ul li {
    padding: 0;
    border-bottom: 1px solid #d4d4d4;
    border-top: none;
    background: #f7f7f7;
    background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
    background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
    background: linear-gradient(#f7f7f7 0%, #ececec 100%);
    }
    #cssmenu ul ul li:last-child {
    border-bottom: none;
    }
    #cssmenu ul ul a {
    padding: 10px 10px 10px 25px;
    display: block;
    color: #676767;
    font-size: .8em;
    font-weight: normal;
    }
    #cssmenu ul ul a:before {
    content: '\00BB';
    position: absolute;
    left: 10px;
    color: #e94f31;
    }
    #cssmenu ul ul a:hover {
    color: #e94f31;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div id="cssmenu">
    <ul>
    <li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
    
    <img class="img2" src="http://www.arabiantcl.com/images/icons/house-24.png" alt="home" />Welcome back, John Smith</a>
    <ul>
    <li style="list-style:none;"><a href="#">Home</a></li>
    <li style="list-style:none;"><a href="#">Logout</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="cssmenu">
    <ul>
    <li style="list-style:none;">
    
    <a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
    
    <img class="img2" src="http://www.arabiantcl.com/images/icons/paper-24.png" alt="order-history" />History</a>
    <ul>
    <li style="list-style:none;"><a href="#">Order History</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="cssmenu">
    <ul>
    <li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
    
    <img class="img2" src="http://www.arabiantcl.com/images/icons/businessman-24.png" alt="profile" />Profile</a>
    <ul>
    <li style="list-style:none;"><a href="#">Edit Profile</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="cssmenu">
    <ul>
    <li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
    
    <img class="img2" src="http://www.arabiantcl.com/images/icons/purchase-order-24.png" alt="home" />Load Request</a>
    
    <ul>
    <li style="list-style:none;"><a href="#">Airport</a></li>
    <li style="list-style:none;"><a href="#">City</a></li>
    
    <li style="list-style:none;"><a href="#">Seaport</a></li>
    </ul>
    </li>
    </ul>
    </div>


Related Articles