Как сделать хейдер

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

Теперь разберёмся с меню. Чтобы привести его в порядок, нужно:

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

вытянуть пункты меню в линию,

задать отступы между пунктами меню,

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

убрать стандартные точки перед пунктами списка,

Ещё нужно заставить меню занимать всё свободное место и прижимать номер телефона к правому краю страницы.

Изучим макет. Отступы между пунктами меню — 40 пикселей:

Ширина отступов от краёв плашки активного пункта меню до текста внутри неё — 10 пикселей по бокам и по 8 пикселей сверху и снизу. Плашку я специально сделал полупрозрачной, чтобы разглядеть красные цифры разметки:

Расстояние от логотипа до меню — 40 пикселей:

Вытягиваем пункты меню в линию, убираем точки, обнуляем отступы со всех сторон — они нам не нужны. Само меню должно занимать всё доступное место — добавляем flex-grow :

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

Задаём отступы между пунктами меню. Ставим 20 пикселей, а не 40, потому что по 10 с каждой стороны отъедает плашка каждого пункта меню. Нам нужно это учесть, чтобы ничего не дёргалось при переключении. У последнего пункта нужно убрать отступ справа, чтобы он не мешался. Саму плашку будем делать у ссылки:

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

Несомненно, некоторые части веб-страницы или мобильного экрана особенно важны и в этом аспекте.

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

Что такое хедер?

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

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

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

Кроме того, хедер является ключевым элементом навигации всего сайта.

Какие элементы может содержать хедер?

Хедер может включать множество важных элементов ресурса:

Основные элементы фирменного стиля: логотип , название бренда, слоган, корпоративные цвета и т.д.;
Текстовый блок, определяющий тему сайта;
Ссылки на основной контент сайта;
Ссылки на представительства сайта в социальных сетях;
Основная контактная информация (телефон, e-mail);
Переключатель языков сайта;
Поле поиска по сайту;
Форма подписки;

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

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

Центральная часть хедера содержит пустое пространство для визуального разделения его левой и правой части.

Вот еще один пример хедера с немного другим подходом к дизайну хедера. На этот раз композиция построена вокруг центра с логотипом и фирменным наименованием.

Почему хедер настолько важен?

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

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

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

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

Таких моделей всего три:

Диаграмма Гутенберга;
Z-паттерн;
F-паттерн.

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

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

F-паттерн – еще одна модель взаимодействия представленная в исследованиях группы Нильсена Нормана (Nielsen Norman Group) демонстрирует следующее:

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

Это основная причина, по которой дизайн хедера так важен для UI/UX специалистов.

Методы проектирования

Читаемость и визуальная иерархия

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

Гамбургер-меню

Гамбургер-меню – еще одно довольно популярное решение для дизайна функциональности хедера.

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

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

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

Фиксированный хедер

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

Двойное меню

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

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

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

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

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Что такое хедер (шапка) сайта на примере нашей жизни? Например, на голове у строителя мы видим каску, а повара – белый колпак. Голову невесты украшает фата, а мусульманку покрывает хеджаб. У короля на голове мы можем увидеть корону. Говорят, что головной убор влияет на поведение, и именно по нему мы можем часто безошибочно определить, что за человек стоит перед нами.

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

Что следует писать в шапке сайта

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

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

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

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

Почему важно размещать контакты в хедере

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

Шапка сайта и правила HTML

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

Название и контакты никогда не отображать в виде картинки. Только текст, который может воспринять поисковик.
Наличие заголовка H1, одинакового на всех страницах вашего сайта, будет мешать при продвижении ресурса.
Не используйте тяжелые изображения, флеш и много графики. Это затрудняет загрузку сайта и раздражает многих пользователей.
Не встраивайте горизонтальное меню во флеш, не отображайте меню в виде картинок. Используйте только текст. Иначе при необходимости внесения изменений в пункты меню вы можете столкнуться с определенными трудностями.
Создавайте HTML-шапки. Долой хедеры, состоящие полностью из картинки или флэш-анимации! Зачем усложнять себе работу? Если вы хотите выделиться - можно ненавязчиво использовать динамические элементы в дизайне, работающие на скриптах.
Шапка должна быть такой высоты, которая не помешает восприятию контента. Для информационных ресурсов логично делать невысокую шапку (100-200 пикселей). Для лэндингов и презентационных сайтов-визиток размер хедера может быть несколько выше.

Как создать правильный хедер

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

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

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

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

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Высота шапки фиксированная, добавляем text-align: justify, для дочерних элементов:

Добавляем display: inline-block для всех элементов nav, чтобы можно было расположить их друг за другом:

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block, автор Jelmer de Maat:

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute. Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока — шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown, упомянутый Michał Czernow:

В результате получается то, что нужно:

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

Используем трюк с псевдоэлементом на header:

Выглядит намного лучше:

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

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

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

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

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

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

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

Вот структура моего проекта.

HTML разметка шапки

Для примера я придумал такую структуру.

Слева логотип, название сайта и его описание, а справа контактные телефоны, кнопка обратного звонка и кнопка меню. Типичная разметка для многих сайтов.

Дабавим немного стилей и получим такой внешний вид.

Пока, тут нет никаких особенностей. Это обычная шапка без дополнительных эффектов.

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

Теперь давайте подключим перед закрывающим тегом "body" jQuery и скрипт, в котором и будем писать js-код для управления состоянием и положением шапки.

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

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

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

Как я уже говорил, для того чтобы "header" стал фиксированным при прокрутке, ему нужно поменять позиционирование на "fixed". Для этого, при помощи метода "scrollTop()" мы проверим значение прокрутки в окне браузера и в нужный момент добавим шапке класс, в котором и изменим позиционирование.

Звучит страшнее чем кажется. На самом деле все достаточно просто. Давайте в таблицу стилей добавим класс, при помощи которого шапка будет получать position: fixed.

Обратите внимание, что z-index для того, чтобы при позиционировании шапка была над остальными элементами, я задал непосредственно классу header немного ранее.

Теперь давайте перейдем к написанию скрипта. Открывайте файл scripts.js и добавьте следующий код.

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

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

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

Опять же звучит страшно и заумно, но посмотрите, как все просто.

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

Когда прокручиваем страницу обратно, и скрипт удаляет класс header_fixed, я также удалю и, теперь, лишний отступ у тега body.

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

Изменение высоты шапки и цвета

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

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

Но давайте на этот раз я не буду задавать отдельный класс, а покажу как изменить стили прямо в js. Итак, задача при прокрутке на 300 пикселей при помощи jQuery плавно изменить высоту шапки и ее цвет.

Как видите, благодаря методу ".css" можно манипулировать стилями прямо из jQuery. Отступ был по 15 пикселей сверху и снизу, а я заменил его на 5, за счет чего шапка стала меньше на 20 пикселей. Цвет сделал бледно желтым, а при помощи свойства transition сделал эффект перехода из одного состояния в другое более плавным.

Как удалить/скрыть элемент из шапки при прокрутке страницы

Этот вопрос мне также периодически задавали в соцсетях, поэтому решил вынести его в отдельный пункт. Наверняка вы уже догадались, если дочитали статью до этого момента. Ничего нового, увы, тут не будет. Все также, как выше. Получим id или class элемента и добавим ему свойства для скрытия. Например "display: none" в простейшем случае.

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

Теперь давайте в js напишем код, отвечающий за скрытие одного из номеров. Пусть это событие случается, когда мы прокрутили окно на 500 пикселей, но давайте, чтобы не повторятся, будем не просто стили менять или классом манипулировать, а воспользуемся методами fadeIn|fadeOut для плавного скрытия и появления элемента.

Вот, что мы получили:

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

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