Как сделать адаптивное меню с кнопкой «Ещё»?

Question

[Михаил]

Если пункты меню не помещаются на экран, то показываем кнопку "еще".
Чтобы меню работало адекватно при разной ширине каждого пункта меню
Чтобы его можно было оставить и для мобильной версии заменив "еще" на гамбургер
Чтобы не мыло лишних тегов с классов (максимальный минимум)
Чтобы оно работало в конце концов!

Comments

[Сергей delphinpro]

352media.github.io/flexMenu

[Михаил]

Сергей delphinpro, Благодарю! но в данном решении кода существенно больше и к сожалению без видимых преимуществ.

Answer 1

[Михаил]

#more-nav {
     display: block;
     position: relative;
     z-index: 500;
     list-style: none;
     margin: 0;
     padding: 0;
     border-bottom: #EEE solid 1px;
 }
#more-nav:after {
    content: '';
    display: table;
    clear: both;
}
#more-nav > li {
    display: block;
    position: relative;
    float: left;
}
#more-nav > li a {
    display: block;
    white-space: nowrap;
    padding: 10px 25px;
    color: #333;
    font-weight: 700;
    text-decoration: none;
}
#more-nav > li:hover > a,
#more-nav > li a:hover {
    background: #ffffff;
}
#more-nav > li > ul {
    display: block;
    position: absolute;
    background: #FFF;
    top: 100%;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border: #EEE solid 1px;
    border-top: none;
    margin-top: -1px;
    opacity: 0;
    visibility: hidden;
}
#more-nav > li:hover > ul {
    opacity: 1;
    visibility: visible;
}

<ul id="more-nav">
                <li>
                    <a href="#">Телевизоры</a>
                </li>
                <li>
                    <a href="#">Аудио-видео</a>
                </li>
                <li>
                    <a href="#">Компьютеры</a>
                </li>
                <li>
                    <a href="#">Смартфоны</a>
                </li>
                <li>
                    <a href="#">Планшеты</a>
                </li>
                <li>
                    <a href="#">Фото и видео</a>
                </li>
                <li>
                    <a href="#">Техника для кухни</a>
                </li>
                <li>
                    <a href="#">Бытовая техника</a>
                </li>
                <li>
                    <a href="#">Красота и здоровье</a>
                </li>
                <li>
                    <a href="#">Для автомобилей</a>
                </li>
                <li>
                    <a href="#">Игры</a>
                </li>
                <li>
                    <a href="#">Аксессуары</a>
                </li>
            </ul>

<script>

                $.fn.moreNav = function() {
                    var nav = $(this);

                    function setMoreNav() {

                        var nav_width = nav.outerWidth(),
                            nav_elem_width = 0,
                            more_link = $('<li class="more"><a href="#">Еще</a><ul></ul></li>'),
                            class_nav_item = 'nav-item',
                            class_nav_item_more = 'nav-item-more';

                        if( nav.find('.more').length > 0 ) {
                            nav.append(nav.find('.more ul li'));
                            nav.find('.more').remove();
                        }

                        $.each(nav.find('li'), function(i, elem){
                            var elem_width = $(elem).outerWidth();

                            nav_elem_width += elem_width;
                        });

                        if( nav_elem_width > nav_width ) {
                            nav.append(more_link);
                            nav_width -= more_link.outerWidth();

                            nav_elem_width = 0;

                            $.each(nav.find('li'), function(i, elem){
                                var elem_width = $(elem).outerWidth();

                                nav_elem_width += elem_width;

                                if( !$(elem).is('.more') ) {
                                    if( nav_elem_width < nav_width ) {
                                        $(elem).addClass(class_nav_item).removeClass(class_nav_item_more);
                                    } else {
                                        $(elem).addClass(class_nav_item_more).removeClass(class_nav_item);
                                    }
                                }
                            });
                        }

                        more_link.find('ul').append($('.' + class_nav_item_more));

                    }
                    setMoreNav();
                    $(window).resize(function(){
                        setMoreNav();
                    });
                };

                $('#more-nav').moreNav();

            </script>

Comments

[Михаил]

Источник решения задачи с примером:

https://keengo.ru/blog/javascript/dlinnoe-adaptivn...