Двухколонная верстка (фиксированный sidebar и резиновый контент). Фиксированное верхнее меню и плавающий сайдбар в WordPress Фиксированный блок в сайдбаре

Двухколоночный макет наиболее популярен в веб-дизайне за счёт своей универсальности и простоты. В широкой колонке располагается контент, а в узкой, называемой ещё на жаргоне веб-разработчиков сайдбар (от англ. sidebar, боковая панель) навигация. Впрочем, ничего не мешает сделать колонки одинаковой ширины, если это продиктовано дизайном. На рис. 5.11 представлен макет, состоящий из двух колонок, в правой колонке расположена навигация, а в левой контент.

Рис. 5.11. Двухколоночный макет

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

Колонка 1 Колонка 2

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

Навигация слева

Первый способ формирования колонок основан на позиционировании. Для слоя layout задаём относительное позиционирование, а для внутренних слоёв абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left и top (пример 5.3).

Пример 5.3. Использование позиционирования

Layout { width: 980px; margin: auto; position: relative; /* Относительное позиционирование */ } .sidebar, .content { position: absolute; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ } .content { background: #F4ECCE; /* Цвет фона */ left: 180px; /* Сдвиг вправо */ width: 800px; /* Ширина колонки */ }

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

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

Колонка 2 Колонка 1

Более простой стиль получается при использовании свойства float со значением left , которое задано для слоя sidebar . Но чтобы получилась не обтекаемая врезка, а подобие колонки, для слоя content также требуется установить свойство margin-left со значением равным ширине левой колонки или превышающим её (пример 5.4).

Пример 5.4. Использование float

Layout { width: 980px; margin: auto; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: left; /* Обтекание справа */ } .content { background: #F4ECCE; /* Цвет фона */ margin-left: 180px; /* Отступ слева */ }

Как вариант, можно убрать свойство margin-left , а для формирования колонок добавить к layout свойство overflow с значением auto или hidden .

Навигация справа

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

Пример 5.5. Использование позиционирования

Layout { width: 980px; margin: auto; position: relative; } .sidebar, .content { position: absolute; } .content { background: #F4ECCE; /* Цвет фона */ width: 800px; /* Ширина колонки */ } .sidebar { background: #C6DD7D; /* Цвет фона */ left: 800px; /* Сдвиг вправо */ width: 180px; /* Ширина колонки */ }

При позиционировании возможны проблемы с наложением подвала (при его наличии) на другие элементы. Этот вопрос рассмотрен в разделе, посвященном резиновым трёхколоночным макетам.

Аналогичное действие можно провести и с примером, в котором фигурирует свойство margin-left . Но в данном случае удобнее использовать свойство float со значением right . Также margin-left поменяется на margin-right (пример 5.6).

Пример 5.6. Использование float

Layout { width: 980px; margin: auto; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: right; /* Обтекание слева */ } .content { background: #F4ECCE; /* Цвет фона */ margin-right: 180px; /* Отступ справа */ }

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

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

Пример 5.7. Двухколоночный макет

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Двухколоночный макет BODY { background: #fff1e4; margin: 0; } .layout { width: 970px; margin: 0 auto 10px; background: #fff; } .content { margin-right: 350px; padding: 10px; } .sidebar { width: 320px; float: right; background: #e0ecb8; } .footer { clear: both; /* Отмена обтекания */ border-top: 1px solid #ccc; padding: 10px; }

• Главная
• Все коктейли
• Коллекции
• Бокалы
• Компоненты
• Фичи

Яблочный эг-ног

Молоко - 40 мл, сок яблочный - 100 мл, сироп сахарный - 30 мм, один яичный желток.

Приготовить напиток в миксере, подать в бокале хайбол со льдом и соломинкой.

Приготовление коктейлей

Результат данного примера показан на рис. 5.12.

Рис. 5.12. Двухколоночный макет

Для слоя content поля включаются через свойство padding , но поскольку ширина слоя не указана, то поля никак на неё не повлияют. В слое sidebar вставлен список, у которого отступы установлены по умолчанию, поэтому никакого «налипания» текста на край фона нет. К подвалу (слой footer ) добавляется свойство clear , которое отменяет действие float . Оно требуется на тот случай, когда высота навигации превышает высоту контента, чтобы текст не накладывался на подвал.

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

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

Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.

Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.

Задача: сделать последний блок в боковой колонке (сайдбаре) – плавающим. Причём, чтобы он прилипал только в тот момент, когда пользователь доходит до него скроллингом, а не сразу при открытии страницы. Также блок должен «отлипать», доходя до футера (т.е. не перекрывать его).

Самый рабочий способ

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

Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).

В желаемом месте боковой колонки вставляем такой HTML-код:

$(window) .scroll(function() {
var sb_m = 20 ; / * отступ сверху и снизу */
var mb = 300 ; / * высота подвала с запасом */
var st = $(window) .scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

If(sb_h + $(document) .scrollTop() + sb_m + mb < $(document) .height () ) {
if(st > sb_ot) {
var h = Math.round(st - sb_ot) + sb_m;
sb.css({ "paddingTop" : h} ) ;
}
else {
sb.css({ "paddingTop" : 0 } ) ;
}
}
} ) ;

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

Теперь подкключаем JS. Для этого прописываем в секции HEAD:

Самый простой способ (для WordPress)

Также безотказный метод, но при помощи установки плагина . Работает без косяков.

Достоинства:

• не нужно разбираться/понимать HTML;
• простота и скорость установки.

Недостатки:

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

Как пользоваться:

Скачиваем плагин.

Устанавливаем.

Активируем.

Заходим в админке во вкладку: Дизайн -> Виджеты. Открываем тот виджет, который хотим сделать фиксированным.

Ставим галочку возле «Зафиксировать виджет» и нажимаем кнопку «Сохранить».

Другие способы реализации скользящих блоков

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

Вариант #1 (без jQuery)

В сайдбар вставляем:

Прописываем стили в HTML (лучше добавить сразу в CSS):

.sticky {
position: fixed;
z-index: 101 ;
}
.stop {
position: relative;
z-index: 101 ;
}

Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):

(function() {
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, "" ) , s = "" ;
for (var i = 0 ; i < Sa.length; i++) {
if (Sa[ i] .indexOf("box-sizing" ) == 0 || Sa[ i] .indexOf("overflow" ) == 0 || Sa[ i] .indexOf("width" ) == 0 || Sa[ i] .indexOf("padding" ) == 0 || Sa[ i] .indexOf("border" ) == 0 || Sa[ i] .indexOf("outline" ) == 0 || Sa[ i] .indexOf("box-shadow" ) == 0 || Sa[ i] .indexOf("background" ) == 0 ) {
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.children[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент; Math.round() только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
if ((Ra.top - P)

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

В общем получилось, как получилось. Как это конкретно прикрутить к вашей теме, вам придется решать самим — когда есть время, то это даже прикольно «поломать голову». Спасибо.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

WebPoint PRO - адаптивная тема для WordPress с широким функционалом и грамотной технической поисковой оптимизацией
Share42 - скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)

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

Пояснения к статье:

"Sidebar/сайдбар " — панель навигации по сайту.

"Position " — свойство в CSS.

"Top ", "left ", "right ", "bottom " — свойства перемещения в CSS.

WordPress — система управления контентом/CMS сайта.

Webix — UI библиотека. Позволяет создавать табличные элементы.

View — JavaScript функция.

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

Как сделать сайдбар вручную? CSS & HTML

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

Создание сайдбара с правой стороны. HTML & CSS

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

Хорошо если заранее есть готовый макет, так как вам известна ширина навигационного блока. Если же макет отсутствует, то это не помешает разработке.

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

Навигационную панель можно создавать с помощью списков и обычных блоков. Если используете списки, отключайте им свойство "text-decoration".

В нашем примере используется конструкция из блоков div.

Для начала создаем общий блок div, в котором будут располагаться колонки. Создадим для него какой-нибудь класс, в нашем примере используется класс layout, но это особо не влияет на процесс разработки.

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

Для начала определимся с позиционированием. Для общего контейнера задаем относительное позиционирование — свойство {position: relative}. Для колонок задается свойство {position: absolute}.

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

В нашем примере код выглядит вот так:

HTML

Test Page

Колонка 1

Колонка 2

Скопировать

CSS

Layout {

position: relative;

background: rgba(119, 115, 115, 0.58);

}

Sidebar , .content { position: absolute ; }

Sidebar {

background: #C6DD7D;

Content {

background: #F4ECCE;

Скопировать

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

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

Можно также использовать свойство float, для того. Этот способ намного проще, так как базируется на обтекании элементов. Благодаря ему наш sidebat будет располагаться с правой стороны.

Создание навигационной панели с правой стороны. HTML & CSS

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

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

Как создать sidebar в WordPress?

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

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

При использовании WordPress вам нужно будет зарегистрировать навигационную панель и добавить к ней несколько виджетов.

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

В нашем примере рассмотрен правый сайдбар, а также sidebar футера.

Пару слов о webix

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

Для начала вам нужно скачать этот фреймворк. После этого указать ссылки на его стили и скрипты в вашем HTML документе.

После этого вы можете приступать к созданию сайдбара. Для его размещения во фреймворке присутствует специальная функция — view. Которая и будет размещать за размещение элементов.

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

Заключение

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

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

Теги: