Продолжаем создание собственного шаблона для Joomla 3, в данной статье мы создадим шапку для нашего сайта. Причем шапка эта будет адаптирована под совершенно различные устройства. В этом нам поможет фреймворк Bootstrap и небольшие знания HTML и CSS.
Для начала давайте посмотрим на макет шапки, так сказать на тот результат, который у нас должен получиться. А следом постараемся разбить его на отдельные блоки, которые будут использованы в шаблоне. Мою шапку я разбил на 9 блоков, результат получился следующим:
Прежде чем продолжить давайте присвоим блокам определенные имена классов и идентификаторы, а так же разберемся, для чего они нужны:
- Блок под цифрой 1 отвечает за всю шапку целиком, он будет, так скажем контейнером верхнего уровня, все остальные блоки будут расположены внутри него. Я присвоил ему идентификатор «header»;
- Следующие блоки, которые растянуты по всей ширине страницы (цифра 2 и 3), отвечают за верхнюю и нижнюю часть шапки соответственно. Так как шапка двухцветная то логично каждый отдельный цвет вывести в разных блоках. Имена классов, которые они получили «hd-top» (сокращение от header-top) для верхнего блока и «hd-bottom» для нижнего. В принципе, можно было бы обойтись и без них, но мне так удобнее;
- Следующая группа блоков (4 и 5) с именами классов «hd-top-cont» и «hd-bottom-cont» находятся внутри блоков 2 и 3 соответственно. Их максимальная ширина будет равна области контента - 1140 пикселей;
- Блоки 6 и 7 с именами класса «logo-img» и «logo-txt» расположенные внутри блока 4 служат для отображения логотипа и текста-слогана;
- И последние блоки (8 и 9) с классами «main-menu» и «str-search» служат контейнерами для главного меню и строки поиска.
С назначением блоков разобрались, теперь можно приступить к верстке. Составим небольшой HTML код в соответствии с вышеупомянутым расположением блоков:
<div id="header">
<div class="hd-top">
<div class="hd-top-cont">
<div class="logo-img col-xs-4 col-md-3">
<a href="/" title="Joom4all.ru - создай свой сайт с нуля!">
<img alt="Joom4all.ru - создай свой сайт с нуля!" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/logo-min.png'?>">
</a>
</div>
<div class="logo-txt col-xs-8 col-md-9"><span>Создай свой сайт с нуля</span></div>
</div>
</div>
<div class="hd-bottom">
<div class="hd-bottom-cont">
<div class="main-menu"><jdoc:include type="modules" name="position-0"/></div>
<div class="str-search"><jdoc:include type="modules" name="position-1"/></div>
</div>
</div>
</div>
Думаю, стоит пояснить, что тут к чему. Как и говорил в блоке с идентификатором «header» (<div id="header">) как в матрешке расположено два основных блока <div class="hd-top"> и <div class="hd-bottom"> каждый из которых включает в себя три дополнительных вложенных блока.
Блок с логотипом <div class="logo-img col-xs-4 col-md-3"> содержит обычную ссылку, в которой расположен рисунок, пусть до изображения относительный благодаря использованию php:
<div class="logo-img col-xs-4 col-md-3"> <a href="/" title="Joom4all.ru - создай свой сайт с нуля!"> <img alt="Joom4all.ru - создай свой сайт с нуля!" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/logo-min.png'?>"> </a> </div>
Блок с надписью ничем не примечателен, он содержит обычный текст:
<div class="logo-txt col-xs-8 col-md-9"><span>Создай свой сайт с нуля</span></div>
Хочу обратить внимание на имена классов col-sx- и col-md- это специальные классы, для которых уже есть специальные стили в фреймворке Bootstrap. Их суть заключается в том, чтобы на различных устройствах делать размер блока определенной ширины (подробнее об этом я расскажу в отдельной статье).
Нижняя часть шапки точно так же состоит из двух блоков с определенным содержимым:
<div class="main-menu"><jdoc:include type="modules" name="position-0"/></div> <div class="str-search"><jdoc:include type="modules" name="position-1"/></div>
В качестве содержимого в этих блоках при помощи конструкции jdoc:include будут выведены определенные модули, в моем случае это модуль меню и модуль поиска, для которых выделены специальные позиции position-0 и position-1 (подробнее о конструкции jdoc:include можно почитать в данной статье).
Теперь давайте посмотрим на результат проделанной работы:
Отвратительно, не так ли? Все дело в том, что мы не использовали никаких стилей для оформления нашей шапки, за исключением Бутстрапа конечно. Хочу обратить внимание, что для модуля поиска вместо кнопки используется обычная картинка, которую необходимо назвать searchButton.gif и положить в папку images текущего шаблона. Каждый пункт меню так же содержит изображение, но из-за прозрачного цвета фона белых изображений не видно.
Прежде чем приступать к оформлению для начала давайте настроим модуль поиска, не буду долго писать, просто выложу скриншот того что должно быть:
И еще, в поле «Заголовок поля» поставьте пробел, для того чтобы избавиться от надписи «Искать» рядом со строкой поиска.
Теперь можно приступать к оформлению шапки сайта, для этого открываем файл template.css и начинаем колдовать. Для адекватного оформления стилей получилось не мало, но пугаться не стоит:
body{background-color: #e7eaeb !important;}/*Цвет фона*/
/*Оформление основных блоков*/
.hd-top{height: 132px; background-color: #fff; padding: 0 15px;}/*блок с логотипом и текстом*/
.hd-bottom{height: 78px;background-color: #374760; overflow: hidden; padding: 0 15px;}/*блок с меню и поиском, все что выходит за рамку скрываем*/
.hd-top-cont, .hd-bottom-cont, {max-width: 1140px; margin: 0 auto; position: relative;}/*Основная область шапки, контента и футера*/
/*Логотип и надпись*/
.logo-img {position: absolute;top: 14px;}
.logo-txt {position: absolute;top: 20px;}
.logo-txt span {font-size: 3.5vw;}/*размер шрифта зависит от контейнера*/
/*Главное меню и поиск*/
/*меню*/
.main-menu ul.nav{/*Список пунктов меню*/
margin: 0 0 0 37px;
padding: 0;
list-style: none;
float: left;
}
.main-menu ul.nav li {/*Пункты менюю*/
float: left;
margin-right: 80px;
}
.main-menu ul.nav li > a {/*ссылки в меню*/
color: #fff;
display: block;
text-decoration: none;
padding: 10px 0 0;
}
.main-menu ul.nav li > a:hover {background-color: transparent !important;}/*цвет ссылок при наведение*/
.main-menu ul.nav li a img {margin: 0 auto;display: block;}
span.image-title {
font-size: 16px;
display: block;
text-align: center;
}
/*поиск*/
.str-search{float: right;}/*Выравнивание поиска по правому краю*/
.search input.button {margin: 20px -4px 0;}
.search input.inputbox.search-query{
display: block;
float: left;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: #fafbfa;
background-color: transparent;
height: 39px;
color: #fff;
font-size: 18px;
width: 340px;
padding-left: 10px;
margin-top: 21px;
}
Применив данные стили, мы получим следующий результат:
Уже лучше, не так ли? Но если посмотреть на шрифт текста в логотипе то можно понять, что он далек от задуманного, поэтому предлагаю его поменять. Сделать это можно подключив нужный нам шрифт (смотрите статью «Шрифты для сайта - как подключить?»). В моем случае был использован шрифт Noteworthy. Как только нужный шрифт будет добавлен, результат станет еще лучше (точно такой же, как в макете).
Вроде бы все хорошо, но мы забыли об одной немаловажной детали – адаптации под мобильные устройства. Другими словами наша шапка хорошо смотрится на экранах размером от 1006 пикселей и выше. А вот если разрешение экрана будет меньше, то вся эта красота изрядно подпортится:
Результат не радует, из-за того что строка поиска не влезает в отведенное под неё место в блоке она попросту исчезает (благодаря свойству overflow: hidden) и все бы ничего, но чем меньше экран тем больше элементов шапки становятся скрытыми.
Чтобы избежать такого эффекта предлагаю сделать следующее:
- При помощи медиа-запросов уменьшать отступы и размеры элементов в зависимости от разрешения экрана;
- При помощи Bootstrap скрывать лишние элементы (в моем случае строку поиска) на мобильных устройствах, а вместо них выводить некую кнопку, при нажатии на которую будут отображаться дополнительные элементы меню.
Начнем с Бутстрапа и его кнопки, особых манипуляций производить не придется, все проще пареной репы. Потребуется лишь добавить несколько блоков с определенными классами внутрь нижней части шапки:
<div class="hd-bottom">
<div class="hd-bottom-cont">
<!-- Навигационная панель -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Основное меню и кнопка для мобильных -->
<div class="main-menu"><jdoc:include type="modules" name="position-0"/></div>
<div class="navbar-header">
<!-- Специальная кнопка-открывалка -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hiden-navbar">
<span class="sr-only">Специальная кнопка-открывалка</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><!--Конец кнопки -->
</div><!--Конец заголовка в виде меню -->
<!-- То, что будет скрыто в выпадающее меню на мобильных устройствах -->
<div class="collapse navbar-collapse" id="hiden-navbar">
<div class="str-search"><jdoc:include type="modules" name="position-1"/></div>
</div><!-- /Конец .скрытого меню navbar-collapse -->
</div><!-- /Конец .container-fluid -->
</nav> <!--Конец панели меню -->
</div>
</div>
Кнопка-открывалка как я её называю, готова. Сохраняем изменения и смотрим на получившийся результат:
Действительно, при уменьшении размера экрана до 767 пикселей появляется та самая кнопка, но если на неё понажимать Вы не заметите никакой разницы, все дело в стилях, которые мы прописали ранее (overflow: hidden). Теперь предстоит заняться медиа-запросами для того чтобы придать нашей шапке законченный вид и сделать её адаптивной под любые устройства.
Работая с медиа-запросами, я постарался охватить не только стандартные размеры экрана. Зачем спросите Вы, ведь есть четкие размеры для конкретных экранов, с ними можно и работать. Так-то оно так, но вот представьте себе ситуацию, на сайт зашел посетитель, и любопытства ради начал изменять размеры окна браузера как ему вздумается, в какой-то момент сайт начал отображаться крайне криво. Вот именно таких ситуаций я предпочитаю избегать и делаю медиа-запросы на все возможные размеры экрана. А вот собственно и стили для адаптивного дизайна шапки сайта:
/*Адаптивный дизайн*/
@media (min-width: 2672px){
.logo-txt span {font-size: 2vw !important;}/*Размер текста в логотипе*/
}
@media (min-width: 2004px){
.logo-txt span {font-size: 3vw;}/*Размер текста в логотипе*/
}
@media (max-width: 1430px){
.logo-txt span {font-size: 4vw;}/*Размер текста в логотипе*/
}
@media (max-width: 1060px){
.logo-img img {width: 100%;}
.logo-txt span {font-size: 5vw;}/*Размер текста в логотипе*/
.main-menu ul.nav li {margin-right: 50px;}
}
@media (max-width: 1024px){
.logo-img img {width: 100%;}
.logo-txt span {font-size: 5vw;}/*Размер текста в логотипе*/
.main-menu ul.nav li {margin-right: 50px;}
}
@media (max-width: 992px){
.container-fluid {padding: 0 !important;}
.logo-img img {width: 75%;} /*Размер логотипа делаем меньше*/
.main-menu ul.nav li {margin-right: 10px;}/*Уменьшаем отступы главного меню*/
.hd-top {height: 120px;}/*Уменьшаем размер верхней части шапки*/
}
@media (max-width: 815px){
.search input.inputbox.search-query{width: 325px;}/*Уменьшаем размер поля для поиска*/
}
@media (max-width: 800px){
.search input.inputbox.search-query{width: 310px;}/*Уменьшаем размер поля для поиска*/
.hd-top {height: 95px;}
}
@media (max-width: 785px){
.search input.inputbox.search-query{width: 240px;}/*Уменьшаем размер поля для поиска*/
.logo-img img {width: 60%;}
.logo-txt span {font-size: 5vw;}
.hd-top {height: 80px;}
}
@media (max-width: 768px){
.main-menu ul.nav{/*Убираем отступы с пунктов меню*/margin: 0;}
button.navbar-toggle.collapsed, button.navbar-toggle{margin: 18px;}/*Отступы кнопки-бутерброда в различных состояниях*/
.hd-bottom{height: auto;}
.search input.inputbox.search-query{margin-top: 14px;}
.search input.button {margin: 13px -10px 0;}
.logo-img img {width: 60%;}
}
@media (max-width: 711px){
.search input.inputbox.search-query{width: 190px;}/*Уменьшаем размер поля для поиска*/
}
@media (max-width: 640px){
div#hiden-navbar {border: none;margin-top: 5px;}/*Скрытое меню, настройка стилей*/
.hd-top {height: 90px;}/*уменьшаем высоту блока с логотипом*/
.logo-img img {width: 90%;}/*логотип*/
}
@media (max-width: 540px){
.hd-top {height: 75px;}/*уменьшаем высоту блока с логотипом*/
}
@media (max-width: 440px){
.main-menu ul.nav li {width: auto;} /*ширина пунктов меню подбирается автоматически*/
.hd-top {height: 60px;}/*уменьшаем высоту блока с логотипом*/
}
@media (max-width: 414px){
span.image-title {font-size: 12px;}/*Уменьшаем размер текста в главном меню*/
button.navbar-toggle.collapsed, button.navbar-toggle {margin: 15px 5px;}/*Уменьшаем отступы кнопки-бутерброда*/
}
@media (max-width: 340px){
.logo-img img {width: 100%;}/*Размер логотипа*/
.logo-txt.col-xs-8.col-md-9 {padding: 0;}/*сброс отступов в тексте лого*/
.logo-txt span {font-size: 15px;font-weight: 900;}
}
Теперь все готово, шапка нашего шаблона адаптирована совершенно для любых доступных на данный момент устройств. Кнопка-открывалка (или как её еще называют кнопка-бутерброд) выглядит отлично, а после того как пользователь на неё нажмет, появляется скрытая часть меню:
Конечно, это далеко не идеальный пример, можно было несколько усложнить главное меню. Или вместо логотипа фиксированного размера подгружать разное изображение в зависимости от разрешения экрана, тем самым увеличив скорость загрузки страницы, но в моем случае этого не требуется, размер логотипа и так достаточно мал.
Совсем забыл сказать, все вышеперечисленные манипуляции действуют до того момента пока у Вас главное меню не имеет вложений. Но как только это будет не так, то придется вносить дополнительные поправки.
На этом статья очередная статья по созданию шаблона для CMS Joomla 3 под названием «как сделать шапку для сайта» подошла к концу. Продолжение следует…
