Идею подсмотрел на сайте 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>