Имеется горизонтальное меню
<header class="header">
<a href="#" class="logo">Hello</a>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
<div class="username">
<a href="#">My Username</a>
</div>
</header>
Задача такова: если меню "не влезает" между логотипом и username - добавлять элементы меню в submenu, брать их с конца меню и брать столько, чтобы меню влезало. Ну и кнопку в конце меню сделать, при нажатии на которую будет открываться submenu
Т.е. необходимая ширина .menu - такая, чтобы в него помещались все элементы меню, в одну строку. Если такая ширина не получается, то...решение описано выше.
У меня получилось что то такое
// Место, оставшееся под меню
var free_space_width = $('header').width() - ( $('.logo').width() + $('.username').width() );
if ( $('.menu').width() > free_space_width ) {
// Нужное мне действие
}
А дальше не могу продолжить. Получается мне menu > li нужно поместить в menu > li > ul, вроде так.
