Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap

Используя Bootstrap Framework, мы создали базовый шаблон Joomla, позиции модулей и компонента. В этом уроке мы оформим горизонтальное и вертикальное меню для удобной навигации по страницам сайта.

Если вы дочитали серию до этой статьи, то уже знаете, что применяя CSS-фреймворк, мы подстраиваем структуру сайта под готовое оформление, а не наоборот. Для создания красивого меню нам не понадобятся правки CSS (хотя какие-то небольшие изменения можно будет внести), но потребуется понимание того, как создать html-структуру меню в том виде, который требует Bootstrap.

Прижимаем footer шаблона к низу экрана

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

Прижать Footer к низу страницы можно несколькими способами. Мы воспользуемся одним из них. В файл templates/masterbootstrap/css/template.css добавим следующий код:

html,
body {
  height: 100%;
} 

#wrap {
  position: relative;
  min-height: 100%;
} 

#wrap section {
  padding-bottom: 180px;
}

#footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 180px;
}

Мы задали для footer’а абсолютное позиционирование и прижали его к низу страницы. В этом коде важно подобрать высоту footer’а и установить ее в двух местах. Я сделал ее равной 180px.

Если все сделано правильно, наша сайт примет следующий вид:

Создание вертикального меню

В принципе, вертикальное меню у нас уже создано и имеет базовый вид:

Прежде, чем оформлять меню, мы должны ответить для себя на один вопрос: «Будет ли меню иметь уровни вложенности и если да, то сколько?». Проще говоря, мы должны решить будет меню простым или выпадающим. Рассмотрим оба варианта.

Простое вертикальное меню (без вложенных пунктов)

Для такого меню нам подойдет функционал Bootstrap под названием Navs Pills. Navs Pills как раз реализует простое одноуровневое меню:

Код у него элементарный:

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Joomla имеет схожую структуру меню, уже подготовленную для Bootstrap, поэтому все, что нам нужно сделать для интеграции меню с картинки выше – добавить соответствующий класс (nav nav-pills nav-stacked) для ul модуля меню. Сделать это можно в настройках модуля меню в админке Joomla.

Переходим в Расширения –> Менеджер модулей –> Модуль «Menu Example» –> вкладка «Дополнительные параметры» и в опции «Суффикс класса меню» пишем: nav nav-pills nav-stacked . После этого сохраняем модуль, и видим, что вертикальное меню на сайте приняло нужный нам вид:

Синиц цвет – это цвет фона колонки и к меню он не имеет никакого отношения. Цвета колонок я не убираю для большей наглядности. Вы в любой момент можете отключить их в CSS-файле.

Вот и всё. Простое вертикальное меню готово.

Выпадающее вертикальное меню

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

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

Если вам не нравится такое оформление или вы хотите создать более сложное меню, придется потрудиться.

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

В зависимости от сложности меню и вашей фантазии, эта задача может быть как простой, так и весьма сложной.

Вся структура модуля меню хранится в макете этого модуля, который может быть переопределен в шаблон Joomla. В нашем шаблоне уже создано два альтернативных макета для меню. default.php и panel.php. Они находятся по адресу: templates/masterbootstrap/html/mod_menu/. Вы можете сделать копию любого из этих макетов, изменить ее название и поместить в той же папке. Во вновь созданном макете вы должны будете внести изменения таким образом, что структура генерируемого меню совпадала со структурой меню, которое вы хотите интегрировать. Иногда достаточно поправить в макете пару классов, а иногда требуется дописывать php-код. Всё здесь зависит от меню. Когда новый альтернативный макет будет готов, не забудьте выбрать его в настройках модуля (опция «альтернативный макет»).

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

Создание горизонтального меню

Горизонтальное меню, создается точно также как и вертикальное, с той лишь разницей, что в ul не добавляется класс nav-stacked. Здесь действуют все те же правила, но есть одно отличие. Горизонтальное меню должно помешаться по ширине на всех устройствах, в том числе и мобильных. По умолчанию, если в меню хотя бы 5-6 пунктов, те из них, которые не будут входить на ширину экрана, перепрыгнут на следующую строку вот так:

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

Называется эта штука Navbar. Вот как она выглядит на широких экранах:

А вот так на узких:

На узких экранах меню скрыто, но виден его блок и кнопка с иконкой меню, при нажатии на которую оно выпадает:

Данный Navbar интегрируется с помощью следующего кода:

<nav>
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Этот код отличается от того, что предлагает нам Joomla, а потому для его интеграции мы создадим альтернативный макет меню.

Действуем по шагам:

Шаг 1. Копируем и переименовываем макет меню

Копируем файл templates/masterbootstrap/html/mod_menu/default.php, и вставляем в этом же каталоге с именем navbar.php .

В настройках модуля горизонтального меню выбираем новый макет в качестве альтернативного.

Шаг 2. Приводим код в альтернативном макете к исходному коду Navbar

Это, пожалуй, самое сложное, что предстоит сделать. Нам нужно проанализировать код скопированного макета и привести его к формату Navbar. В данном случае это очень просто. В коде макета есть общий список с пунктами меню ul. Нам нужно добавить часть кода Navbar перед этим ul и два закрывающих тега после.

Было:

<ul class="nav menu<?php echo $class_sfx;?>">
	...
</ul>

Стало:

<nav class="navbar navbar-default">
	<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
	

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

		<ul class="nav menu<?php echo $class_sfx;?>">
			...
		</ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>		

Не забываем про суффиксы класса меню. Чтобы нужный нам код стал идентичен исходному, ul должен иметь css-класс nav navbar-nav. Мы можем добавить его как в макете, так и в настройках модуля. Я внес изменения в макете, заменив:

<ul class="nav  menu<?php echo $class_sfx;?>"

на:

<ul class="nav navbar-nav menu<?php echo $class_sfx;?>"

После проделанных изменений меню на сайте будет выглядеть как navbar. Вот сайт на мониторах:

А вот на телефонах:

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

Текущую версию шаблона вы можете скачать ниже:

Скачать шаблон Master Bootstrap. Часть 4.

В следующих статьях серии мы продолжим совершенствовать наш шаблон, добавляя в него все новые и новые Bootstrap-элементы.

--------------------

Если вам ближе WordPress, то вы можете скачать готовые темы, плагины, курсы и уроки на сайте InBenefit.