Bootstrap 2 mobile navigation hack

Drupal Bootstrap 2 Navigation Hack

Drupal.behaviors.themeMobileNavigation = {
    attach: function(context, settings) {
        // Menu
        var header = $('#header', context);
        header.once('menu', function(){
            var menu = $('#menu', header);
            var menuToggle = $('.mobile-menu a.toggle', header);
            var ul = $('ul.menu.nav, .menu-block-wrapper > ul.menu', menu);
            if (menu.length && menuToggle.length && ul.length) {
                menuToggle.click(function(){
                    menu.slideToggle();
                });
                // Initially hide the indicators, will be shown visible after logic has been processed.
                var indicators = $('.menu-indicator', header).css({
                    display: 'block',
                    left: $('> li', ul).first().offset().left,
                    opacity: 0,
                    width: $('> li', ul).first().outerWidth(true)
                });
                // Set initial active item.
                var active = $('> li.active, > li.active-trail', ul).first();
                // mouseenter function.
                var itemEnter = function(item) {
                    if (indicators.is(':visible') && item.is(':not(:visible)')) {
                        indicators.animate({
                            opacity: 0
                        });
                        return;
                    }
                    var left = item.offset().left;
                    var width = item.outerWidth(true);
                    // If the indicators are initially hidden, just set the width and left position.
                    if (indicators.is(':not(:visible)')) {
                        indicators.stop(true, true).css({
                            left: left,
                            width: width,
                            avoidTransforms: true
                        });
                    } else {
                        indicators.stop().animate({
                            left: left,
                            opacity: 1,
                            width: width,
                            avoidTransforms: true
                        });
                    }
                };
                // mouseleave function.
                var itemLeave = function() {
                    if (active.length) {
                        itemEnter(active);
                    }
                    else {
                        indicators.stop(true, true).animate({
                            opacity: 0
                        });
                    }
                };
                // Bind the mouseenter events on the items.
                $('li', ul).each(function(index, item){
                    item = $(item);
                    item.bind('mouseenter', function(){
                        itemEnter(item);
                    });
                });
                // Bind the mouseleave even on the item container.
                ul.bind('mouseleave', function(){
                    itemLeave();
                });
                // Set initial active state.
                $(document).on('drupalViewportOffsetChange', null, function(){
                    var element = active ? active : $('li', ul).first();
                    if (element.length) {
                        itemEnter(element);
                    }
                });
                $(window).resize(function(){
                    var element = active ? active : $('li', ul).first();
                    if (element.length) {
                        itemEnter(element);
                    }
                });
                var element = active ? active : $('li', ul).first();
                if (element.length) {
                    itemEnter(element);
                }
            }
        });
    }
};