Код резиновую шапку с помощью html. Шапка страницы
Всем привет. Сегодня посмотрел статистику поисковых запросов, по которым люди переходят на блог и обнаружил, что есть несколько совсем не релевантных. Нет, не блогу, а статьям.
Один из них как зафиксировать шапку сайта ? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.
Вообще, существует несколько способов того, при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью»:)
На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.
Фиксация шапки при прокрутке страницы
Для того, чтобы зафиксировать шапку, придется создать два блока. Один — для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…
Вот такая простая html структура! Теперь добавим стили!
#headerMain { width:920px; height: 195px; margin:0px auto; z-index:0; } #header { width:920px; height: 195px; background: url(../img/bg-header.jpg) no-repeat; position: fixed; z-index: 9999; }
Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.
Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.
Ниже описан лаконичный способ решения этой проблемы.
HTML-разметка максимально проста:
Super Bad
Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:
Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }
Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:
Header h1, header nav { display: inline-block; }
Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat:
Header::after { content: ""; display: inline-block; width: 100%; }
В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.
Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:
Header h1 {
height: 100%;
}
header h1::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
В результате получается то, что нужно:
Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:
Используем трюк с псевдоэлементом на header
:
CSS-код
header {
text-align: justify;
height: 15em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header > div,
header nav,
header div h1 {
display: inline-block;
vertical-align: middle;
}
header > div {
width: 50%;
height: 100%;
text-align: left;
}
header > div::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
Выглядит намного лучше:
Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.
CSS-код
header {
text-align: justify;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header h1,
header nav {
display: inline-block;
vertical-align: middle;
}
header h1 {
width: 50%;
text-align: left;
padding-top: 0.5em;
}
header nav {
padding-top: 1em;
}
Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:
@media screen and (max-width: 820px){ header { height: auto; } header > div, header >
Результат адаптивен и на мобильных устройствах выглядит так:
В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.
Финальный CSS-код
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;}
header {
text-align: justify;
height: 8em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header > div,
header > div::before,
header nav,
header > div h1 {
display: inline-block;
vertical-align: middle;
text-align: left;
}
header > div {
height: 100%;
}
header > div::before {
content: "";
height: 100%;
}
header > div h1 {
font-size: 3em;
font-style: italic;
}
header nav a {
padding: 0 0.6em;
white-space: nowrap;
}
header nav a:last-child {
padding-right: 0;
}
@media screen and (max-width: 720px){
header {
height: auto;
}
header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}
}
Результат:
Я думаю, что многие из Вас уже заметили, что сейчас в тенденцию входят всё больше липких элементов дизайна, которые остаются на виду при прокрутке страницы пользователем. Как по моему это очень удобно, особенно если это навигация сайта. Вот именно такой пример мы сегодня и будем делать. Мы узнаем как сделать анимированную шапку сайта на JQuery и CSS3 с анимацией.
Как обычно это, оказывается, делается в минимум строк кода и очень просто, и в то же время очень эффективно. Ну а теперь давайте приступим к уроку.
Но для начала хочется сказать огромное спасибо http://www.webdesignerdepot.com ну а теперь давайте точно начнём.
Ι
HTML
HTML код очень и очень простой, нам просто нужно задать теги для , и далее между ними написать содержимое сайта:
Прикреплённая шапка сайта
Так как это самый простой пример, тут мы добавили просто текст между тегами h1, но там также можно использовать изображения, или же, например, навигацию по сайту.
Код jQuery
CSS является самым лучшим способом реализации анимации и переходов в настоящее время. Так что скриптов мы будем использовать минимум, и то для того чтобы задать определение срабатывания анимации при прокрутке страницы.
Когда значение положения страницы при прокрутке больше чем 1, это означает, что пользователь прокрутил страницу и нужно добавить класс «sticky» к тегу шапки сайта. Таким образом срабатывает и фиксируется шапка сайта.
А вот и сам код:
$(window).scroll(function() { if ($(this).scrollTop() > 1){ $("header").addClass("sticky"); } else{ $("header").removeClass("sticky"); } });
Важно отметить, что использование в данном примере не очень хорошая затея, так как если в браузере будет отключено использование скриптов, тогда шапка сайта будет просто фиксированная и всё.
CSS
CSS код будет состоять из 2х частей. Первый код будет отвечать за стандартную шапку сайта, которая находится в положении по умолчанию. Второй код будет отвечать за отображение шапки, когда пользователь будет прокручивать страницу. Давайте посмотрим как выглядит код по умолчанию:
Header{ position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: "PT Sans", sans-serif; }
Теперь самый интересный момент: когда пользователь прокручивает страницу вниз, тогда будет применяться класс.sticky, которому мы можем задать совершенно разнообразное отображение, на которое только способно CSS. Мы так же установим фиксированную позицию, что бы наша шапка сайта была всегда на виду.
С помощью этих CSS правил, которые ниже, мы хотим уменьшить площадь самой шапки при прокрутке, изменить цвет и конечно же уменьшить шрифт. Вот сам код:
Header.sticky { font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; }
Это самый простой пример, с помощью которого Вы должны понять суть работы. Всё зависит от конструкции Вашего сайта.
Ну а сейчас давайте добавим немного анимации нашему переходу с помощью . Вот код:
Transition: all 0.4s ease;
Ι
Заключение
Я надеюсь, что этот способ решит множество вопросов по поводу реализации удобной и простой навигации для сайта. К тому же данная реализация очень просто и понятна.
Элемент сайта, который мы рассмотрим сегодня, является одним из важнейших и очень заметных на странице. Иногда его делают не слишком большим. Он может быть либо статическим, либо динамическим. Всё зависит от желания и фантазий дизайнера и владельца сайта. Возможно, вы уже догадались о чем будет речь — правильно, о шапке сайта. Сегодня мы рассмотрим четыре способа нестандартных способа, с помощью которых можно оформить эту часть сайта. Благодаря этим способам — ваш сайт однозначно выделится на фоне других.
Четыре примера вы можете посмотреть по следующей ссылке:
Скачать
Как пользоваться? — Анимированные шапки для сайта
HTML часть
В коде страницы всё что нужно вставить, это:
| 1 2 3 | <div id = "large-header" class = "large-header" > |
В блоке Затем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js
(в архиве с исходниками — ссылка в начале статьи). Например, для примера №1 нужно подключить следующие библиотеки: Ниже я сделал скриншоты каждого из эффектов. Просматривал видеокурс по блочной верстке сайта от Андрей Морковина. Начал смотреть с чувством, что вот - сейчас научусь чему-то новому. Но терпения хватило досмотреть до девятой части. Устал наблюдать мучения автора по верстке шаблона, и в частности, то, как создавалась шапка. Автор зачем-то вырезал только часть фона с навигацией, вставлял изображение логотипа в html-каркас и обертывал его ссылкой, пытался угадать местоположение навигации с помощью абсолютного или относительного позиционирования. Я решил сам попробовать сделать шапку сайта так, как мне кажется более правильным. В основу создания шапки я положил свойство вложенных слоев на Затем создается слой Затем создаю слой Рисунок короткий и будет занимать не всю ширину шапки, а только некоторую ее правую часть, как раз ровно настолько, чтобы вместить в себя навигационный список. CSS-код для этого слоя представлен ниже: Теперь создаю еще один слой Поэтому фон слоя Ну вот, задача практически и решена. При этом не было использовано ни абсолютного, ни относительного позиционирования. только смещение фона слоя. Осталось создать последний слой, который будет выполнять задачу логотипа сайта. Размещаю его поверх всех остальных слоев и делаю кликабельным на все его пространство. При этом снова воспользуюсь фоновым изображение, которое вложу внутрь этого слоя. Никаких img в html-коде! Позиционировать или смещать его никуда не надо, так как он по-умолчанию расположится в левом верхнем углу блока (как мною задумано для простоты эксперимента
). Только явно задам этому слою высоту и ширину, равную высоте и ширине фонового рисунка: Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом ( Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя Теперь достаточно сместить список вправо с помощью Единственный момент, который вызвал у меня затруднения, это появившиеся еле заметные отступы между внешним блоком Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими Ниже приведу полный код html-каркаса и CSS-кода. Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта.Javascript часть
, задача которого будет содержать в себе фоновое изображение для навигационного списка шапки. Высоту этого слоя устанавливаю равной высоте шапки, а сам фоновый рисунок позиционирую в правом углу блока. Высота его равна высоте шапки, поэтому достаточно сметить его по-горизонтали вправо, а по-вертикали оставляю как есть.
1
div id="nav"
. А вот теперь растяну ссылку, задав для нее ширину и высоту в процентах. Конечно, можно указать эти параметры и с помощью пикселей, так как размеры логотипа известны. Но лучше возложить эту задачу на плечи браузера - пусть сам вычисляет размеры блока-ссылки:
#logo
a
{
display
:
block
;
width
:
100%
;
height
:
100%
;
}
1
display:block
и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:
#nav
ul
{
list-style-type
:
none
;
float
:
right
;
}
#nav
li
{
display
:
inline-block
;
}
#nav
a
{
text-decoration
:
none
;
color
:
#fff
;
font-weight
:
bold
;
margin-right
:
15px
;
line-height
:
20px
;
display
:
inline-block
;
}
1
float: right
. Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.
1
img