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

Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS.

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

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

HTML-разметка простой страницы HEADER CONTENT FIXED SIDEBAR FOOTER CSS-стили для блоков контента .header { width: 100%; background: purple; height: 80px; } .content { width: 80%; background: blue; height: 800px; float: left; } .sidebar { width: 20%; background: green; height: 100px; float: right; } .sidebar.fixed { position: fixed; right: 50%; margin-right: -50%; } .footer { width: 100%; background: gray; height: 500px; clear: both; } JS-скрипт для фиксированного сайдбара при прокрутке страницы

Не забываем подключить jQuery

$(function() { var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height(); var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) { $sidebar.addClass("fixed"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) { var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight); } $sidebar.css("top", $topPosition); }); });

Какие требования к макету:

• Резиновый двухколонный макет
• sidebar фиксированной ширины 300px
• content растягивается на всю остальную ширину.
• footer прижатый к низу(в этом уроке не буду показывать как это делается).

Какие возникают Css проблемы при верстке такого макета:1 способ.

Если вы делаете блоки флотнутыми (float), вы обязаны задать им фиксированную ширину (нельзя задать 1 sidebarу 300px и контенту 100%).В этом случае либо контент слезит вниз, либо появится горизонтальная прокрутка в 300px влево. Ну главное понять что этот способ нам не подходит.

2 способ.

Многие верстальщики предлагают этот способ, о чем они думают вообще?! Суть метода в том, что можно sidebar задать float шириной 300, а конент не флотать и задать ему margin-left:300px. Хороший способ и вроде бы все так хорошо получается. чесно говоря я думал что это самый отличный способ, но в этом методе есть свои подводные камни. Причины отказа от этого метода те что если вдруг мы в контенте верстаем к примеру меню с флотнутыми li либо любые другие блоки float и потом мы хотим их очистить с помощью clear:both, то нижняя граница этого блока сползает вниз на уровень нижней границы sidebar (Что и не странно так как очищается foat, можно этого избежать если флотнутому блоку задать фиксированную высоту , но это совсем не дело задавать фиксированную высоту).

3 способ.

Можно использовать для sidebar position absolute , но только в том случае если вы точно уверены что content по высоте будет больше sidebar иначе все содержимое sidebar залезит на footer(ведь аблосютное позиционирование вырывает с общего потока).

но как для меня это тоже не очень хороший способ!

4 способ.

"Отличный способ, если в нем есть какие-то недостатки прокомментируйте.Но я думаю это лучший способ."

• Плюсы этого метода: во первых в DOMe content будет идти раньше sidebara что хорошо для поисковиков.
• ничего не налазит на футер
• любые блоки можно очищать и ничего не будет слазить к нижней границе (Так мы побороли проблемы второго способа).

Вообщем как он работает: смотрим в код первым идет content за ним sidebar. задаем float этим двум блокам(естественно sidebar сползает вниз). после этого задаем sidebar свойство margin-left:-100%. отлично он вернулся на место, и делаем отступ у контента margin-lerft:300px.

html css .sidebar{
width:300px;
display: block;
float: left;
margin: 0 0 0 -100%;
}
.content{
min-width:723px;
display: block;
float: left;
margin: 0 0 0 220px;
}

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

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

"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. Которая и будет размещать за размещение элементов.

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

Заключение

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

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

Теги:

Здравствуйте, уважаемые читатели блога сайт. Это скорее заметка для себя, чтобы не забыть, что именно делал, когда захочу все вернуть взад. Началось все с того, что один из читателей предложил написать про плагин для WordPress под названием Q2W3 Fixed Widget (Sticky Widget), который может сделать любой виджет в сайдбаре плавающим или, другими словами, фиксированным.

Т.е. прокручивая страницу вы увидите, что основная часть сайдбара уйдет вверх, но вот тот виджет, что будет расположен в самом низу, останется в области просмотра как бы далеко вы не продвигались вниз по тексту. Сразу оговорюсь, что размещать контекстную рекламу подобным образом запрещено и за это могут наказать (как выяснилось в комментариях — РСЯ это допускает, а Адсенс запрещает так делать).

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

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

Зачем фиксировать меню и делать плавающий сайдбар

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

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

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

Как зафиксировать верхнее меню в WordPress

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

Если вы помните, то в статье про оптимизацию скорости загрузки страниц нужно постараться объединить все CSS и JS в один общий (в смысле в два — один для стилей, а другой для скриптов). Вот, собственно, в такой файлик я и добавлял приведенные чуть ниже строчки кода. Хотя можно их добавить и непосредственно в Html код, окружив тегами script. Например, это можно сделать в шаблоне header.php внутри тегов head.

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

В моем случае код фиксации верхнего меню выглядит вот так:

$(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Напоминаю, что вставить этот фрагмент кода можно в:

Файлик с расширением.js, который живет в папке с используемой вами темой оформления (/wp-content/themes/тема). Он вам подойдет только в том случае, если для него в файле header.php прописана строка подгрузки его вместе с вебстраницами вашего сайта, которая может выглядеть так:

Можно использовать сам файл header.php, заключив данный код между открывающим и закрывающим тегами head и обрамив его в теги script, например, так: $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Можно и в любое другое место прописать этот код в тегах script. Главное, чтобы он подгружался на нужных страницах блога. Например, можно в footer.php перед закрывающим тегом body.

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

В отличии от оригинального кода мне пришлось еще добавить width: "100%", ибо в противном случае размер меню по ширине уменьшался, что портило всю картину.

Смотрите, для наглядности я приведу Html код, с помощью которого формируется верхнее меню в моем шаблоне WordPress блога (живет он у меня в файлике header.php из ):

• Новое
• Лучшее
• где заработать
• Реклама
• Карта сайта
• Контакты
• Наверх

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

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

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

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

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

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

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

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

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

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

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

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

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

  Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (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)