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

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

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

JQuery Vertical Mega Menu Widget

Хоть в названии плагина и числится слово “мега”, с ним вы не сможете создать чего-то невозможного. Но простое вертикальное меню с собственными категориями любого плана при помощи модуля добавить на сайт вполне реально. Большой плюс JQuery Vertical Mega Menu Widget в том, что инструмент распространяется бесплатно. А значит без дополнительных затрат хоть сегодня вы сможете создать качественную менюшку для своего сайта.

JQuery Vertical Mega Menu Widget позволяет создавать виджет, всплывающее меню, вывод на экран которого можно всячески настраивать (меняя анимацию появления, перехода между категориями, вывод и т. д.). В итоге получится что-то похожее на accordion. Стиль его сможете настроить самостоятельно, редактируя классы CSS. И не забудьте во вкладке “Внешний вид” активировать виджет, и разместить его в определенной части сайта – иначе плагин JQuery Vertical Mega Menu Widget не сможет вывести accordion на страницу.

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

• горизонтальное;
• вертикальное широкое;
• вертикальный виджет.

Все три варианта с выходом последней версии плагина могут адаптироваться под мобильные устройства. Модуль совместим с WordPress 3.5+ и работает по простому принципу – настройка не займет много времени. Интегрируется в любую тему, так что ковыряться в CSS и коде шаблона не придется.

JQuery Mega Menu Widget

Еще один плагин из разряда Mega. Модуль JQuery Mega Menu Widget работает с использованием JQuery-библиотек – встраивает JavaScript в HTML. Вы сможете создать виджет, при наведении на который произойдет вывод выпадающих категорий.

JQuery Mega Menu Widget содержит множество настроек:

• Hover/Click – настройка сценария реагирования меню (что будет после нажатия на определенную категорию);
• Определение состава – произвольное количество категорий;
• Оболочка – настройка внешнего облика с открытым кодом CSS, который можно настраивать;
• Animation Effect – анимация появления категорий (можно выбрать скользящий эффект, либо добавить “исчезание”);
• Animation Speed – изменение интенсивности анимационного эффекта;

Также этот Mega плагин позволяет деактивировать анимацию полностью и создать широкоформатное меню, автоматически подстраиваемое под пропорции шаблона. Возможно, это не совсем mega модуль, но скачать его можно бесплатно, и уже через 10-15 минут у вас на сайте появится виджет.

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

• горизонтальное меню с картинками и субменю;
• вертикальное в двух вариациях с разными иконками;
• горизонтальное с иконками;
• с круглыми картинками в категориях;
• меню в виде png-кнопок;

Чтобы добавить выбранное адаптивное меню, вам предстоит внести шорткод структуру шаблона.

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

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

Ozh’ Admin Drop Down Menu

Этот инструмент не сможет добавить пользовательскую менюшку на сайт, но сделает меню для вебмастера. Модуль Ozh’ Admin Drop Down Menu предназначен для тех, кто устал постоянно заходить в панель администрирования WordPress в поисках нужной настройки. Плагин добавит невидимую для посетителей менюшку на страницах, которое можно будет удобно настроить для быстрого доступа к редактированию постов, добавлению медиа, созданию страниц и т. д.

Это флэш-меню. Разработчики не зря называют его динамическим – вертикальное меню работает с особыми анимационными эффектами. В итоге, сможете сделать адаптивное, стильное и удобное flash-menu. Цвет фона, текста, шрифт и размеры каждого элемента настраиваются в специальном разделе администрирования. Удобство менюшки для пользователя в первую очередь связано с возможностью остановить выбор категории во время скролла на страницах – то есть пользователю не придется постоянно открывать меню, если понадобилось прокрутить сайт.

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

Custom Taxonomies Menu Widget

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

JQuery Accordion Menu Widget

Если хотите, чтобы у вас была accordion менюшка на ресурсе, то JQuery Accordion Menu Widget – лучший инструмент, чтобы осуществить эту задумку. Функции плагина JQuery Accordion Menu Widget:

• добавление множества уровней менюшки;
• произвольное число пунктов в accordion;
• настройка перехода в категорию “по клику” либо “при наведении”;
• встраивается в шаблон при помощи шорткодов;
• возможность вывести один или несколько уровней менюшки accordion одновременно;
• плагин JQuery Accordion Menu Widget может использовать куки-файлы пользователей, чтобы сохранять свое открытое/закрытое положение при переходе на страницы;
• автоматическое закрытие меню accordion через секунду после удаления курсора с навигационной панели;
• есть настройка отображения количества подпунктов в родительском меню;
• можно настраивать и активировать классы CSS;
• скорость анимации настраивается.

С последним пунктом будьте осторожны – низкая скорость анимации может уменьшить юзабилити инструмента.

Responsive Select Menu

Респектабельное и стильное меню. Удовлетворит потребности любого сайта, и быстро станет его украшением. А самое главное – Responsive Select Menu можно скачать бесплатно. Вывод менюшки можно будет организовать в любом положении: вертикальное, горизонтальное или в качестве виджета. Это полноценное адаптивное menu, в котором можно создать множество уровней разных форматов. Вы сможете добавить в менюшку кликабельные списки с описаниями подкатегорий, и даже встроить Google Maps с формами для регистрации! Стиль CSS полностью настраивается. Это не скучное стандартное меню, а инновационное и необыкновенное дополнение для вашего проекта!

JQuery Slick Menu Widget

Виджет, который размещается в любой части сайта. Вы получите стильное и аккуратное меню, вывод которого удобно настраивается при помощи различных типов анимации. Модуль JQuery Slick Menu Widget удобен тем, что с ним можно сделать адаптивное меню, которое будет следовать за пользователем, и содержание его может быть произвольное (от перечня главных рубрик портала до списка ссылок на группы социальных сетей). Инструмент предполагает настройку разных стилей CSS – в арсенале имеются 12 готовых вариантов дизайна и возможность самостоятельно их изменить. Вывод менюшки также настраивается, как и ее положение (вертикальное, динамичное, статичное и т. д.).

Fading Menu Plugin

Большинство указанных в обзоре плагинов являются бесплатными. Но Fading Menu Plugin – платный инструмент, и он заслуживает того, чтобы за его использование заплатили. С ним вы сможете добавить на сайт произвольное меню, которое будет закреплено сверху страницы. На первый взгляд кажется, что это мелочная функция. Но на деле оказывается, что закрепление менюшки в верхней позиции может значительно уменьшить число “отказов” (одного из параметров пользовательского поведения), а это позитивно повлияет на ваши позиции в поисковике.

Настройка Fading Menu Plugin не отличается особой сложностью – вывод и содержание менюшки сможете настроить в стандартной панели WordPress. В процессе настройки у вас будет выбор: добавить виджет в верхней панели или снизу. Рекомендуется добавлять сверху – в этой части сайта пользователи обычно проявляют большую активность. Не забудьте также настроить стилевые параметры. Важно не сделать плагин ярким и перенасыщенным, а удачно его совместить с текущим шаблоном Вордпресс вашего сайта. Если есть время и возможности, можно добавить собственные иконки для менюшки. И обязательно внесите в разделы модуля категории, в которой периодически будут появляться новые записи – Fading Menu Plugin позволяет отображать новые уведомления в шапке меню.

UberMenu

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

Вывод

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

Плиточная раскладка является одной из самых популярных. Не знаете, что это такое? Вспомните о Pinterest, Windows’ Metro и т.д. Если объяснять это на словах, то представьте сумасшедший эффект соединения блоков разных размеров в эстетически упорядоченном, часто шахматном порядке.

Плиточная раскладка не является чем-то новым. Так почему мы говорим о ней сейчас? Ведь есть же отличные решения для получения эффекта плиточной раскладки? Есть. Но можем ли мы продвинуть решение на чистом CSS чуть дальше? Можем ли мы использовать флексбокс для достижения требуемого эффекта?

Простейшая плитка

Начнем с базовой раскладки. Представьте примерно такую структуру DOM для нашей раскладки:

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

Что такое многоколоночная раскладка и флексбокс?

Пробуем многоколоночную раскладку

В CSS для многоколоночных макетов есть свойства column-count и column-gap . Это позволяет сравнительно легко сделать базовую плиточную раскладку. Учтите, что в раскладке важно использовать свойство break-inside на блоках с контентом. Это помешает разбитию и распределению содержимого блоков между колонками. CSS для этой стартовой точки будет следующий:

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

Пробуем флексбокс

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

С первой попытки я собирался имитировать колоночную раскладку при помощи flex-direction: column . Проблема с использованием значения column заключается в том, что вам надо задать высоту раскладки, перед тем как оборачивать столбцы. Но это неидеальный вариант, так как любое переполнение ведет к горизонтальному скроллингу. Так что вы или смиритесь со скроллингом, или у вас должна быть возможность регулировать высоту раскладки, в таком случае вы сможете красиво все располагать. Если вы работаете с динамическим содержимым, размер которого варьируется, вам придется постоянно заниматься выравниванием при его добавлении. Это явно не соответствует смыслу флексбокса.

Рассмотрим следующий пример:

Masonry-layout { display: flex; flex-direction: column; flex-wrap: wrap; padding: 10px; height: 100vw; } .masonry-layout__panel { display: flex; flex: 1 1 auto; width: 33.3%; margin-bottom: 10px; border-radius: 10px; }

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

Добавление колонок в раскладку дает вам дополнительный контроль над раскладкой. Однако вам придется немного подумать, как и где вы расположите отдельные фрагменты содержимого. В действии этот подход можно увидеть .

Многоколоночная раскладка выигрывает

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

Masonry-layout { column-count: 3; column-gap: 0; } .masonry-layout__panel { break-inside: avoid; padding: 5px; } .masonry-layout__panel-content { padding: 10px; border-radius: 10px; }

Рассмотрим этот код. Наши панели в идеале также должны быть блоками. Поэтому мы проведем небольшой рефакторинг.

Masonry-layout { column-count: 3; column-gap: 0; } .masonry-layout-panel { break-inside: avoid; padding: 5px; } .masonry-layout-panel__content { padding: 10px; border-radius: 10px; }

У нашей простейшей плитки по прежнему есть потенциал. Мы сделаем ее круче и флексбокс поможет нам в этом.

Вложенные кластеры с контентом

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

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

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

Masonry-layout-panel--small { height: 200px; } .masonry-layout-panel--medium { height: 300px; } .masonry-layout-panel--large { height: 400px; }

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

Поток кластеров может быть как горизонтальным, так и вертикальным. Если поток кластера горизонтальный, мы задаем колонки с сегментами, обтекающими вертикально и наоборот. Это изменяется с помощью flex-direction . Сегменты кластера увеличиваются/уменьшаются, заполняя пустое пространство, а кластеры работают как блоки.

Если нам нужен более тонкий контроль над сегментами кластеров, мы можем создать служебные классы, чтобы задать в процентах flex-basis . Нам не нужен служебный класс “полный размер”, так как мы можем просто включить один элемент в контейнер и он займет всю ширину или высоту. Для “половинки” мы зададим flex-basis: 50% . Достоинством такой имплементации будет возможность поместить любое количество колонок или рядов соответственно.

Как может выглядеть код? Как вариант:

Masonry-layout-cluster { display: flex; padding: 0; } .masonry-layout-cluster--vertical { flex-direction: row; } .masonry-layout-cluster--horizontal { flex-direction: column; } .masonry-layout-cluster__segment { display: flex; flex: 1 1 auto; } .masonry-layout-cluster__segment--row { flex-direction: row; } .masonry-layout-cluster__segment--column { flex-direction: column; } .masonry-layout-cluster__segment--half { flex-basis: 50%; } .masonry-layout-cluster__segment--quarter { flex-basis: 25%; }

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

Темизация и панели с изображениями

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

Masonry-layout-panel__content { border-radius: 10px; overflow: hidden; padding: 10px; }

Как насчет изображений? Достаточно часто требуется вывести изображения как отдельные панели в плитке. Если мы поместим изображение внутри панели, на него будут влиять пэддинги, заданные для нашей темы. Так почему бы нам не использовать для изображения класс masonry-layout__panel-content с модификатором?

Это почти то, что надо. Надо добавить немного темизации, специфичной для изображений и будет самое то.

Masonry-layout-panel__content--img { max-width: 100%; padding: 0; }

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

Анимация панелей при наведении

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

Masonry-layout-flip--medium { height: 300px; }

Ну и новый блок для переворачивающихся карт:

Here is a flpped image…

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

/* CSS FOR FLIPPER PANELS */ .masonry-layout-flip { perspective: 1000; } .masonry-layout-flip:hover .masonry-layout-flip__content { transform: rotateY(180deg); } .masonry-layout-flip--md { height: 300px; } .masonry-layout-flip__panel { backface-visibility: hidden; border-radius: 10px; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } .masonry-layout-flip__panel--front { transform: rotateY(0deg); z-index: 2; } .masonry-layout-flip__panel--back { transform: rotateY(180deg); } .masonry-layout-flip__content { height: 100%; overflow: visible; position: relative; transform-style: preserve-3d; transition: 0.25s; }

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

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

Добавляем отзывчивость

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

/* COLUMN CHANGES */ .masonry-layout { column-count: 1; column-gap: 0; } @media (min-width: 768px) { .masonry-layout { column-count: 2; } } @media (min-width: 1200px) { .masonry-layout { column-count: 3; } }

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

/* CLUSTER FLOW IGNORED AT LOWER VIEWPORT */ @media (min-width: 768px) { .masonry-layout-cluster__segment--row { flex-direction: row; } } @media (min-width: 768px) { .masonry-layout-cluster--vertical { flex-direction: row; } } /* FLEX-BASIS IGNORED AT LOWER VIEWPORT */ @media (min-width: 768px) { .masonry-layout-cluster__segment--half { flex-basis: 50%; } .masonry-layout-cluster__segment--quarter { flex-basis: 25%; } }

Демонстрацию этого кода можно посмотреть .

Используем препроцессор

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

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

/* MASONRY CSS */ .ml { box-sizing: border-box; column-count: 1; column-gap: 0; position: relative; } .ml * { box-sizing: border-box; } @media (min-width: 768px) { .ml { column-count: 2; } } @media (min-width: 1200px) { .ml { column-count: 3; } } .ml-pnl { margin: 0; padding: 5px; } @media (min-width: 768px) { .ml-pnl { break-inside: avoid; } } .ml-pnl__cntnt { border-radius: 10px; overflow: hidden; padding: 10px; width: 100%; } .ml-pnl__cntnt--img { max-width: 100%; padding: 0; } .ml-flp { perspective: 1000; } .ml-flp:hover .ml-flp__cntnt { transform: rotateY(180deg); } .ml-flp--sm { height: 200px; } .ml-flp--md { height: 300px; } .ml-flp--lg { height: 400px; } .ml-flp__pnl { backface-visibility: hidden; border-radius: 10px; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } .ml-flp__pnl--frnt { transform: rotateY(0deg); z-index: 2; } .ml-flp__pnl--bck { transform: rotateY(180deg); } .ml-flp__cntnt { height: 100%; overflow: visible; position: relative; transform-style: preserve-3d; transition: 0.25s; } .ml-clstr { display: flex; padding: 0; } .ml-clstr--vrt { flex-direction: column; } @media (min-width: 768px) { .ml-clstr--vrt { flex-direction: row; } } .ml-clstr--hrz { flex-direction: column; } .ml-clstr__sgmnt { display: flex; overflow: hidden; flex: 1 1 auto; } .ml-clstr__sgmnt--rw { display: flex; flex-direction: column; } @media (min-width: 768px) { .ml-clstr__sgmnt--rw { flex-direction: row; } } .ml-clstr__sgmnt--clmn { flex-direction: column; } @media (min-width: 768px) { .ml-clstr__sgmnt--hlf { flex-basis: 50%; } .ml-clstr__sgmnt--qrt { flex-basis: 25%; } }

Заключение

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

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

Одним из основных отличий Windows 10, заметных для пользователей, от предыдущих версий, стало изменение интерфейса операционной системы. Мы расскажем, как производится настройка меню Пуск в Windows 10 под себя для комфортной работы с системой.

Стиль Metro: новая реализация

Графический интерфейс ОС Windows, получивший название Metro, пришел на смену Aero еще несколько лет назад, когда были представлены мобильные ОС Microsoft и десктопная Windows 8. Вместо глянцевых пиктограмм компания представила новый формат меню, состоящего из прямоугольных плиток.

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

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

Меню Пуск возвращается

Меню пуск на протяжении долгих лет было неотъемлемой частью интерфейса ОС Windows, но в 2012 году от его использования было решено отказаться в угоду рабочему столу Metro. Не всех устроило такое нововведение, и в свежей версии своей ОС Microsoft решили вернуть его, изрядно доработав.

Споров на тему, нужно ли меню Пуск в 10 версии Windows, было немало, но большинство пользователей высказывалось за необходимость возврата этого элемента интерфейса. Неизвестно, прислушались ли в Microsoft к мнению пользователей, или руководствовались эргономикой, но, так или иначе, доработанное меню Пуск вернулось.

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

Настройка плиточного интерфейса в Пуск

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

Функциональность живых плиток в новой ОС осталась на уровне Windows 10, видимых нововведений в Microsoft не вносили. Чтобы настроить под себя плитки, достаточно просто нажать правой клавишей мыши по значку. Можно редактировать размер, цвет, включить ил выключить анимацию, отправить значок на панель задач или удалить пиктограмму из «Пуска».

Добавление и удаление новых плиток

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

Аналогичные операции нужно выполнить и для удаления плитки, только выбирать нужно пункт «Открепить от начального экрана».

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

Настройка размера

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

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

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

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

Запрет обновления плиток

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

Чтобы сделать это, кликните правой кнопкой по плитке и во всплывающем меню выберите пред последний пункт «Отключить живые плитки».

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

Настройка расцветки меню Пуск

Фон подложки в Windows 10 можно изменить так же, как и цвет отдельных плиток. Для этого нажмите ПКМ в любом месте, не занятом иконкой и выберите пункт меню «Персонализация».

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

Закрепление ярлыка программы в начальном экране меню Пуск

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

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

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

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

Добавление специальных элементов

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

Возврат меню Пуск из Windows 7

Не всем пришелся по душе обновленный интерфейс Windows 10. Одни давно привыкли к старому облику ОС, другим просто не нравятся плиточные элементы «Пуска». На этот случай разработчики предусмотрели возможность возврата меню к классическому облику, знакомому всем по Windows 7. Настроить «Пуск» можно так, что внешне он не будет отличаться от позапрошлой версии ОС от Microsoft.

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

Возврат плиточного меню Metro

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

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

Что нужно знать перед обновлением до Windows 10

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

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

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

Так что, устанавливая новую версию ОС, следует знать о ее особенностях и принять на себя всю ответственность за ее нестабильную работу или распространение сведений о пользователе.

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

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

Хороший веб-сайт не может обойтись без навигации по следующим причинам:

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

Мы разделили отобранные примеры дизайна меню на три группы: горизонтальные, вертикальные и раскрывающиеся (выпадающие). Однако на сайте можно одновременно использовать и несколько видов меню - все зависит от того, насколько разветвленная у него структура.

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

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

В виде ссылок с тем или иным оформлением:

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

То же самое касается пункта, на который наведен курсор. В этом примере он на Notes:

Использование иконок также распространено. Кроме того, иногда вертикальное меню можно минимизировать и отображать только иконки :

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

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

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

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

Или же полный набор разделов и подразделов:

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

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

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

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

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

Упоминания также заслуживает инновационный дизайн для меню сайтов, который пока еще не получил широкого распространения, но вызывает интерес. Например, элементы навигации на сайте компании Unlabel расположены по все четыре стороны от основного содержимого страницы:

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

Идея выезжающего меню интересно реализована в теме Wordie для Wordpress:

На сайте веб-приложения Issuefly реализована возможность переключаться между уже посещенными разделами, как если бы они были открытыми окнами в операционной системе, используя меню-гамбургер:

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

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