Содержание
В этой статье я покажу, как создать адаптивную фиксированную шапку сайта, изменяющую размер при прокрутке. Приведенный вариант реализации может не работать в старых браузерах вроде IE5 или 6.
Для начала нам нужна HTML-структура наподобие следующей:
Код CSS, приведенный ниже – это базовые стили заголовка.
В CSS-коде, приведенном выше, последние три блока имеют класс “.smaller”. Это сделает шапку меньше при прокрутке вниз. Но чтобы добавить класс “.smaller”, потребуется код jQuery:
После того, как вы добавите этот код в раздел и подключите библиотеку jQuery, шапка веб-страницы должна будет изменять свой размер при прокрутке вниз.
Чтобы сделать ее адаптивной, необходимо добавить несколько строк кода CSS:
Теперь при уменьшении размера окна браузера при ширине в 660 пикселей вы увидите, что логотип переместится в середину. При этом меню навигации «съедет» под логотип и расположится по центру.
Если вам понравилась эта статься, поделитесь ей со своими друзьями!
Данная публикация представляет собой перевод статьи « Create a Responsive, Fixed and Resizing Header » , подготовленной дружной командой проекта Интернет-технологии.ру
Чем компактнее верхняя шапка, тем больше содержания поместится на первый экран(область без прокрутки страницы вниз) посетителя, а значит вероятность заявок будет выше, т. к. не все прокручивают страницу. Во многих тематиках, чем меньше размер верхней шапки, тем лучше, потому что посетитель увидит на первом экране больше преимуществ в содержательной части страницы, следовательно вероятность того, что он не закроет сайт в первые секунды, а продолжит просмотр и сделает заказ увеличивается.
Важно использовать наименьший размер верхней шапки сайта в интернет-магазинах и информационных сайтах, где не требуется красочное оформление шапки и сайта в целом.
Верхняя шапка при просмотре с компьютера
Верхняя шапка при просмотре с мобильного
Преимущества в верхней шапке
Иногда бывают случаи, когда заказчику нравится дизайн верхней шапки сайта и он не хочет уменьшать ее размер, чтобы сохранить внешнее оформление. В этом случае все свободное место в верхней шапке можно заполнить основными преимуществами компаний, даже если они уже написаны в содержании страницы. Это лучше, чем ничего.
На верхней шапке были пустые места, но их не получилось убрать, поэтому на свободном месте были написаны основные преимущества компании.
Зачастую вроде бы простые задачи верстки требуют сложной структуры 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 необходимо вместо “::” использовать “:” для псевдоэлементов.
Загрузка...
