javascript - レスポンシブ jQuery メニュー、最後の要素を別のメニューに折りたたむ

Question

単一レベルのナビゲーション リストがあります。私がやりたいことは、ウィンドウのサイズ変更時に、最後にドロップダウンを追加して、ウィンドウの幅に収まらない要素を表示することです。

画像表現の下:

var base = this,
                    container = $(base.selector),
                    items = container.find('>li:not(.smallmenu):visible'),
                    count = container.find('>li:not(.smallmenu):visible').length,
                    listWidth = [],
                    added;

            items.each(function() {
                listWidth.push($(this).width());
            });

            function getWidth() {
                var width = 0;
                container.find('>li:not(.smallmenu):visible').each(function() {
                    width += $(this).outerWidth();
                });
                return width + 100;
            }
            function hideLast() {
                var i = container.find('>li:not(.smallmenu):visible').last().index()

                if( $(window).width() < (getWidth()) ) {
                    items.eq(i).hide();

                    if(!added) {
                        $('<li class="smallmenu"><a href="#"><i class="fa fa-plus"></i></a></li>').appendTo(container);
                        added = true;
                    }
                }
            }
            function showLast() {
                var i = container.find('>li:not(.smallmenu):visible').last().index();
                if( (getWidth() + listWidth[i+1]) < $(window).width() ) {
                    container.find('>li:not(.smallmenu)').eq(i+1).show();

                    if((i+2) === count) {
                        container.find('.smallmenu').remove();
                        added = false;
                    }
                }
            }
            $(window).resize(function() {
                showLast();
                hideLast();
            });

ただし、これは期待どおりに機能しておらず、中途半端です。間違った方向に向かっているような気がします。

編集: 更新された jsFiddle は次のとおりです: http://jsfiddle.net/anteksiler/zyv8f/1/ブラウザのサイズを変更して、効果を得てください。