29.03.2019     1601

Идею подсмотрел на сайте Twitch. Меню автоматически подстраивается под любой размер экрана. Пункты меню, которые не влезают в экран, автоматически перемещаются в отдельный выпадающий блок.

Что у меня получилось:

Ссылка на GitHub: https://github.com/andchir/dots-menu

Демо: http://wdevblog.net.ru/dots-menu/

Для работы меню не требуется jQuery и т.п. Как использовать:

<link href="dots-menu.css" rel="stylesheet">
<script src="dots-menu.js"></script>
<script>
    var dotsMenu = new DotsMenu();
</script>
<div class="dots-menu-container">
    <ul class="dots-menu">
        <li class="nav-item">
            <a href="#1" class="nav-link">
                Top item #1
            </a>
        </li>
        <li class="nav-item active">
            <a href="#2" class="nav-link">
                Top #2 parent active
            </a>
            <ul>
                <li class="nav-item">
                    <a href="#1-1" class="nav-link">
                        Item #1
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#1-2" class="nav-link">
                        Item #2
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>