Bootstrap menu on hover using js

Date: Posted by: Karthick In: Bootstrap

//JS
//On hover isShowing class is added for parent link focusing
 $(document).ready(function () {
        $('.dropdown').bind('mouseover show.bs.dropdown',function () {
            if($(window).width() > 768){
                $(this).addClass('show');
                $(this).find('a').first().addClass('isShowing');
                $(this).find('a').first().attr('aria-expanded',true);
                $(this).find('a').first().next().addClass('show');
            }
        }).bind('mouseout hide.bs.dropdown',function () {
            if($(window).width() > 768) {
                $(this).removeClass('show');
                $(this).find('a').first().removeClass('isShowing');
                $(this).find('a').first().attr('aria-expanded', false);
                $(this).find('a').first().next().removeClass('show');
            }
        });
    });
/* isShowing CSS */
 .dropdown .isShowing{
        color: #FFFFFF;/* YOUR COLOR FOR isShowing Link */
 }

558 Views

Top