Magentawave

Стили

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


body {
	background-color: #ece8e5;
}

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

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}

Затем смещаем ссылки меню влево, так что они будут выводиться в один ряд.

nav li {
	display: inline;
	float: left;
}

Если вы посмотрите на разметку HTML, то увидите, что добавлен в атрибуте для обеих тегов и для сбрасывания обтекания текста вокруг меню.

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Так как у нас есть шесть ссылок меню, контейнер имеет ширину , то каждая ссылка будет шириной .

nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

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

nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}

Теперь меню будет иметь более светлый цвет в состояниях и .

nav a:hover, nav a:active {
	background-color: #8c99a4;
}

…а внешние ссылки будут скрыты (для экранов настольных систем).

nav a#pull {
	display: none;
}

На данном этапе мы создали стили для меню. Но при изменении экрана браузера ничего происходить не будет. Пора переходить к следующему этапу.

Шаг1. Разметка HTML

Для начала определимся, что мы хотим видеть на навигационной панели, и как она будет работать. Пусть в левой части окна, прямо возле края страницы, будет располагаться что-то вроде закрепленного «ярлычка», который будет плавно «выезжать» когда пользователь будет наводить на него курсор.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

На навигационной панели будет стандартный набор: ссылки на основные разделы сайта, выполненные в виде пунктов меню и простая форма для поиска по сайту. Разметка для всего этого будет приблизительно следующей:

XHTML

<div id=»main_menu»> <ul id=»navigation»> <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> <div id=»searchbar»> <form id=»searchform» > <input type=»text» name=»search» /> <input type=»submit» value=»» /> </form> </div> <span id=»menu_label» >МЕНЮ</span> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id=»main_menu»>

<ul id=»navigation»>

<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>

<div id=»searchbar»>

<form id=»searchform» >

<input type=»text»name=»search» />

<input type=»submit»value=»» />

</form>

</div>

<span id=»menu_label» >МЕНЮ</span>

</div>

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

Как видим, пункты навигационного меню собраны в неупорядоченный (маркированный) список. Далее идет простая форма поиска с одной кнопкой и одним полем для ввода текста (форма «упакована» в дополнительный блок div – это может понадобиться для CSS). В конце идет элемент span, который содержит текст для «ярлыка». Все это заключено в «контейнер» <div id=»main_menu»> с целью более удобного позиционирования.

Шаг 2. CSS

Итак, стили. В первую очередь, для самой страницы:

css/main.css

 * {
    margin: 0;
    padding: 0;
}
html {
    background-color: #fff;
    height: 100%;
}
body {
    color: #333333;
    font: 0.75em/1.5em Arial,sans-serif;
}
.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 96%;
}

Теперь напишем стили для верхних элементов меню:

/* common and top level styles */
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

Реализуем стили для подменю (выпадающий список):

/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #F55856;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

Отлично. Теперь самое главное — каким образом меню станет адаптивным? На самом деле всё очень просто! Воспользуемся CSS3 медиа запросами, которые определят, какие из стилей отображать в зависимости от размеров пользовательского экрана. Также преобразовывать меню мы будем с помощью следующей хитрости. В нашем HTML коде, сразу за верхними уровнями меню, я поставил специальные SPAN-ы. Их мы и будем использовать, присвоив активное состояние (псевдо класс :target), при клике по верхним элементам меню. Таким образом, будет открываться подменю. Смотрим код:

/* responsive rules */
@media all and (max-width : 980px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}

Настройки вкладки «Advanced Setting»

  1. 1.На этой вкладке, прежде всего, нужно будет задать параметр «Menu Breakpoint». Он отвечает за то разрешение экрана, начиная с которого, будет показываться мобильное меню на вашем сайте WordPress. Сейчас оно задано 800px, но вы можете задать сове значение.
  2. 2.Так же, можно сделать, что бы при показе кнопки адаптивного меню у вас происходило скрытие основного меню сайта. Для этого нужно узнать класс или идентификатор основного меню и вставить в поле «CSS of Menu To Hide».
  3. 3.«Menu Depth» позволяет задать уровень вложенности меню, то есть, к примеру, если у вас основное меню на сайте содержит пять уровней вложенности, а вы хотите чтобы в мобильном меню отображалось только два или один, то в раскрывающемся списке, вам нужно выбрать нужное значение.
  4. 4.«Menu Width» — позволяет задать ширину вашего раскрывающегося мобильного меню в процентах.
  5. 5.По умолчанию в это меню добавляется строка поиска. Для того, что бы его убрать нужно поставить галочку возле параметра «Remove Search Box». Так же, можно изменить позицию поиска: над ссылками меню, либо под ссылками.
  6. 6.При помощи параметра «Auto Expand Sub-Menus» можно расширять вложенные подпункты до размеров основного меню.
  7. 7.«Click to Close Menu on Page Click» позволит меню автоматически сворачиваться при щелчке на пустом месте на странице.
  8. 8.«Ignore Parent Clicks» — позволяет игнорировать щелчки по родительским элементам многоуровневого меню. То есть при щелчке по ним будет раскрываться подменю, а переход на родительскую страницу осуществляться не будет.
  9. 9.«Technical Settings» — здесь задается различная техническая информация по подключению скриптов, добавлению СSS-правил, и так далее. Если в этом всём не особо разбираетесь, то оставляйте всё по умолчанию.
  10. 10.«Custom Walker» тоже оставляем по умолчанию пустым.

Нажимаем на кнопку «Update Responsive Menu Options» и переходим на сайт, что бы посмотреть, что у нас получилось.

Description

Need some help with the mobile website experience? Need an Mobile Menu plugin that keep your mobile visitors engaged?

WP Mobile Menu is the best WordPress responsive mobile menu. Provide to your mobile visitor an easy access to your site content using any device smartphone/tablet/desktop.

Se below the lisf of features of what our WordPress Responsive Menu can do for you.

No coding knowledge is required. Works with all WordPress responsive themes.

Links

  • Free Demo
  • Ecommerce Demo
  • Professional Demo
  • Website
  • Documentation

This are the features that will keep your mobile visitors engaged

  • 3 Depth Menu Level
  • Naked Header
  • Overlay Mask when the menu is opened
  • Logo/Text Branding
  • Background image for the menus
  • Naked Header
  • Hide specific elements when the Mobile Menu is visible(theme menus, or any html element)
  • Google Fonts
  • Customise the styling of your mobile menus
  • Display Type – Slideout Over Content, Slideout Push Content
  • Disable Mobile Menus in specific pages
  • Alternative menus per page
  • Menus only visible for logged in users
  • Header Live Search
  • Header Banner(above and below the header)
  • Footer menus
  • Menus Display Type – Overlay Full Width, Slideout From Top
  • Sliding menus
  • 2000+ Icons (FontAwesome, Fontelicon, Iconic, Entypo, Typicons)
  • Animated Icons
  • 5th Depth Menu Levels
  • Copyright section
  • Import/Export options
  • and much more…

Increase your Woocommerce shop website sales conversion

  • Menu Cart Icon
  • Sliding Cart
  • Checkout and View Cart buttons in Sliding Cart
  • Account links in Sliding Cart
  • Mobile Product Filter
  • Header Products Live Search

Related Plugins

Menu Image: Easily add an image or icon in a menu item. Creating a better website menu.

Great Support, our free support is above the average. Only the Premium support is better and faster. WP Mobile Menu Support page

Добавляем виджет мобильного меню

Для начала, добавьте на страницу сам виджет мобильного меню. Достаточно перенести его с панели виджетов на страницу

Чем мобильное меню отличается от обычного? 

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

Скрываются по нажатию на крестик (если меню уже открыто):

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

Из чего состоит мобильное меню?

Виджет «Меню-гамбургер» служит только оболочкой для обычного виджета «Меню». Другими словами, кнопки находятся внутри виджета «Меню», а тот, в свою очередь, находится внутри виджета «Меню-гамбургер». Рассмотрим на примере границы виджетов, и убедимся, что «Меню» вложено внутрь «Меню-гамбургер»

HTML:

<div class=»menu-container»> <div class=»menu»> <ul> <li><a href=»#link»>Главная</a></li> <li><a href=»#link»>Мега-меню</a> <ul> <li><a href=»#link»>Раздел 1</a> <ul> <li><a href=»#link»>Раздел 1.1</a></li> <li><a href=»#link»>Раздел 1.2</a></li> <li><a href=»#link»>Раздел 1.3</a></li> <li><a href=»#link»>Раздел 1.4</a></li> </ul> </li> <li><a href=»#link»>Раздел 2</a> <ul> <li><a href=»#link»>Раздел 2.1</a></li> <li><a href=»#link»>Раздел 2.2</a></li> <li><a href=»#link»>Раздел 2.3</a></li> <li><a href=»#link»>Раздел 2.4</a></li> <li><a href=»#link»>Раздел 2.5</a></li> </ul> </li> <li><a href=»#link»>Раздел 3</a> <ul> <li><a href=»#link»>Раздел 3.1</a></li> <li><a href=»#link»>Раздел 3.2</a></li> <li><a href=»#link»>Раздел 3.3</a></li> </ul> </li> <li><a href=»#link»>Раздел 4</a> <ul> <li><a href=»#link»>Раздел 4.1</a></li> <li><a href=»#link»>Раздел 4.2</a></li> <li><a href=»#link»>Раздел 4.3</a></li> <li><a href=»#link»>Раздел 4.4</a></li> </ul> </li> </ul> </li> <li><a href=»#link»>Подменю</a> <ul> <li><a href=»#link»>Раздел 1</a></li> <li><a href=»#link»>Раздел 2</a></li> <li><a href=»#link»>Раздел 3</a></li> </ul> </li> <li><a href=»#link»>Контакты</a></li> </ul> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<div class=»menu-container»>

<div class=»menu»>

<ul>

<li><a href=»#link»>Главная</a></li>

<li><a href=»#link»>Мега-меню</a>

<ul>

<li><a href=»#link»>Раздел 1</a>

<ul>

<li><a href=»#link»>Раздел 1.1</a></li>

<li><a href=»#link»>Раздел 1.2</a></li>

<li><a href=»#link»>Раздел 1.3</a></li>

<li><a href=»#link»>Раздел 1.4</a></li>

</ul>

</li>

<li><a href=»#link»>Раздел 2</a>

<ul>

<li><a href=»#link»>Раздел 2.1</a></li>

<li><a href=»#link»>Раздел 2.2</a></li>

<li><a href=»#link»>Раздел 2.3</a></li>

<li><a href=»#link»>Раздел 2.4</a></li>

<li><a href=»#link»>Раздел 2.5</a></li>

</ul>

</li>

<li><a href=»#link»>Раздел 3</a>

<ul>

<li><a href=»#link»>Раздел 3.1</a></li>

<li><a href=»#link»>Раздел 3.2</a></li>

<li><a href=»#link»>Раздел 3.3</a></li>

</ul>

</li>

<li><a href=»#link»>Раздел 4</a>

<ul>

<li><a href=»#link»>Раздел 4.1</a></li>

<li><a href=»#link»>Раздел 4.2</a></li>

<li><a href=»#link»>Раздел 4.3</a></li>

<li><a href=»#link»>Раздел 4.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href=»#link»>Подменю</a>

<ul>

<li><a href=»#link»>Раздел 1</a></li>

<li><a href=»#link»>Раздел 2</a></li>

<li><a href=»#link»>Раздел 3</a></li>

</ul>

</li>

<li><a href=»#link»>Контакты</a></li>

</ul>

</div>

</div>

Варианты адаптивного меню на сайте

Прежде, чем рассмотреть непосредственно виды меню, стоит учитывать, какие вообще есть варианты адаптивной навигации.

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

Вот полная версия:

А вот уменьшенная:

Это решение отлично подходит для вариантов, где количество пунктов не больше четырех.

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

Смотрим пример полной версии:

И отображение на мобильном устройстве:


Кликая на Explore, видим навигацию по сайту в футере:

  1. Третий вариант – меню из блоков. В стандартной версии они отображаются горизонтально в ряд, либо в два ряда, а при уменьшении размера, выстраиваются вертикально.

Вот пример полной версии:

И мобильной:

В то же время третий вариант можно отнести к разряду вертикальных меню для мобильных устройств. И тут мы подходим непосредственно к классификации типов мобильного меню для сайтов на WordPress или любых других CMS.

Условно можно выделить такие их основные виды:

  • вертикальное;
  • горизонтальное;
  • раскрывающееся.

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

Приведем примеры основных типов мобильного меню на сайте.

Горизонтальное меню

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

Дизайн горизонтального меню может быть очень разнообразным: в виде вкладок, блоков, картинок

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

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

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

Мобильная версия:

Также возможно одновременное использование горизонтального и вертикального отображения.

Вертикальное мобильное меню

Вот пример, когда уживаются два вида меню на одном сайте:

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

Раскрывающееся меню

Наиболее распространенный вид раскрывающегося меню – это кнопка вверху экрана, при нажатии на которую, появляются разделы сайта.

Раскрываться такой список может вниз, вправо, либо же, как в примере ниже, пункты меню будут выезжать с левой стороны:

В Wordress-теме Wordie выезжающее меню реализовано как в мобильной, так и в настольной версии. Разница в том, что после нажатия на кнопку, в настольной — меню раскрывается горизонтально, а в мобильной – вертикально.

Важно в таком варианте сделать кнопку меню заметной для пользователя. Ранее мы рассматривали различные комбинации раскрывающегося меню с горизонтальным и вертикальным

Там выпадающие списки дополняют основные пункты меню

Ранее мы рассматривали различные комбинации раскрывающегося меню с горизонтальным и вертикальным. Там выпадающие списки дополняют основные пункты меню.


Теперь разберемся, как можно реализовать мобильное меню для сайта на WordPress.

Разметка HTML

Первым делом нужно построить разметку. Так как мы создаем навигационный элемент, то отличным решением будет использование элемента HTML5 .

<nav>
</nav>

Даже такой небольшой кусочек кода может стать причиной головоной боли при тестировании. Особенно, если забыть, что HTML5 не поддерживается в IE  в версиях старше 9.  Для решения возникшей задачи совместимости используется скрипт html5shiv.

	<!-->
		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<!-->

Добавляем список

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

		<nav>
			<ul>
				<li><a href="#">RUSELLER</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>
				<li><a href="#">Контакт</a></li>
			</ul>
		</nav>

Добавляем подписи

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

		<nav>
			<ul>
				<li><a href="#">RUSELLER<br /> <small>Главная</small></a></li>
				<li><a href="#">О нас<br /> <small>Наша команда</small></a></li>
				<li><a href="#">Клиенты<br /> <small>Наши друзья</small></a></li>
				<li><a href="#">Работы<br /> <small>Наш труд</small></a></li>
				<li><a href="#">Аудио<br /> <small>Услыште нас</small></a></li>
				<li><a href="#">Скачать<br /> <small>Полезное</small></a></li>
				<li><a href="#">Блог<br /> <small>Прочитайте о нас</small></a></li>
				<li><a href="#">Контакт<br /> <small>Напишите нам</small></a></li>
			</ul>
		</nav>

Вот так будет выглядеть наше меню после проделанных операций:

jQuery:

$(document).ready(function() { «use strict»; $(‘.menu > ul > li:has( > ul)’).addClass(‘menu-dropdown-icon’); $(‘.menu > ul > li > ul:not(:has(ul))’).addClass(‘normal-sub’); $(«.menu > ul»).before(«<span class=\»menu-mobile\»>Меню:</span>»); $(«.menu > ul > li»).hover(function(e) { if ($(window).width() > 768) { $(this).children(«ul»).stop(true, false).fadeToggle(150); e.preventDefault(); } }); $(«.menu > ul > li»).click(function() { if ($(window).width() <= 768) { $(this).children(«ul»).fadeToggle(150); } }); $(«.menu-mobile»).click(function(e) { $(«.menu > ul»).toggleClass(‘show-on-mobile’); e.preventDefault(); }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$(document).ready(function(){

«use strict»;

$(‘.menu > ul > li:has( > ul)’).addClass(‘menu-dropdown-icon’);

$(‘.menu > ul > li > ul:not(:has(ul))’).addClass(‘normal-sub’);

$(«.menu > ul»).before(«<span class=\»menu-mobile\»>Меню:</span>»);

$(«.menu > ul > li»).hover(function(e){

if($(window).width()>768){

$(this).children(«ul»).stop(true,false).fadeToggle(150);

e.preventDefault();

}

});

$(«.menu > ul > li»).click(function(){

if($(window).width()<=768){

$(this).children(«ul»).fadeToggle(150);

}

});

$(«.menu-mobile»).click(function(e){

$(«.menu > ul»).toggleClass(‘show-on-mobile’);

e.preventDefault();

});

});

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

I chose for now the free version and it is really good. Later, I will take the Pro version to put some icons

This is the best mobile menu plugin and I searched for a long time! Very happy, as my Divi theme does not come up with any solution for a better looking mobile menu. Edit: Support is as quick as if you had paid!

This is a very good plugin with a very good support and also very simple to use. Working perfectly on WordPress 5.4.2

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

This is my first review in 4 years of WordPress, because it deserves all its recognition and is one of the must haves on all my running sites. I was looking for a thin, simple menu at first and downloaded a couple other menu plugins before this one, which none satisfied me. This plugin did way more than I expected. It was so satisfying on mobile that I set it to full width so it would also overtake the desktop menu. It’s not just a menu, it allows users to navigate the site in the most user friendly way possible with panels and navigation controls keeping it simple and professional. Recently I stumbled across an issue which was fixed in no time, Rui is really an expert at what he does. Overall outstanding experience, thank you for this plugin, L

Great plugin and quick support

Вертикальное выпадающее меню

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

В точке разрыва удалим обтекание и установим для пунктов и списка свойство . Теперь, при наведении курсора на пункт меню, его выпадающий список выводится поверх остального содержания. Нам нужно, чтобы другие пункты родительского уровня смещались. Вместо изменения для неупорядоченного списка положения , установим для свойства значение .

@media screen and (max-width: 800px) {
    .nav > li {
        float: none;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}

Шаг 1. HTML

Вот и html код нашего демо примера:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Responsive menu | Script Tutorials</title>

        <!-- add styles -->
        <link href="/css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="container">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#s1">Menu 1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">Header a</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header b</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">Menu 2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">Header c</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header d</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="http://www.script-tutorials.com/css3-responsive-menu/">Back to Responsive menu tutorial</a></li>
            </ul>
        </div>
    </body>
</html>

Тут я бы хотел отметить один момент — meta с атрибутом name=’viewpoint’. Это тег необходим для правильного масштабирования содержимого страницы на вашем экране, будь то монитор компа или мобилка. Весь остальной код не сложен для понимания. Многоуровневый список UL > LI.

Разметка HTML

Структура HTML будет строиться с мета тегом для управления шаблоном на мобильных устройствах.

Обычно оптимизированные для мобильных приложений сайты содержат следующие команды:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
</head>

CSS и JavaScript подключаются следующими строчками:

<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
<script src="js/jquery-1.7.2.min.js"></script>

JavaScript код, который строит навигационное меню для мобильных устройств выглядит так:

<!--  javaScript -->
<script>  
<!--  // Стрим меню для мобильных устройств -->
$(function(){
	// Добавляем элемент select 
	$('<select />').appendTo('nav');

	//Добавляем опции в элемент select
	$('<option />', {
		'selected': 'selected',
		'value' : '',
		'text': 'Choise Page...'
	}).appendTo('nav select');

	$('nav ul li a').each(function(){
		var target = $(this);

		$('<option />', {
			'value' : target.attr('href'),
			'text': target.text()
		}).appendTo('nav select');

	});

	// Событие onclicking при нажатии на ссылку
	$('nav select').on('change',function(){
		window.location = $(this).find('option:selected').val();
	});
});

// Выводим и скрываем подменю
$(function(){
	$('nav ul li').hover(
		function () {
			// Выводим подменю
			$('ul', this).slideDown(150);
		}, 
		function () {
			// Скрываем подменю
			$('ul', this).slideUp(150);			
		}
	);
});

</script>

Само выпадающее меню будет иметь следующую структуру:

		<div id="fdw">
				<!--Навигация-->
					<nav>
						<ul>
							<li class="current"><a href="http://www.ruseller.com" target="_balnk">Главная<span class="arrow"></span></a>
								<ul style="display: none;" class="sub_menu">
									<li class="arrow_top"></li>
									<li><a class="subCurrent" href="http://www.ruseller.com" target="_balnk">Пророчества</a></li>
									<li><a href="http://www.ruseller.com" target="_balnk">Откровения</a></li>
								</ul>
							</li>
							<li><a href="http://www.ruseller.com" target="_balnk">О нас</a></li>
							<li><a href="http://www.ruseller.com" target="_balnk">Услуги</a></li>
							<li>
								<a href="http://www.ruseller.com" target="_balnk">Портфолио<span class="arrow"></span></a>
								<ul style="display: none;" class="sub_menu">
									<li class="arrow_top"></li>
									<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 3 </a></li>
									<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 4 </a></li>
									<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 1 </a></li>
									<li><a href="http://www.ruseller.com" target="_balnk">Портфолио 2 </a></li>
								</ul>
							</li>
							<li>
								<a href="http://www.ruseller.com" target="_balnk">Блог<span class="arrow"></span></a>
								<ul style="display: none;" class="sub_menu">
									<li class="arrow_top"></li>
									<li><a href="http://www.ruseller.com" target="_balnk">Дизайн</a></li>
									<li><a href="http://www.ruseller.com" target="_balnk">HTML5</a></li>
									<li><a href="http://www.ruseller.com" target="_balnk">CSS3</a>
									</li><li><a href="http://www.ruseller.com" target="_balnk">jQuery</a></li>
								</ul>
							</li>
							<li><a href="http://www.ruseller.com" target="_balnk">Контакты</a></li>
						</ul>
					</nav>
		</div>

С этим читают