Здравствуйте, сегодня мы поговорим с вами о том, как создать собственную навигационную панель для сайта. Она используется практически на каждом интернет-ресурсе, поэтому каждый разработчик должен уметь создавать данный элемент.
Пояснения к статье:В этой статье будут показаны различные способы создания навигационных панелей, как вручную, так и с помощью специальных сайт-конструкторов. В нашем примере используется 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. Которая и будет размещать за размещение элементов.
Минусом данного фреймворка является ограниченность. При его использовании вы не сможете создать по-настоящему уникальное творение, так как панель ограничивается не вашей фантазией, а всего лишь парой функций.
ЗаключениеВ этой статье мы рассмотрели несколько основных способов создания навигационной панели, но их гораздо большее количество. Вы можете даже придумать собственный способ, основываясь на наших наработках.
В данных примерах была показана простейшая навигационная панель. Если немного поработать с исходным кодом, то можно получить настоящий шедевр.
Теги:Какие требования к макету:
- Резиновый двухколонный макет
- sidebar фиксированной ширины 300px
- content растягивается на всю остальную ширину.
- footer прижатый к низу(в этом уроке не буду показывать как это делается).
Если вы делаете блоки флотнутыми (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;
}
Самый простой пример фиксированного плавающего сайдбара на 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); }); });
Плавающий блок (или как его ещё называют двигающийся, фиксированный, прилипший) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент, в который чаще всего помещают рекламу (тизеры , баннеры или контекст ).
Увы, правила адсенса нам это запрещают. Тем не менее, многие владельцы сайтов игнорируют правила на свой страх и риск. Может быть, их за это даже не наказывают, но я бы не советовал рисковать.
Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.
Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.
Задача: сделать последний блок в боковой колонке (сайдбаре) – плавающим. Причём, чтобы он прилипал только в тот момент, когда пользователь доходит до него скроллингом, а не сразу при открытии страницы. Также блок должен «отлипать», доходя до футера (т.е. не перекрывать его).
Самый рабочий способСуществует много вариантов реализации прилипающего блока, но не все они работают корректно. Скажу из личного опыта: один и тот же метод установки блока может сработать на одном сайте, а на другом появятся косяки.
Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (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 - скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)