Line Menu Icon… Это на самом деле меню


Оглавление (нажмите, чтобы открыть):

PaperLaunch — Альтернативное боковое меню приложений

Как-то я искал набор иконок (icon pack) в стиле рисунков на листах бумаги в клеточку. Когда-то где-то видел такие иконки, а найти не могу. На глаза попало приложение, ошибочно принятое за такой набор иконок, но на самом деле оказавшееся альтернативой для меню приложений. Поигрался я с ним немного, но классическое меню приложений и иконки на рабочем столе для меня привычней. Хотя кому-то, может, и придётся в тему. Почитайте, посмотрите — не навязываю.

Итак, приложение PaperLaunch. Боковое меню приложений.

Причин установки данного приложения на ваш смартфон может быть (по моему скромному мнению) три:

Бонусом к этим трём причинам идёт возможность создания древовидной структуры ваших приложений.

Мне вот, признаюсь честно, стало любопытно. Но PaperLaunch — это не GravityBox и, тем более, не USSDDualWidget Pro, поэтому любопытство своё я удовлетворил за три минуты. Потом пару недель изредка пользовался приложением. Теперь, наверное, удалю.

Как оно работает

А как оно работает — вы сможете узнать из следующего скринкаста.

То есть вы касаетесь определённой части экрана (левый или правый край) и этим самым заставляете визуализироваться вершину айсберга — узкую вертикальную панель с надписью «PaperLaunch» и логотипом приложения. Из-за этой панели выглядывают квадратики со значками приложений, выбранных нами на этапе настройки PaperLaunch.

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

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

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

И опять повторяю предыдущие действия: провожу пальцем до места напротив значка необходимого приложения, допустим GPS Test, и передвигаю палец на него. Значок приложения опять-таки разворачивается в панель.

Всё, теперь можно убирать палец от экрана. Запустится выбранное приложение (GPS Test в моём случае).

Если палец не убирать от экрана, а вернуть его обратно к краю экрана, то все панельки свернутся и останется основная панель с выглядывающими из-за неё квадратиками-значками. Сворачивать не обязательно все панельки, можно только последнюю, то есть перейти обратно в папку «Сусанины» и выбрать в ней другое приложение.

Вот так вот и происходит запуск любого установленного в системе приложения. Единственное условие: предварительно это приложение необходимо добавить в меню PaperLaunch. Для этого открываем само приложение. При первоначальном запуске ничего особенного (и не особенного тоже) мы не увидим. Будет только в верхней части экрана наименование приложения и кнопка настроек на синей горизонтальной панели. А внизу экрана — круглая кнопка со знаком сложения. Да нет, конечно же не сложения, а добавления. Именно этой кнопкой можно добавлять новые элементы: ярлыки приложений, ярлыки действий и папки.

Нажимаем на кнопку «Добавить» и делаем несложный выбор: App или Folder. При выборе App (приложения) придётся сделать ещё один выбор среди приложений или действий.

Скромный чёрно-белый выбор
По умолчанию отображаются только пользовательские приложения, но всегда можно поставить чекбокс «Show all»
«Шорткаты» в приложении PaperLaunch
Системные «шорткаты» в Android 7.1.1

Если же ваш выбор пал всё-таки на Folder, то далее необходимо дать создаваемой папке название (не оставлять же New Folder по умолчанию) и опять же добавить либо приложение, либо Shortcuts. А можно снова добавить папку и так до бесконечности, а на самом деле — не более десяти раз. Хотя и больше шести Paper-панелек на экране моего смартфона просто не поместится.

В итоге у меня получилась следующая структура. Папок в папках у меня нет, хватило двух уровней.

Ярлыки приложений изменить нельзя (ни значки, ни названия), а вот папки слегка поддаются редактированию (но всего лишь в части названия). Зато каждый элемент — ярлык или папку — можно перетащить в другое место, то есть изменить их порядок. Мне, например, удобнее, когда телефон находится в самом низу.

Любой элемент можно удалить, нажав на пиктограмму корзины.

Переходим к настройкам, раз уж оказалось, что без них никак. У меня параметры настроек зафиксированы вот в таком виде:

Параметр «Чувствительность» расширяет область экрана, отвечающую за вызов Paper-меню. В окне настроек она отображается вертикальной полосой синего цвета. Ширина этой полосы на четверти чувствительности составляет около 2-3 мм. На максимуме — около сантиметра.

Бегунки «Высота» и «Позиция» определяют вертикальный размер и позицию по отношению «верх/низ» той же самой области экрана для вызова Paper-панелек.

Параметр «Vibrate on activation» понуждает смартфон вибрировать при каждой активации Paper-меню.

Параметр «Show background» включает отображение практически прозрачного серого фона для Paper-меню.

Область экрана для вызова Paper-меню можно располагать как по правой стороне экрана (мне удобно именно так), так и по левой. За это действо отвечает параметр «Activation side».

Последний параметр — «Alignment» — задаёт выравнивание значков приложений и папок по вертикали (по центру удобнее всего, но это зависит от телефона и рук, его держащих).

Вот, собственно, и всё. Настроек минимум, только самые очевидные. А я бы ещё в приложение добавил долю возможностей по оформлению и кастомизации Paper-меню и Paper-панелек, а также переключатель «Вкл./Выкл.». А ещё — возможность размещения области экрана для активации Paper-меню на нижней стороне экрана. Или даже вызов Paper-меню заданным жестом. Но можно ли надеяться на какие-то доработки PaperLaunch — я не знаю. Последняя (текущая) версия датируется ноябрём 2020. В принципе, ещё есть надежда, но слабая.

Как-то и претензий набралось у меня к рассматриваемой софтинке, и вообще я её удалять собирался, да и какой-то особой надобности в ней у меня нет, а вот замечаю за собой, что время от времени «на автомате» запускаю приложения из Paper-меню. Так что пусть пока будет.

Рекомендовать? Рекомендую делать утреннюю зарядку (не забываем про здоровье!) и читать Helpix (но не в полночь, потому как спать тоже надо).

Evgeny

Используемое автором устройство: BQ Aquaris U Plus

Menu Icons русская версия


Menu Icons это замечательный плагин, который позволит вам встроить иконки в ваше меню, выводимое функцией wp_nav_menu («Внешний вид\Меню«). В качестве иконок можно использовать встроенные в плагин иконочные шрифты или загрузить свои собственные изображения. Плагин корректно встраивает иконки в меню любой темы и ему совсем неважно, каким образом это меню выводится: горизонтально, вертикально, с выпадающими меню или нет. Несколько минут настройки меню, и ваш сайт станет намного красивее.

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1 Распаковываем архив.

2 Копируем папку menu-icons в /wp-content/plugins/.

3 Заходим в админку блога на вкладку «Плагины» и активируем плагин.

Плагин настраивается во «Внешнем виде\Меню» в отдельном виджете:

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

На самом деле, эти настройки вовсе необязательно менять – при выборе каждой иконки будет доступна ее отдельная настройка. Так сказать, в индивидуальном порядке. Я вообще изначально после установки плагина этот виджет не заметил и прекрасно обошелся без каких-либо изменений в нем. Третья вкладка виджета называется «Дополнения«, в которой есть только ссылки на доступные плагины-дополнения с наборами иконок:

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

С виджетом плагина разобрались, как устанавливать иконки для меню? Очень просто – раскройте любое меню и увидите опцию выбора иконки:

При клике на ссылку «Выбрать» откроется окно плагина с выбором иконки:

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

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

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

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

1 Twenty Ten

2 Twenty Eleven

3 Twenty Thirteen

4 Twenty Fourteen.

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

В свое время я рассматривал плагин Category and Page Icons, который тоже встраивает иконки, но делает он это для уже устаревших функций вывода рубрик и страниц. Да и, честно говоря, делает он это плохо – постоянные конфликты со стилями тем для него обычное дело.

Menu Icons в этом плане просто идеальный плагин – никаких конфликтов со стилями тем. Я, конечно, опробовал плагин не на всех темах, но, корректная работа плагина со всеми дефолтными темами уже о многом говорит.

Menu Icons by ThemeIsle
Автор плагина: ThemeIsle
Рассматриваемая версия: 0.5.1 от 11.09.2014
Текущая версия: 0.11.5 от 23.05.2020
Совместимость с версией WordPress: 4.3 и выше
Активных установок плагина: 200 000+
Скачать русский плагин версии 0.5.1
Скачать плагин версии 0.11.5 (всего скачено 1 092 129 раз)

Понравился пост? Подпишись на обновления по RSS или Twitter !

Как сделать — значок меню

Узнайте, как создать значок меню с помощью CSS.

Создание значка меню

Если вы не используете библиотеку значков, вы можете создать базовый значок меню с помощью CSS:

Анимированный значок меню (нажмите на него):

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

Пример как работает


width height свойство and определяет ширину и высоту каждого бара.

Мы добавили черный background-color , а верхняя и Нижняя margin используется для создания некоторого расстояния между каждым баром.

Анимированный значок

Используйте CSS и JavaScript, чтобы изменить значок меню на «Отмена/удалить» значок, когда он нажал на:

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

.container <
display: inline-block;
cursor: pointer;
>

.bar1, .bar2, .bar3 <
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
>

/* Rotate first bar */
.change .bar1 <
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
>

/* Fade out the second bar */
.change .bar2 <
opacity: 0;
>

/* Rotate last bar */
.change .bar3 <
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
>

Шаг 3) добавить JavaScript:

Пример

Пример того, как это работает

HTML & CSS: мы используем те же стили, что и раньше, только на этот раз, мы обернуть элемент контейнера вокруг каждого элемента

Мастер Йода рекомендует:  MySQL хранимые процедуры

Элемент container используется для отображения символа указателя, когда пользователь перемещает указатель мыши на Div (Bars). При нажатии на него будет выполнена функция JavaScript, которая добавит в него новое имя класса, которое изменит стили каждой горизонтальной полосы: первый и последний бар преобразуется и поворачивается на букву «x». Бар в середине исчезает и становится невидимым.

Правила использования иконок для меню типа «аккордеон»

26 марта 2020 | Опубликовано в статьюшечки | 3 Комментариев »

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

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

Расположение иконки

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

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

Располагайте иконки слева от ярлыков

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

Выбор иконки

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

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

Выбирайте иконку с плюсиком

Значок плюсика делает меню более ожидаемым и привлекательным для нажатия. То есть человек понимает, что надо сюда нажать, чтобы открыть меню. Еще одно исследование «аккордеонов» подтверждает, что пользователи чаще нажимают иконки с плюсиками, чем те, что со стрелочками.

Это имеет смысл еще и потому, что «плюсик» в математике означает добавление. Добавляя, мы увеличиваем количество, размер или степень, а открытие меню типа «аккордион» это, собственно, и есть увеличивание количества опций данного меню.

Сворачивание меню


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

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

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

Стандарт для меню типа «аккордеон»

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

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

Меню. ui-menu

Компонент меню умеет строить список ссылок любого уровня вложенности и расположения на странице.

Меню очень «широкий» компонент, у которого есть множество настроек.

Ключевым обьектом настройки меню является параметр config . В значении для этого параметра указывается обьект с настройками уровней меню.

Пример такого обьекта:

Для меню указывается либо настройка по-умолчанию, либо настройка для нужных уровней. К примеру это меню будет с горизонтальным первым уровнем без иконок, если у него будет второй уровень, то он будет выпадающим вертикальным. Для остальных уровней будет настройка «выпадающий вправо с иконками ‘стрелка вправо’ при открытии, и ‘стрелка влево’ при закрытии». Основные ключи для параметра config . — уровень. Просто ставится номер уровня меню, или описывается значение по-умолчанию default для всех уровней.

В каждом уровне есть свои настройки: * direction — направление раскладки уровня меню — принимает значения vertical или horizontal . * type — тип уровня меню, принимает значения plain — обычное меню в одну строку (по-умолчанию), collapse — раскрывающееся по клику, drop — раскрывающееся при наведении мышки. * position — где откроется уровень меню, относительно родителя. Принимает значения left , right , top , bottom . * icons — Иконки для пунктов меню. принимают названия иконок из набора fontAwesome .

Для компонента меню также есть и другие параметры: * on-line — Будет ли меню в одну строку, и оставшаяся часть будет прятаться под выпадающим списком, или она будет раскрыта полностью. Работает только для горизонтального меню. Принимает значения true и false . * more-caption — Название выпадающего пункта, если on-line — true . * hide-icon — Если true , то иконки меню будут скрыты. * vr-gutter — вертикальный отступ меню. По-умолчанию 0. * hr-gutter — горизонтальный отступ меню. По-умолчанию 0.

Line Menu Icon… That Is A Menu

Easily manage projects with monday.com

I had a dumb little idea the other night so I just coded it up (as you do). You know those little icons that have come represent navigation? We’ve called them Three Line Menu icons around here, but otherwise known as Navicon (clever) or Hamburger (dumb). The point of that icon is that it looks like a little menu, so hopefully it’s obvious you click it to reveal a real menu. But what if that icon wasn’t an icon at all, but the actual menu, just shrunken?

The Concept

Yep, it’s a little cheezy.

The trick is very easy though. It largely relies on CSS transform and transition, and a few more basics.

The process is essentially:

  1. Design full size view first
  2. Shrink entire thing to icon size with transform: scale(0.X);
  3. Remove unnecessary bits with opacity: 0
  4. When in icon size, only react to clicks on the whole thing.
  5. When clicked, toggle to transform: scale(1) , hidden bits to opacity: 1 , and restore normal clicking ability.

Here’s the design bits:

Changing State

Changing the «state» (expanded or not) of menu you could do in any number of ways. Perhaps the checkbox hack or real easy-like with jQuery:

All we’re doing is changing a class here, which is the way to go for sure.

The CSS

I particularly like Sass when dealing with states because you can nest the states within the same block.

Handling Clicks

The clicking thing is a little funky. We need to make sure that

  • Clicking the icon version simply opens the menu
  • Clicking menu items inside while open work
  • There is a way to close it

We already have the jQuery in place that toggles the class when you click anywhere on the entire element. That can stay just like that. We just need to make sure that if you happen to click exactly one of those those tiny little lines inside the mini icon, you don’t actually go to that link.


All those links are in a

    , so one way to handle that is to use CSS to make that entire thing un-clickable by default (minified), but clickable when in the open state.

While pointer-events is awesome, a noticeable gap in support is IE 10 (11 does support it though). You may instead want to use an additional

Closing It

The way we handle closing is to add a close button:

We wanted to use the × character there as essentially an icon. But that has no meaning when read (or if it does, it’s «multiply»). So we hide that from being read and include a more readable word that is visually hidden (kicked off page with positioning). Standard procedure for using icons.

In our simple example, we don’t even need to bind an event handler directly to this button, because we already have one attached to the entire parent element that toggles that open state. If you click this button, that event will bubble up and fire that event and do the job. That might be weird, so feel free to adjust and bind directly to the element.

Semantics?

While this doesn’t exactly make my skin crawl, we could endless debate about it. (example conversation). It’s meaningless without JS enabled, so should we insert it with JS? Should we have made it an anchor link with an href back to the top of the page? Is still the correct element?

Progressive Enhancement?

While we’re just having fun here, we might consider tackling this via progressive enhancement. That is, start with a menu that is completely functional as markup alone. Then level up all the fancy stuff as support is available.

Fortunately, our markup already mostly in good shape. I do think is the correct element for our close button, since there is no «meaningful href», but it should be inserted with JS since it only has functionality with JS. Very simply, that might look like:

Another concern is that we approached the CSS in such a way that the default state is with the menu closed. And that «closed» state essentially relies on a CSS transform shrinking it. If CSS transforms aren’t supported, the menu will appear open, overlapping content and unable to be closed (bad). If our menu didn’t overlap content, we might be OK, but since it does we would be better off only applying our fancy styling should be browser support our fancy CSS needs.

There are countless ways to approach this, but a fairly easy and standard way is to detect support of the relevant technologies via Modernizr. If what we need is there, there will be a class name telling us that on the element, and we can use that to apply the fancy.

IE 8 doesn’t support CSS transforms, so:

There I go again, turning a dumb little demo into a lesson. Here’s the final deal:

Other Ideas?

Perhaps this exact idea is cheezytown, but I do like the idea of the thing you click on being a part of what is revealed. It’s kind of like how animations can be used to make an action more clear, having a single point of focus during those animations can also help. For instance:

See the Pen owgLF by Chris Coyier (@chriscoyier) on CodePen

Скрытое меню на чистом CSS

Дата публикации: 2014-09-05

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

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

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

Вот демо-пример на сайте CodePen, показывающий конечный результат:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Начнем с HTML

Разметка для скрытого меню будет немного отличаться от варианта для стандартного меню навигации. Вместо того чтобы поместить меню внутри шапки сайта (header), мы поместим его сразу после открывающего тега body. Базовая структура выглядит так:

Мастер Йода рекомендует:  Naver - самый популярный поисковик Южной Кореи

Как видите, разметка нашего сайта состоит из трех основных элементов: навигация, чекбокс (checkbox) и парный тег label, а также непосредственно контент сайта. Здесь следует отметить несколько моментов:

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

Триггером для выдвижения нашего меню послужит тег input с типом checkbox и тег label. Обычно тег label располагается перед тегом input или тег input оборачивается тегом label. Но в данном случае тег input должен идти непосредственно перед тегом label. И далее, при добавлении CSS-стилей, мы увидим почему.

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

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

CSS-стили для пунктов меню


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

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

CSS-стили для «обертки» сайта

Для начала, давайте убедимся в том, что содержимое сайта полностью скрывает наше меню. На этом этапе можно добавить несколько абзацев с «lorem ipsum» к нашему элементу с классом .site-wrap, если вы еще не добавили никакого контента.

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

CSS-стили для триггера меню

Следующим шагом будет добавление стилей для изменения внешнего вида триггера меню с обычного чекбокса на классическую иконку «гамбургер», которую мы все знаем и любим. Сначала, давайте спрячем сам чекбокс.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Примечание редактора: изначально, в данном коде использовалось свойство display: block вместе с указанием нулевого значения для ширины и высоты самого чекбокса, чтобы сделать его невидимым, но доступным (активным). Но оказалось, что такое сочетание стилей в операционной системе iOS приводило к сбою в работе браузера и его закрытию, каждый раз, когда меню открывалось. Я изменил эту технику и стал использовать вместо этого свойство clip, которое, похоже, имеет такой же уровень доступности.

Итак, мы прячем чекбокс, используя свойство clip, которое требует применения свойства position: absolute для заданного элемента. Теперь мы задаем стили для элемента label:

Прежде всего, мы задаем свойство position: fixed, чтобы элемент оставался на прежнем месте при прокрутке страницы пользователем. Свойства top и left определяют, как далеко от края окна просмотра будет находиться иконка. Мы также должны убедиться в том, что значение для свойства z-index у триггера выше хотя бы на единицу, чем значение этого свойства для элемента с классом .site-wrap. Затем, мы добавляем еще стилей для того, чтобы сделать из элемента label иконку «гамбургер».

Я использовал в качестве фонового изображения встроенный элемент SVG, но вы можете использовать любую другую иконку, включая использование псевдо-элементов :before и :after, чтобы переделать иконку «гамбургер» на чистом CSS. Обратите внимание, что я также добавил свойство cursor: pointer;, чтобы визуально выделить иконку при наведении.

CSS-стили, чтобы триггер стал активным

Теперь, когда задано оформление для нашего меню, «обертки» сайта и триггера, давайте добавим еще несколько строчек CSS, чтобы все окончательно заработало.

Вторая часть из вышеприведенного блока со стилями гарантирует нам то, что «обертка» сайта вместе с содержимым будет отодвинута на 200 пикселей. Я также добавил тень (свойство box-shadow) для «обертки» сайта, что придаст дополнительное ощущение того, что она находится сверху меню.

Первый селектор (.nav-trigger:checked + label) контролирует расположение триггера при открытии меню. Вам нужно будет прибавить число, которое мы использовали ранее для label[for=»nav-trigger»], к тому значению, которое отвечает за то, на какое расстояние «обертка» сайта будет отодвигаться. В данном случае это: 15px + 200px = 215px.

Вот когда становится важным порядок следования элементов триггера в коде. Второй селектор использует символ

для управления родственными элементами, чтобы указать на элемент с классом .site-wrap, когда элемент с классом .nav-trigger будет активным. Порядок следования в коде тега input с типом checkbox здесь не так важен.

Однако, мы должны указать и на элемент с классом .site-wrap и на наш тег label, основываясь на том, будет наш чекбокс активным или нет. Для этого, мы используем + (селектор соседних элементов), чтобы указать на элемент label, который следует за активным чекбоксом. Если бы мы сначала указали тег label, тогда у нас бы не было никакой возможности передвигать его вместе с «оберткой» сайта при активации триггера.

В качестве завершающего штриха мы можем добавить CSS-переход (transition) и для триггера и для «обертки» сайта, чтобы открытие нашего меню сопровождалось плавной анимацией. Только убедитесь в том, что вы указали в свой варианте необходимые вендорные префиксы или использовали что-то наподобие плагина Autoprefixer.

Идеальное меню навигации: 5 вещей, на которые стоит обратить внимание

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

И чаще всего от разного рода экспериментов страдает навигация веб-ресурса.
В докладе по веб-юзабилити, подготовленным агентством KoMarketing, сообщается, что примерно половина опрошенных в ходе исследования использует навигационное меню при знакомстве с новым веб-ресурсом. При этом 37% респондентов заявили, что неудобная навигация по сайту — это достаточное основание, чтобы покинуть сайт и больше никогда на него не возвращаться.

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

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

Запомните: в списке приоритетов опыт пользователей должен находиться на самом первом месте.

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

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

1. Структура меню

Хотя нет никаких данных в отношении того, какие проблемы с юзабилити испытывали пользователи сайта Portland Trail Blazers, очевидно, что кто-то все же надоумил их нанять агентство Sq1, чтобы оценить свою конверсионную воронку и определить, что потенциально является причиной слабых продаж.

Маркетинговое агентство сфокусировало свое внимание на системе навигации, которая явно не была оптимизирована для работы пользователей. Вот как она выглядела в 2013 году:

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

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


В результате проведенного сплит-теста стало ясно, что новая и улучшенная структура меню привела к увеличению выручки на 62.9%. Навигация сайта Trail Blazers с тех пор претерпела несколько изменений, но непрозрачный фон и ее вертикальная ориентация сохранились. Вот как это меню выглядит сегодня:

2. Заголовки меню

Когда перед дизайнерами сайта Formstack встала задача разработки навигационного меню, сначала они постарались дать ответ на вопросы типа:

1. Какого рода контент должен быть отображен в меню?
2. Как он должен быть структурирован?
3. Какие страницы должны быть приоритетными в иерархии?

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

Вот как выглядела эта страница в 2013 году:

Разочарованные полученным результатом разработчики решили поменять название «Why Use Us» (Зачем мы нужны) на «How It Works» (Как это работает). Это было то название, придуманное еще до запуска проекта, но в итоге отброшенное. Как вы можете себе представить, они были в шоке от того, как простое изменение названия привело к 50%-ному увеличению числа просмотров страницы и 8%-ному увеличению конверсий.

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

3. Логика меню

В 2014 году люди, ответственные за проект Bizztravel Wintersport, начали замечать, как много действий приходится совершать посетителям сайта, чтобы найти то направление и место проведения отпуска, наиболее им подходящее. Чтобы перейти к нужному региону (всего лишь региону, а не конкретному месту назначения), в среднем требовалось 5 кликов. Авторы сервиса тут же осознали, что это упущение грозит им куда большими проблемами в будущем.

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

При создании усовершенствованной и более интуитивно понятной навигационной системы для сайта были проведены сплит-тестирования. Было выяснено, что новая версия дизайна дала на 21,34% больше конверсий, чем предыдущая.

Как вы можете увидеть, улучшенная навигационная система опирается на более понятные указатели: как, например, флаги стран и другие узнаваемые символы — образуя более интуитивно понятный интерфейс.

4. Скрытые меню

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

Консалтинговое агентство Nielsen Norman Group провело эксперимент, чтобы попытаться выяснить, что именно происходит при использовании скрытого меню в настольных и мобильных версиях веб-сайтов. К сожалению, точной информации о том, какие именно сайты были протестированы, нет, но суть теста понятна сама по себе.

Можете ли вы догадаться, где спрятано меню на этом сайте?

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

Вот что удалось выяснить NMG:

Десктопная версия сайта

1. Посетители использовали скрытое меню в 27% экспериментов.
2. Видимое меню использовалось в 48% случаев.
3. На сайтах со скрытым меню людям приходилось тратить больше времени на то, чтобы понять, где какую информацию искать; в частности, они были на 39% медленнее, чем те, кто работал на сайтах с видимым меню.

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

1. Пользователи использовали скрытые меню в 57% экспериментов.
2. Когда меню было частично видимо (использовать полностью видимое меню не практично на мобильных версиях сайтов), оно использовалось в 86% случаев.
3. Скрытые меню замедляли пользователей на 15% (по сравнению с теми, кто работал с сайтом с видимыми меню).

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

Ниже — хороший пример простого, понятного и видимого меню:

5. Мобильные меню

Как вы можете видеть из приведенного выше примера, мобильные пользователи, вероятно, более знакомы со скрытым меню, чем пользователи настольных компьютеров. Но когда дело доходит до определения того, как создать скрытое меню для мобильной версии сайта, недостаточно полагаться только на пресловутую иконку-гамбургер. Исследования, проведенные агентством Sites for Profit, ответят почему.

Мастер Йода рекомендует:  Аргументы WP_Query авторы, поиск, пароли, права доступа, кэширование и возврат полей

В первом эксперименте была поставлена цель протестировать эффективность дизайна гамбургер-кнопки. Были созданы три версии значка скрытого меню:

1. Базовая модель, которая представляла собой только три горизонтальные полоски.
2. Иконка-гамбургер, состоящая из трех горизонтальных линий, обведенных тонкой линией.
3. Иконка-гамбургер с надписью «МЕНЮ», помещенной внизу.

Было обнаружено, что второй вариант (три полоски в квадратике) показал наибольшее число конверсий. Это объяснялось тем, что такой вариант иконки больше напоминает классическую кнопку, глядя на которую посетители мгновенно понимали, что на нее можно кликнуть.

Во втором эксперименте была поставлена задача проверить, оказывает ли какое-либо влияние на число конверсий слово «Меню», размещенное рядом с иконкой. Были созданы четыре версии значка скрытого меню:

1. Базовым дизайном был выбран победивший в предыдущем эксперименте вариант — три полоски в квадрате.
2. Слово «Меню» вместо иконки.
3. Иконка-гамбургер и слово «Меню», размещенные вместе и обведенные чертой.
4. Слово «Меню», обведенное чертой.

Согласно полученным данным 3 вариант иконки получил большее количество кликов; однако, слово «Меню», заключенное в квадратик, собрало больше конверсий.

Дополнительные советы по дизайну навигационного меню


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

При разработке навигационного меню не упускайте из внимания следующие рекомендации.

Совет 1

Логотип компании всегда должен вести на главную страницу сайта. Согласно уже упомянутому ранее отчету агентства KoMarketing, 36% людей склонны использовать логотип как средство возврата к началу.

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

Совет 2

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

Навигация La Moulade послужит этому отличным примером:

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

Совет 3

Организуйте свое меню на основе приоритета. Эффект порядкового номера (Serial position effect) указывает на то, что страницы, расположенные ближе к началу или концу списка, будут автоматически доминировать в умах пользователей.

Как вы можете видеть на сайте Comedy Central, шоу перечислены не в алфавитном или любом другом логическом порядке, что помогло бы пользователям найти предмет поисков гораздо быстрее. Можно предположить, что «The Daily Show», вероятно, самое популярное шоу — либо сервис хочет привлечь к нему больше внимания — и именно поэтому оно и занимает верхнюю позицию.

Совет 4

Названия меню должны быть лаконичными, но вместе с тем и емкими. Это не то место, где вы можете дать свободу фантазии.

Совет 5

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

На сайте компании Adwyse все представлено наилучшим образом: меню достаточно большое, что все заголовки легко умещаются, они легки для прочтения и клика. Это относится как к системе навигации на десктопной версии сайта:

Так и к мобильной:

Совет 6

Используйте цвет или любой другой hover-эффект, чтобы иметь возможность посредством меню указать посетителям, в какой области сайта они находятся в данный момент. Для этой целей сервис Netflix очень удачно использует свой брендовый красный цвет:

Совет 7

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

Сайт компании Coloured Lines может похвалиться красочным, исполненным при помощи иконок и не исчезающим при проматывании страницы навигационным меню.

Совет 8

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

Десктопный вариант меню:

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

Совет 9

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

Совет 10

Иконки не всегда всем понятны, поэтому старайтесь их не использовать — как в мобильной версии, так и в десктопной. Далеко не всем удается подобрать такие картинки, которые будут понятны и легко узнаваемы. Компании Brit & Co удалось:

Совет 11

Нет ничего плохого в том, чтобы иметь глубокие, многоуровневые меню. Но не следует совмещать их со скрытыми меню. Используйте дизайн мега-меню и навигационные цепочки (breadcrumbs), чтобы облегчить дальнейшую навигацию.

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


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

Совет 12

Если вы хотите использовать креативный вариант навигации при входе на сайт, не стесняйтесь делать это. Поместите главное меню в ожидаемом для пользователей месте.

Многие дизайнеры экспериментируют с popup/slide-формами, поскольку неожиданное движение на экране должно хорошо захватывать внимание посетителей. Но всплывающие окна не должны быть низведены до окон, оповещающих о срочных предложениях и прочем, они должны использоваться в угоду навигации, как в случае с меню сайта Bolden.

Заключение

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

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

Как сделать — значок меню

Узнайте, как создать значок меню с помощью CSS.

Создание значка меню

Если вы не используете библиотеку значков, вы можете создать базовый значок меню с помощью CSS:

Анимированный значок меню (нажмите на него):

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

Пример как работает

width height свойство and определяет ширину и высоту каждого бара.

Мы добавили черный background-color , а верхняя и Нижняя margin используется для создания некоторого расстояния между каждым баром.

Анимированный значок

Используйте CSS и JavaScript, чтобы изменить значок меню на «Отмена/удалить» значок, когда он нажал на:

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

.container <
display: inline-block;
cursor: pointer;
>

.bar1, .bar2, .bar3 <
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
>

/* Rotate first bar */
.change .bar1 <
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
>

/* Fade out the second bar */
.change .bar2 <
opacity: 0;
>

/* Rotate last bar */
.change .bar3 <
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
>

Шаг 3) добавить JavaScript:

Пример

Пример того, как это работает

HTML & CSS: мы используем те же стили, что и раньше, только на этот раз, мы обернуть элемент контейнера вокруг каждого элемента


Элемент container используется для отображения символа указателя, когда пользователь перемещает указатель мыши на Div (Bars). При нажатии на него будет выполнена функция JavaScript, которая добавит в него новое имя класса, которое изменит стили каждой горизонтальной полосы: первый и последний бар преобразуется и поворачивается на букву «x». Бар в середине исчезает и становится невидимым.

Добавление иконок пунктам меню Joomla. Простой и хороший способы.

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

Добавление иконок пунктам меню Joomla. Шаг 1. Выбор размера иконок.

Иконка – это маленькая картинка. Прежде всего, давайте разберемся, какие требования предъявляются к иконкам. Я бы выделил:

  1. Иконка должна подходить по размерам к тексту.
  2. Иконка должна иметь прозрачный фон или фон, аналогичный тому, на котором расположено меню.
  3. Иконка должна иметь небольшой размер файла (не быть «тяжелой»).

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

Вот пример такой иконки:

Для сайта wedal.ru я выберу именно этот размер.

Добавление иконок пунктам меню Joomla. Шаг 2. Поиск подходящих иконок.

Если несколько способов поиска и подбора иконок. Первый – поиск картинок Google.

Как ни странно, работает этот поиск до сих пор очень коряво. Иногда не работает вовсе. На дворе XXI век, а Яндекс и Google так и не научились искать изображения по точному размеру.

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

Не спешите, гуглоненавистники, ругать эту ПС. Яндекс вообще не ищет по точному размеру 🙂 .

Второй способ – поиск сайтов с наборами иконок или поиск прямо наборов. Иконки делятся на бесплатные и коммерческие. Выбор бесплатных иконок достаточно богат.

Если иконок нужно подобрать много, то легко запутаться. Обязательно ведите список сопоставления пунктов меню и иконок.

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Простой способ.

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

Здесь мы просто выбираем изображение для пункта меню и все. Это очень просто, быстро и удобно. Но это далеко не лучший вариант и вот почему. Каждая иконка – это картинка, которая отображается на сайте. Браузер пользователя, когда тот заходит на сайт, загружает все изображения последовательно. Отправляет запрос, получает ответ, загружает изображение. И так до тех пор, пока не загрузит все картинки. Каждый раз такая операция занимает доли секунды, но когда картинок много, все это выливается уже в дополнительные секунды загрузки страниц. Яркий пример того, как не надо делать – сайт joomla-master.org. Разработчик, по всей видимости, добавлял картинки для пунктов меню именно таким способом. Посмотрим, во что это вылилось:

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

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Хороший способ.

Хороший способ заключается в использовании CSS-спрайтов. Их суть в том, что все иконки размещаются на одной картинке, а обращение к ним происходит с помощью CSS. Благодаря такому подходу браузер пользователя загружает только одну картинку и соответственно время загрузки страницы уменьшается. Плохая новость – добавление иконок пунктам меню с помощью CSS-спрайта – задача гораздо более сложная, чем способ, описанный выше. Хорошая новость – в настоящее время существуют сервисы, значительно упрощающие создание спрайтов.

Давайте разберемся, как создать спрайт.

  1. Задаем всем иконкам названия в соответствии с ID пунктов меню, к которым они будут применяться. В менеджере меню в самой правой колонке можно увидеть ID пунктов меню. Иконки должны быть названы «item-ID», например, «item-7»
  2. Добавляем все иконки, которые должны быть в спрайте в один zip-архив.
  3. Загружаем архив на сайте http://ru.spritegen.website-performance.org/ и выставляем настройки, например, как показано ниже:

В результате получаем CSS-код для каждой иконки меню и примерно вот такой спрайт:

  • Загружаем полученный спрайт к себе на сайт и добавляем полученный код в CSS-файл шаблона.
  • Все готово. Бывает, что необходимо еще немного отредактировать отображение картинок спрайта. С этим легко справиться, используя Firebug. Что получилось, можете посмотреть на этом сайте слева.

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

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

    UPD.: Помимо простого и хорошего способа, существует также еще и отличный. О нем написана отдельная статья: Добавление иконочных шрифтов на сайт Joomla.

    Добавить комментарий