Адаптивное меню css - 20 полезных сниппетов

Advanced Sidebar Menu

Перейти к плагину

Как видно по названию, Advanced Sidebar Menu рассчитан в первую очередь на создание боковых навигационных меню. В этом плане плагин предлагает большое количество опций, начиная с простой интеграции дочерних категорий и заканчивая настройкой стилей виджетов. Однако в бесплатной версии возможности расширения довольно сильно ограничены. Большая часть функций доступна только по платной подписке, хотя многим вебмастерам и разработчикам тем WordPress вполне хватает возможностей бесплатной версии. Плагин реализован в виде виджетов.

Общие сведения:

разработчик: OnPoint Plugins;
текущая версия плагина: 8.0.4;
версия WordPress: 5.0.0 – 5.5.1;
версия PHP: от 5.6.0;
локализация: 7 языков;
русский интерфейс: отсутствует;
рейтинг WordPress: 4,6.

Особенности Advanced Sidebar Menu:

добавляет два виджета: Pages Menu, Categories Menu;
простое разделение страниц и категорий путем простановки запятой в списке ID;
возможность всегда отображать дочерние страницы или категории;
добавление родительских элементов в меню;
сортировка по названию, дате, порядковому номеру;
многое другое.

Advanced Sidebar Menu – удобный инструмент создания боковых меню 2 уровня и их привязки к родительским элементам в главном меню сайта WordPress. То есть, с помощью этого плагина можно задать зависимость содержимого вертикального меню от родительских элементов в шапке. Например, в хедере находятся названия регионов РФ, а в sidebar-меню выводятся города именно того региона, который выбран пользователем. К сожалению, значительная часть функций доступна только по платной подписке.

Какое решение лучше?

Какой тип навигации лучше подходит для адаптивного сайта? Ответ на этот вопрос зависит от нескольких факторов, включая размер экрана, размер шрифта, семейство шрифтов, количество навигационных элементов и т.д. Эти факторы взаимодействуют друг с другом, и они могут все изменить.

Вместо того, чтобы рассматривать каждый из этих факторов, мы просто посмотрим на конечный результат: не все элементы навигации вписывается в один аккуратный ряд и некоторые переходят на новую строку? Сколько именно элементов не помещается? Вооружившись этой информацией, мы можем выбрать правильную навигацию для работы.

На что влияет сниппет

Сниппет влияет на кликабельность (CTR) Вашего ресурса в выдаче. Если заголовок страницы (тег <title>) содержит ключевую фразу, а описание также содержит ее и другие околотематичные слова, то это значит, что страница релеванта запросу и вероятность перехода на неё стремится к 100%. Тем более, что ключевые слова выделяются черным.

Если на Ваш сайт есть переходы с поисковым систем, то это дает ему ещё большие позиции в выдаче. Получается немного парадоксальная ситуация: чем больше переходов на сайт, тем он как бы лучше, а значит должен ранжироваться выше других.

При этом ресурс должен отвечать на запрос пользователя, иначе после подъема позиций, наступит скорый спад.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Create A Responsive Topnav

Step 1) Add HTML:

Example

<!— Load an icon library to show a hamburger menu (bars) on small screens —>
<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><div class=»topnav»
id=»myTopnav»> <a href=»#home» class=»active»>Home</a>
<a href=»#news»>News</a> <a href=»#contact»>Contact</a>
<a href=»#about»>About</a> <a href=»javascript:void(0);»
class=»icon» onclick=»myFunction()»> <i
class=»fa fa-bars»></i> </a></div>

The link with class=»icon» is used to open and close the topnav on small
screens.

Step 2) Add CSS:

Example

/*
Add a black background color to the top navigation */.topnav {  background-color: #333;
overflow: hidden;}/*
Style the links inside the navigation bar */.topnav a {
float: left; display: block;
color: #f2f2f2; text-align: center;
padding: 14px 16px; text-decoration: none;  font-size: 17px;}/* Change the color of links on hover */
.topnav a:hover {  background-color: #ddd;
color: black;}/* Add an active class to highlight the current page
*/.topnav a.active { background-color: #04AA6D;
color: white;}/* Hide the link that should open and close the topnav on small screens */
.topnav .icon { display: none;}

Add media queries:

Example

/* When the screen is less than 600 pixels wide, hide all links, except
for the first one («Home»). Show the link that
contains should open and close the topnav (.icon) */@media screen and (max-width: 600px) { .topnav
a:not(:first-child)
{display: none;} .topnav a.icon {    float:
right;    display: block; }}
/* The «responsive» class is added to the topnav with JavaScript when the
user clicks on the icon. This class makes the topnav look good on small
screens (display the links vertically instead of horizontally) */@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;} .topnav.responsive a.icon {    position: absolute;
right: 0;    top: 0; }
.topnav.responsive a {    float: none;
display: block;    text-align: left; }}

Step 3) Add JavaScript:

Example

/* Toggle between adding and removing the «responsive» class to topnav when
the user clicks on the icon */function myFunction() {
var x = document.getElementById(«myTopnav»); if (x.className
=== «topnav») { x.className += »
responsive»; } else { x.className = «topnav»;
}}

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯

* no credit card required

❮ Previous
Next ❯

Max Mega Menu

Перейти к плагину

Max Mega Menu – мега-популярное решение проблемы с созданием меню для мобильных и десктопных версий сайта на «движке» WordPress. Количество закачек плагина подбирается к 5 миллионам, а число активных установок превысило 300 тысяч. У плагина есть премиальная версия PRO ($19), но и в базовом функционале возможности достаточно высоки. Max Mega Menu преобразует дефолтное меню в раскрывающееся меню с полной шириной в навигационной панели, после чего вебмастер может добавлять в него виджеты, менять стиль с помощью редактора темы, создавать новые сценарии поведения в зависимости от действий пользователя и производить ряд других действий.

Общие сведения:

разработчик: megamenu.com;
текущая версия: 2.9.1;
последнее обновление: менее месяца назад;
версия WordPress: 4.9 и выше, тестировано до 5.5.1;
версия PHP: 5.6 и выше;
локализация: 9 языков;
русский язык: есть;
рейтинг WordPress: 4,95.

Опции премиальной версии указаны в разделе Pro Features официального сайта сообщества разработчиков. Там же найдется и масса полезной информации по интеграции с различными темами WordPress, ответы на часто задаваемые вопросы, рекомендации по устранению проблем в работе расширения.

Преимущества:

большое количество опций в бесплатной версии;
есть русская локализация;
плагин постоянно улучшается;
удобный редактор в административной панели WordPress;
настройка сценариев поведения по наведению указателя мыши и клике;
добавление иконок в пункты меню;
оптимизированный код, сценарии занимают менее 2 Кб памяти JS;
несколько мест размещения;
упрощение создания мобильного меню;
добавление любых виджетов;
эффекты анимации;
очень подробная документация (англ.).

Перечень преимуществ далеко не полон, однако в рамках небольшого обзора не представляется возможным раскрыть все возможности Max Mega Menu.

Недостатки:

часть опций доступна только в платной версии PRO (дополнительная интеграция с WooCommerce и ряд других);
не все действия интуитивно понятны (например, по умолчанию отключена подсветка активного пункта меню, пользователю придется покопаться в настройках или документации, чтобы включить эту опцию).

Недостатки некритичны, поэтому легко перекрываются большими возможностями бесплатной версии. Особенно если учесть, что многие опции в аналогах доступны только по премиальной подписке. В любом случае Max Mega Menu остается одним из лучших вариантов решения проблемы с оформлением меню, что подтверждается и огромным количеством активных установок расширения.

Шаг 6: Подключаем FlexMenu

Скачайте flexMenu, jQuery-плагин и подключите jQuery. Чтобы все нормально работало, размещайте скрипты внизу страницы.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="flexmenu.min.js"></script>

Также нам нужно указать, к какому элементу мы применяем наш скрипт.

<script type="text/javascript">
    $('#mainNavbar').flexMenu();
</script>

Теперь, когда мы изменяем размер страницы, появляется ссылка «more», если некоторые из пунктов не помещаются на панели навигации. Вы можете навести курсор мыши или нажать на эту ссылку, чтобы отобразить выпадающие элементы. Когда страница становится слишком маленькой для более чем одного или двух элементов для отображения в панели навигации, мы отображаем все меню в этой ссылке.

Шаг 1: Выбор контрольных точек

Отзывчивый конструкция имеет две основные функции. Во-первых, проект должен быть резиновым: масштабы ширины изменяются вместе с шириной окна браузера. Во-вторых, нужно использовать контрольные точки, которые позволят изменять ширину конструкции за счет использования CSS media queries. Например, вы можете решить, что, когда браузер будет иметь ширину не меньше 480 пикселей, боковая панель будет двигаться ниже содержания и заголовки и станут меньше. Вы можете иметь столько контрольных точек, сколько вы хотите.

Вот пример использования media queries

@media only screen and (max-width: 480px) {
    /* This CSS will be applied only to phones and other small devices. */
}

Twitter Bootstrap использует , включая смартфоны с шириной не более 480px.
На самом деле, media queries не указывают, какое устройство мы будем использовать, зато они применяются для различных разрешений экранов.

Шаг 3: Основные стили

Для начала, давайте немного украсим наше меню.

navbar {
    background-color: #055;
    margin: ;
    padding: ;
    width: 100%;
    line-height: 1;
    overflow: hidden;
}
.navbar li, .navbar a {
    display: inline-block;
}
.navbar li {
    list-style-type: none;
}
.navbar > li {
    margin-left: .25em;
}
.navbar > li:first-child {
    margin-left: ;
}
.navbar a {
    padding: .25em;
    text-decoration: none;
    height: 1em;
    font-weight: bold;
    color: #fff;
}
.navbar a:hover {
    background-color: #088;
}

Мы будем использовать процентное значение для наших блоков, чтобы сделать дизайн адаптивным.

body {
    font-family: sans-serif;
    font-size: 16px;
    background-color: #fff;
}
article {
    background-color: #eee;
    padding: 2.5%;
    margin-right: 1%;
    width: 64%;
    float:left;
}
aside {
    background-color: #ccc;
    padding: 2.5%;
    width: 25%;
    float: left;
}

Теперь мы имеем такой результат:

Responsive Menu

Перейти к плагину

Как понятно по названию, разработчики сделали ставку на респонсивный дизайн. Как утверждают авторы, в их плагине более 150 настраиваемых опций, что дает в совокупности более 22 тысяч вариаций настроек. Расширение прописывается в консоли WordPress, опции раскиданы по девяти вкладкам.

В версии PRO добавлены эффекты анимации, появляются дополнительные настройки цвета и некоторые другие удобные вещи, такие как, например, предварительный просмотр изменений перед их применением. Да, работать с премиальной версией безусловно удобней, и опций в ней намного больше, однако и возможностей базового варианта вполне хватает для создания меню, которое будет одинаково красиво смотреться как на ПК, так и на мобильных устройствах.

Интересно, что в бесплатной версии можно установить фоновое изображение, но смена цвета фона – функция PRO. Ограничение функционала произведено немного загадочно. Например, размер шрифта в базовом варианте выставляется в пикселях, а в премиум-версии добавляется возможность изменения в процентах. И таких платных «улучшений», без которых вполне можно обойтись, не так уж мало.

Общие сведения:

разработчик: ExpressTech;
версия WordPress: от 3.6, тестировано до 5.5.1;
версия PHP: 5.5 и выше;
текущая версия расширения: 3.1.30;
количество активных установок: более 100000;
локализация: 10 языков;
русский интерфейс: нет;
рейтинг WordPress: 4,7.

Базовый функционал Responsive Menu:

фоновое изображение для меню;
выбор шрифтов, установка выравнивания текста;
простое изменение цвета фона, границ, текста;
возможность добавления кастомных компонентов HTML;
импорт и экспорт по одному клику мыши;
загрузка пользовательских логотипов, изображений;
интеграция поискового механизма;
выбор размеров дисплея, на котором будет показываться данное меню;
эффекты анимации;
поддержка WPML, Polylang, RTL;
и другие опции.

К недостаткам Responsive Menu можно отнести отсутствие русской локализации, однако, во-первых, это явление временное, а во-вторых, интерфейс интуитивно понятен и назначение подавляющего большинства настроек ясно и без перевода даже людям с очень слабым знанием английского языка. Если же возникнет желание сделать апгрейд до PRO, за одиночную лицензию придется заплатить $14,99, а за мульти-лицензию (до 100 сайтов) – $49,99.

Как изменить сниппет в поисковых системах

За счет чего формируется сниппет? А строится он, прежде всего, за счет очень важного мета тега description, про который все новички вечно забывают, поскольку им кажется, что его заполнять не так важно. Ещё хуже, когда вебмастеры просто перечисляют в нем список ключевых слов

Вернемся к description. Синтаксис этого мета тега:

Допустим он у Вас заполнен по всем правилам, но это вовсе не стопроцентная гарантия, что поисковая система (имеется ввиду Яндекс) будет использовать Ваше описание «description». Вот в Google ситуация со сниппетами предельна проста. То, что написано в description, то он и отображает.

С Яндексом все сложнее. Для него этот мета тег является лишь рекомендацией, а не правилом. Его алгоритмы зачастую сами составляют описание для страницы путем вырезания кусков текста на странице. В некоторых случаях это получается хорошим описанием, но бывает и не очень. Поэтому надеяться на алгоритмы не стоит. Лучше перепроверять иногда их самостоятельно или же воспользоваться такой функцией в Яндекс Вебмастер.

Как же все-таки можно повлиять на сниппет в Яндексе, если он его сгенерировал сам? Ну, как это не странно звучит, для начала нужно обязательно прописать хороший мета тег description. Если это не помогло и сниппет все равно берется из текста страницы, то остается только одно: найти этот кусок текста на странице и отредактировать его так, чтобы получить привлекательное описание страницы. Скажу сразу, что порой это бывает не простой задачей (например, может быть склеен заголовок <h1> и сразу следующее за ним первое предложение). Однако ради результата стоит повозиться с контентом.

Если очень много страниц на сайте

Как и контент на каждой странице должен быть уникальным, так и описание страницы должно быть уникальным. Но что делать, если на сайте тысячи страниц? Ведь поменять все сниппеты на таком гиганте будет очень трудоемкой задачей. Да и трудно придумать так много различных описаний, которые бы ещё и отвечали всем требованиям. В этом случае поступают несколько более простым способом:

Отбираются запросы, которые располагаются ближе всего к топу. На мой взгляд, достаточно будет найти все запросы в топ30.
Далее проверяете сниппеты этих страниц на привлекательность. Если Вы считаете, что менять ничего не нужно, то переходите к следующему запросу (но лично я чаще всего нахожу способы переписать сниппет в более лучшем виде).
Через месяца два советую проверить эти запросы. Стал ли отображаться именно тот сниппет, к которому Вы стремились? Если да, то могу вас поздравить с достижением поставленной цели.

Даже после одной такой итерации можно получить существенное улучшение видимости сайта в поисковых системах при незначительных затратах времени и денежных средств. Поэтому советую оптимизировать свои проекты, в особенности те запросы, которые нужно продвинуть, поскольку это просто необходимо в нынешних условиях SEO.

Правила и советы для создания кликабельного сниппета

4.1. Создайте привлекательный сниппет

Самое главное в сниппете — это то, чтобы он был привлекательным для пользователя. Но с другой стороны необходимо стремиться к таким сниппетам, чтобы они полностью и точно отображали содержание страницы. Не стоит писать в нем то, чего на самом деле нет на странице. Этим мы повысим и конверсию, и снизим количество отказов, что положительно скажется в целом на доверии к сайту, а в дальнейшем и его на позициях.

4.2. Наличие ключевых слов в сниппете

Сниппет обязательно должен содержать ключевые слова (желательно иметь точное вхождение). Конечно, не нужно делать из него список ключевых фраз. Исследования показали, что идеальным вариантом для описания страницы является одно точное вхождение запроса и ещё одно не точное (разбавленное). Но стремиться к этому условию я никому не советую. Куда важнее сделать сниппет привлекательным с точки зрения пользователя.

Как я уже писал выше, ключевые слова в запросе будут подчеркиваться в Вашем сниппете, что делает представление сайта еще ярче и заметнее

Это крайне важно

4.3. Ограничение длины сниппета

Не стоит писать сниппет длиннее 140 символов, поскольку поисковик все равно его обрежет до 140 символов. Не стоит на этому зацикливаться. Главное просто помнить о том, что нужно не переусердствовать в длине. Два-три предложения должно хватить, чтобы раскрыть суть статьи.

Nextend Accordion Menu

Перейти к плагину

Nextend Accordion Menu – неплохой и удобный плагин для быстрого создания «аккордеона», выпадающего меню с вертикальным расположением пунктов. К сожалению, у расширения есть огромный недостаток: команда разработчиков отказалась от поддержки плагина, решив сконцентрировать усилия на других направлениях. Страница расширения удалена с официального сайта WordPress, осталась только ссылка на скачивание последнего релиза на форуме. На момент окончания поддержки у Nextend Accordion Menu было более 10 тысяч скачиваний и достаточно высокая оценка в пользовательском рейтинге – 4,7.

Общие сведения:

разработчик: Nextendweb;
русская локализация: нет;
количество скачиваний: 10000+;
рейтинг WordPress: 4,7.

У расширения есть несколько готовых меню. Найти их очень легко. После активации плагина, в панели администрирования WordPress появится пункт «Accordion Menu». В первом подпункте находятся готовые решения. Во втором производится добавление и настройка пользовательских меню. Третий подпункт – предложение перейти на версию PRO.

На первый взгляд, возможности более чем скромные. Однако по мере работы оказывается, что при выборе некоторых настроек появляются целые «простыни» дополнительных опций во всплывающих окнах. Подобный подход к организации удобен хотя бы тем, что пользователю не приходится постоянно перескакивать с одной вкладки на другую и обратно. Авторы предусмотрели и возможность изменения сценариев поведения при наведении и клике мышью, и кастомное оформление подпунктов до пятого уровня вложенности включительно, и загрузку шрифтов и скинов, и анимационные эффекты, и многое другое.

Если решите проверить Nextend Accordion Menu в деле, не забывайте, что работа над проектом прекращена. А это значит, что уже никто не проводит проверку совместимости расширения с последними релизами WordPress, MySQL, языками скриптов и так далее. А еще – что возникшие проблемы не получится решить с помощью техподдержки.

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Где можно применить FlexMenu?

Наиболее часто данное flexMenu я применяю при адаптации вкладок (табов). Например данные табы можно найти в карточке товара практически любого интернет магазина. По клику можно переключать скрытый контент. Когда табы не вмещаются в экран, тем более когда их много, то просто не знаешь что с ними делать. FlexMenu как раз решает данную проблему — свернули в «More» лишние пункты и все.

Также flexMenu может пригодиться при адаптации хлебных крошек (навигатор на сайте). Бывают длинные пункты у хлебных крошек и они переносятся на следующую строку, что в свою очередь не очень удобно смотрится на мобильных устройствах. Как раз с помощью данного плагина можно оставить в одну строку то количество пунктов, которые помещаются в экран мобильного устройства.

Вот такой вот полезный скрипт. Внедряйте и делайте свои сайты удобными. На этом у меня все. До встречи в следующих постах!

Если вы хотите внедрить данный скрипт на свой сайт, но не хотите или не понимаете как это делать, то можете обратиться ко мне через форму обратной связи. Я вам помогу. Стоить данная услуга будет — 500 руб.

Примеры хорошего и плохого сниппета

Что такое хороший и плохой сниппет? Приведу 2 примера, в первом случае он хороший (привлекательный), а во втором наоборот — плохой.

Для примера я ввел запрос в Яндексе «пример сортировки массива в паскале». Ниже представлен пример сайта с хорошим сниппетом, на который я бы перешел:

А это тот же запрос, но сниппет явно не подходит запросу. Лично я бы не стал переходить на эту страницу:

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

Например, у сайта, который занимает 5 позицию сниппет лучше, чем у лидеров (топ-4). То в такой ситуации зачастую на него будут кликать даже чаще, чем у самих лидеров. Это означает, что быть на первых местах в выдаче ещё не означает, что пользователи будут переходить больше на него, чем на вебсайты находящийся ниже.

Шаг 5: Устанавливаем фиксированную высоту для навигации.

В большинстве случаев, содержимое нашей панели навигации умещается на одной аккуратной линией. Давайте исправим это!

При помощи JavaScript мы будем скрывать элементы, которые не вписываются. Мы покажем их в выпадающем меню позже. Если пользователь не использует JavaScript, мы просто заставим высоту панели навигации расширяются по мере необходимости. Это не красиво, но это по крайней мере функционально.

Чтобы сделать это, мы скачаем и подключим пользовательские сборки Modernizr, библиотеку JavaScript, которая позволяет нам протестировать функцию поддержки в браузерах. Также мы добавим класс «no-js».

<html class="no-js">
<script src="modernizr.custom.js"></script>

Теперь давайте добавим следующий класс:

.js .navbar {
    height: 1.5em;
    overflow: hidden;
}

Дополнительные опции

threshold

(Число, по умолчанию — 2). Честно казать, не знаю в чем полезность данной опции. Более того, я считаю, что она должна работать немного по другому.

Данной опции передаем имеющееся количество пунктов меню и при этом пункты не будут прятаться в подпункты, а будут просто переноситься на новую строку. Для чего это нужно — понятия не имею. На мой взгляд должно быть так — задаем число, при котором пункты меню перестают прятаться в подпункты и переносятся на новую строку. Хотя и это не знаю где может пригодиться. В общем, объяснение я этому не нашел.

cutoff

(Число, по умолчанию — 2). Данной опцией задаем после какого количества пунктов мы должны показать одну кнопку раскрытия меню. Т.е. здесь есть возможность спрятать все меню в одну кнопку и назвать ее как угодно (через опцию linkTextAll и linkTitleAll, но об этом ниже), например, «Меню» (см. демо — уменьшите экран до мобильного устройства).

linkTitle

(Строка, по умолчанию — View More). Атрибут title для ссылки «More». Т.е. можно задать подсказку ссылке, например, «Показать все подпункты».

linkTitleAll

(Строка, по умолчанию — Menu). Атрибут title для ссылки раскрытия всех подпунктов. Опять же, можно задать подсказку при наведении курсора.

shouldApply

(Функция. По умолчанию возвращает — true). Функция срабатывает при изменении размера родительского контейнера меню. Чтобы проверить достаточно изменить размер экрана. Если функция вернет ложь (false), то ссылка «More» удалится, а не помещающиеся пункты перенесутся на новую строку.

showOnHover

(Boolean, по умолчанию — true). Выпадающие подпункты выпадают при наведении на ссылку «More». Если хотите вызывать их по клику установите данный параметр в .

undo

(Boolean, по умолчанию — false). Если перевести на русский, undo — означает уничтожить. Данный параметр, если выставить в true, вернет меню в первоначальное состояние, т.е. покажутся все пункты и исчезнет ссылка «More».

popupAbsolute

(Boolean, по умолчанию — true). По умолчанию выпадающему списку задается правило — . Если вам нужно как-то по другому настроить выпадение без абсолютного позиционирования, то выставьте данное значение в .

popupClass

(Строка, по умолчанию доп. класс не выводится). Дополнительный класс выпадающему списку. Сделано для удобства, если вас чем-то не устраивает имеющийся класс.

Вот и все опции.

демо Скачать исходники

Я немного поковырялся в скрипте и изменил метод закрывания подпунктов. Они закрывались только, если мы снова нажмем на ссылку «More», а мне хотелось, чтобы подпункты скрывались помимо самой ссылки «More» еще, кликнув в любом месте документа.