Как сделать горизонтальное меню с кнопкой "ещё"

Неотъемлемый элемент практически для любого сайта и популярное решение для размещения простой навигации - горизонтальное меню, фиксированное или нет - уже по желанию. Но его основным недостатком является ограниченность, то есть в ровный ряд можно красиво расположить лишь малое количество необходимых ссылок, если извернуться со шрифтом, то немного больше.
  Избавить горизонтальное меню от "нагромождений" обычно помогают выпадающие блоки, с заполнением и правкой которых бывает достаточно много мороки. Упростить задачу поможет jQuery скрипт, который автоматически создает выпадающий блок в меню.

  Сразу нужно уточнить несколько моментов о работе скрипта: блок создается в конце горизонтального меню, если ссылок в меню больше чем указано соответствующим значением, позволяя избежать переноса блоков меню на нижний уровень (другую строку). Вместо убранных ссылок автоматически появляется кнопка "Еще" или "More", кому как нравится, при клике по которой будет показано подменю со скрытыми ссылками.
  Кроме создания выпадающего блока, данный скрипт регулирует правильное отображение меню в мобильной версии сайта. Все основные моменты расположения и дизайна описаны в коде CSS, сам скрипт добавляет недостающие HTML-теги обертки основных элементов и переключает, добавляет значения классов для элементов дизайна.

ПРИМЕР

Для просмотра в мобильной версии необходимо изменить размеры окна браузера или переключить на мобильный просмотр через инструменты веб-мастера.

  Структура меню самая обычная - маркированный список, обернутый в соответствующий тег:

<nav id='site_nav'>
 <ul>
  <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>
</nav>

  Скрипт jQuery, который создает блок подменю, оборачивая указанные элементы в соответствующие теги:

(function($){
$(function(){
// это можно сделать и через HTML
 $('<div class="mobi_menu">Меню</div>').prependTo("#site_nav");
// часть для мобильной версии
 function mobileMenu(){
  var mn = $('#site_nav > ul'),
   ww = $(window).width();
  if(ww < 698){
   mn.hide().siblings('.mobi_menu').removeClass('close');
  }else{mn.show();}
  if($('.dropblock:visible') && $('.arrow').has('.close')){
   $('.dropblock').hide().siblings('.arrow').removeClass('close');}
 }
 $(window).on('load resize',mobileMenu);
// основная часть
 $('#site_nav > ul').each(function(){
  var tl = $("li:gt(3)",this); // число 3 указывает сколько ссылок будет показано, 0 считается
  if (tl.length){
   tl.wrapAll("<li class='drop'></li>").wrapAll("<ul class='dropblock'></ul>");
   $("<a href='#' class='arrow'>Еще</a>").prependTo('.drop');
    }
   $(this).show();
 });

 $('a.arrow, .mobi_menu').click(
 function(e){
  $(this).toggleClass('close').next('ul').stop().fadeToggle(10);
  e.preventDefault();
 });
});
})(jQuery);

  Готовый код CSS, который используется в примере, для отображения иконок меню, стрелки открытия подменю и крестика закрытия используется иконочный шрифт FontAwesome:

/*обнуляем если ранее этого не сделано*/
ol, ul {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 list-style: none;
}
/*основная часть*/
#site_nav {
 text-align: center;
 text-transform: uppercase;
 margin: 1em;
}
#site_nav > ul {
 border-top: 1px solid #666;
 border-bottom: 1px solid #666;
 background-color: #7ea5e3;
}
#site_nav li {
 display: inline-block;
 margin: 1em;
}
#site_nav a {
 color: #f8f8f8;
}
#site_nav a:hover {
 color: #333;
}
li.drop {
 position: relative;
}
li.drop > a.arrow:before,
li.drop > a.close:before {
 position: absolute;
 display: inline-block;
 font-size: 14px;
 font-family: FontAwesome; /**/
 height: 18px;
 width: 18px;
 right: -20px;
 top: 0;
}
li.drop > a.arrow:before {
 content: '\f078';
}
li.drop > a.close:before {
 content: '\f00d';
}
ul.dropblock {
 display: none;
 position: absolute;
 right: -100%;
 min-width: 200px;
 z-index: 999;
 background-color: #7ea5e3;
 border: 1px solid #666;
}
ul.dropblock > li {
 width: 100%;
 margin: 1em 0 !important;
}
.mobi_menu,
#site_nav ul {
 display: none;
}
@media screen and (max-width: 700px) {
#site_nav li {
 margin: .4em 0;
 width: 100%;
}
ul.dropblock {
 position: relative;
 right: 0;
 border: 0;
}
ul.dropblock > li {
 margin: .4em 0 !important;
}
.mobi_menu,
a.arrow {
 display: inline-block;
 position: relative;
}
.mobi_menu {
 margin: 10px 0 0;
}
.mobi_menu {
 cursor: pointer;
 font-size: 1.1em;
 border-bottom: 1px solid #666;
}
.mobi_menu:before,
.mobi_menu.close:before {
 position: absolute;
 display: inline-block;
 font-size: 1.1em;
 font-family: FontAwesome;
 height: 18px;
 width: 18px;
 right: -25px;
 top: 0;
}
.mobi_menu:before {
 content: '\f0c9';
}
.mobi_menu.close:before {
 content: '\f00d';
}
li.drop > a.arrow:before,
li.drop > a.close:before {
 top: 0;
}
}

  Сейчас этот скрипт - экспериментальная версия, так сказать задумка, и представляет скорее набор скриптов, чем монолитный инструмент, но он работает и в скором времени я думаю довести его до ума. Пожелания и предложения как всегда можно оставлять в комментариях.
©//magentawave.com