Как обрезать слишком длинное меню?

Question

[nickostyle]

Имеется горизонтальное меню

<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, вроде так.

Answer 1

[Алексей Зуев]

Посмотрите в сторону flexmenu

Comments

[nickostyle]

спасибо!

[Андрей Федоров]

Беда таких решений, что нельзя скрывать произвольный элемент, а не самый правый. Обычно самый правый элемент "контакты" и если они будут скрыты под more... Эффект понятен я думаю...