Как сделать логотип посередине меню

Добавил пользователь Владимир З.
Обновлено: 02.09.2024

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

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

Шаблоны

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

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

Вот эти три модели:

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

Каждый из этих шаблонов решает проблему пространства различными способами.

Демонстрационный режим показывает все три шаблона, а также различные вариации меню выбора. Ниже мы рассмотрим все эти шаблоны с примерами кода:

Шаблон вверх ориентированного меню

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

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

Разметка очень проста. Внутри элемента заголовка html5 располагается логотип и неупорядоченный список ссылок нашей навигации. Контейнер

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

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

Шаг 2: CSS – стили по умолчанию

Код CSS по умолчанию для заголовка и логотипа также довольно прост. Сам заголовок имеет несколько настроек цвета и отступ от нижнего края. На маленьких экранах навигационная панель будет располагаться под логотипом, и оба этих элемента будут находиться по центру. Логотипу я добавил немного отступа сверху и снизу:

CSS для навигационной панели очень прост. Если вы когда-либо писали код для основного меню, то стили должны показаться вам знакомыми. Одна вещь, которую вы не увидите в этом примере, но которая часто встречается в меню – плавающие ссылки. Так как мы собираемся полностью отцентрировать меню по умолчанию, то используем такой код:

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

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

Шаг 3: Медиа — запросы

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

При разрешении 42.5em ( 680 пикселей ) у нас достаточно места, чтобы уместить все ссылки в одну строку, так что я сократил левый и правый отступы так, чтобы поместить их все в одну строку:

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

Советы

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

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

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

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

Шаблон приоритета

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

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

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

У нас есть 2 задачи, которые мы должны решить:

Показать и скрыть некоторые ссылки по умолчанию;
Показать и скрыть некоторые ссылки по запросу.

Шаг 2: CSS — стили

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

Шаг 3: Медиа — запросы

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

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

Подсказки

Из всех шаблонов данного урока, шаблон приоритетов наиболее редко используемый. Однако в некоторых случаях, это будет лучшим решением. Но оно имеет несколько недостатков. Псевдокласс :target не работает в IE8 и более ранних версиях. Можно заменить :target решением на основе javascript ( именно для работы в IE8 ).

Шаблон меню — выбора

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

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

Введение: Мы начнем с двух html — меню, одно из которых будет в виде несортированного списка, такого же, как и в случае с вверх – ориентированным шаблоном, а другое – в виде выпадающего списка. Мы будем переключаться между этими двумя типами меню через медиа – запросы, в зависимости от наличия пространства. А также прибегнем к помощи javascript для перехода на другую страницу.

Шаг 1: HTML — разметка

Меню в виде несортированного списка не содержит ничего нового. Новым в этом шаблоне является добавление выпадающего списка и соответствующих параметров. Значение атрибута href мы переместим в значение атрибута value элемента option :

Шаг 2: CSS – стили

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

Шаг 3: медиа — запросы

CSS для медиа – запросов очень прост. Так как меню в виде выпадающего списка не занимает много горизонтального пространства, мы можем подвинуть его ( относительно логотипа ) вверх и вправо:

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

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

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

Шаг 4: Немного Javascript

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

Меню выбора JS

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

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

Последний блок кода берет все ссылки и текст из несортированного списка и добавляет его в элемент select :

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

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

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

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

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

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

Итак, мне нужно выравнять элемент по центру.

Горизонтальное выравнивание

Выравнивание по центру строкового или строково-* элемента

Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:

See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

Выравнивание по центру блочного элемента

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

See the Pen Centering Single Block Level Element by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

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

Выравнивание по центру нескольких блочных элементов

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

See the Pen Centering Row of Blocks by Chris Coyier (@chriscoyier) on CodePen.

Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:

See the Pen Centering Blocks on Top of Each Other by Chris Coyier (@chriscoyier) on CodePen.

Вертикальное выравнивание

Вертикальное выравнивание по центру в CSS немного сложнее.

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

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

See the Pen Centering a line with line-height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание многострочного элемента

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

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.

See the Pen Ghost Centering Multi Line Text by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

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

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

See the Pen Center Block with Fixed Height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с неизвестной высотой

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

See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью Flexbox

Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.

See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Горизонтальное и вертикальное выравнивание

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

Выравнивание элемента с фиксированной шириной и высотой

Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

See the Pen Center Block with Fixed Height and Width by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с неизвестной шириной и высотой

Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:

See the Pen Center Block with Unknown Height and Width by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью Flexbox

Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:

See the Pen Center Block with Unknown Height and Width with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

See the Pen Centering with Grid by Chris Coyier (@chriscoyier) on CodePen.

Как сделать горизонтальное меню: разметка и примеры оформления

HTML-разметка и базовые стили для горизонтального меню

HTML разметка для горизонтальной навигации

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

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li . Дальше стилизуем ссылки по своему желанию.

Способ 2. li

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

Способ 3. li

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

Способ 4. ul

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.

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

Логотип справа мешает узнаваемости бренда

Исследование под руководством Нельсона Нормана показало, что пользователи лучше запоминают бренд, если логотип выровнен по левому краю. Показатели запоминания в этом случае были на отметке в 89%.

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

Логотип по центру усложняет навигацию

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

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

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

Лучше всего работают логотипы слева

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

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

Культурные различия

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

Читайте также: