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

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

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

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

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

1

Прижать 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.

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

2

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

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

3

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

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

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

4

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

 

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

 

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

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

5

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

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

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

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

6

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

7

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

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

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

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

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

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

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

8

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

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

9

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

10

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

11

Данный 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. Вот сайт на мониторах:

12

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

13

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

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

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

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.6 1 1 1 1 1 4.60

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.Владимир 21.12.2016 16:34
Хотелось бы ещё услышать как сайдбары к футеру прилепить. Чтобы все три колонки были одинаковой высоты.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.Wedal 22.12.2016 06:35
Владимир, есть разные варианты. Посмотрите, например, вот этот: http://dimox.name/3-column-css-layout-right-sidebars/
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.Владимир 22.12.2016 08:20
Спасибо за ответ, но вы, возможно, не поняли. Я уточню. Я не имел в виду "сторонние" варианты. Их я, также, знаю несколько - начиная от простых CSS и заканчивая Java. Я спрашивал о том, как это сделать используя возможности Bootstrap 3. Например, я знаю способ class="row row-flex" где .row-flex {display:flex; flex-flow:row wrap; } но у этого способа есть существенный недостаток - при сжатии экрана, любая страница сайта не заполненные текстом, находящаяся в колонке компонента, в определенный момент сжимается до минимальной ширины в 62px (при этом не важно установлено ли значение col-xs-, col-sm- или col-md-). Возможно вы знаете какой-то другой способ? Если да, подскажите.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.Wedal 23.12.2016 05:44
Владимир, вариантов Bootstrap не знаю. Не видел подобного в документации. Не понимаю, чем вас не устраивает вариант, предложенный по ссылке? Он не требует отказа от использования Bootstrap. Какие-то вещи все равно приходится делать на старом добром CSS.
Ответить | Ответить с цитатой | Цитировать
0 # Bootstrap 4Сергей 26.09.2016 04:52
Столкнулся с проблемой интеграции Bootstrap 4 в Joomla 3. А именно проблема касается вложенных меню.
Теперь они выводятся во вложенных DIV-ах, а не подменю. Скоро этот вопрос начнет лидировать в выдаче поисковиков, а пока ничего нет на эту тему.
Не поможете?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Bootstrap 4Wedal 26.09.2016 05:29
Сергей, так Bootstrap 4 еще в альфа-версии. Я, конечно понимаю, что следует смотреть в перспективу, но ведь до релиза еще может многое в нем измениться и вам придется переделывать сайт.

По вопросу: Joomla вряд ли на текущий момент знает что-то о Bootstrap 4. Если вы хотите подогнать под него меню, то переопределите модуль меню в шаблон Joomla и подстройте макеты самостоятельно.
Ответить | Ответить с цитатой | Цитировать
0 # Как сменить кнопки в меню, которые стоят по умолчаниюEgor 09.09.2016 10:31
Подскажите пожалуйста, где сменить кнопки в коде, которые стоят по умолчанию на другие представленные в bootstap 3. На зеленые или другого цвета, в меню топ.
Заранее благодарю
Ответить | Ответить с цитатой | Цитировать
0 # RE: Как сменить кнопки в меню, которые стоят по умолчаниюWedal 12.09.2016 04:40
Egor, есть два пути:
1) Изменить CSS-класс кнопок.
2) Изменить CSS-код кнопок.

Если вы хотите изменить кнопки на всем сайте, то лучше идти вторым путем. Посмотрите через Firebug css-класс текущей кнопки и создайте его в css-файле вашего шаблона (не в css-файле Bootstrap!). Если ваш CSS файл подключен в шаблоне после файла Bootstrap, то его приоритет будет выше. Просто скопируйте найденный через Firebug css-класс кнопки со стилями, вставьте его в ваш CSS-файл и измените стиль цвета кнопки.
Звучит довольно сложно, но на практике это простейшее действие.
Ответить | Ответить с цитатой | Цитировать
0 # Сделайте, пожалуйста, урок по сниппетамavex 05.05.2016 00:24
Просьба и пожелание - сделать урок, как поженить бутстраповские сниппеты, ссылки на которые Вы дали в этом уроке, с сайтом на джумле.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Сделайте, пожалуйста, урок по сниппетамWedal 05.05.2016 05:43
avex, нельзя дать точные инструкции, т.к. каждый сниппет уникален. Общий смысл такой же, как в Bootstrap - привести html-структуру меню на сайте Joomla к html-структуре меню сниппета. Дальше начинаются частности. Обычно нужно переопределить макет модуля меню Joomla в используемый шаблон и подправить его таким образом, чтобы html-структура генерируемого меню совпадала со структурой меню сниппета.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Сделайте, пожалуйста, урок по сниппетамavex 05.05.2016 09:23
C меню теоретически понятно - оно есть в джумле, его макет можно переопределить , а как быть, например, с каруселью или галереей, которых в джумле нет? Ставить сторонний модуль и уже его изменять так, чтобы код совпадал со структурой сниппета? А если в сниппете есть еще и jquery? Вот бы практический примерчик! Конечно, если есть время и желание.
Ваш цикл по скрещиванию джумлы и бутстрапа, советы по джумле, по защите сайтов, наверное, наиболее понятные и емкие в рунете, еще бы самую малость и отпадет нужда часами зависать на форумах, наших и забугорных, ждать ответов, которые могут быть не в тему или не быть вовсе.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Сделайте, пожалуйста, урок по сниппетамWedal 10.05.2016 04:11
avex,
Цитата:
C меню теоретически понятно - оно есть в джумле, его макет можно переопределить , а как быть, например, с каруселью или галереей, которых в джумле нет? Ставить сторонний модуль и уже его изменять так, чтобы код совпадал со структурой сниппета?
Да, именно так. Bootstrap и его сниппеты отвечают за оформление. Структуры вы, конечно же, тоже можете скопировать из примера, и вставить, например, в модуль Joomla простого html-кода. И это будет работать. Но не будет динамики. Это будет работать как простая html-страница, а если вы хотите задействовать мощь PHP, то нужно либо подбирать готовое расширение и приводить его структуру в соответствие структуре сниппета, либо писать расширение самостоятельно. Не всегда это проще, чем переоформить CSS, плюнув на все сниппеты. Каждый выбирает подход, удобный ему.
Практический пример представляет собой данная статья.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.Dmitry564352 25.04.2016 09:44
Они прописаны.
+еще не понятно, менять (выключать) ли штатный бутстрап от джумлы, или нет.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Один маленький минусAlexd2015 24.04.2016 16:00
Цитирую Dmitry54523544354:
ни один из модулей не впихнуть в новые алиасы.

Проблема "впихуемости" решается, если новые позиции прописать в templateDetails.xml
В рассматриваемом примере:

header
nav
article
aside
feature
footer
Ответить | Ответить с цитатой | Цитировать
0 # Один маленький минусDmitry54523544354 14.04.2016 22:30
Благодарю за статью. Супер.
Один маленький минус - cms "помнит" лишь старые позиции (имена) и ни один из модулей не впихнуть в новые алиасы.
joomla 3.4.6
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Один маленький минусWedal 15.04.2016 04:10
Dmitry,
Цитата:
cms "помнит" лишь старые позиции (имена) и ни один из модулей не впихнуть в новые алиасы
ЧТО? :o
Ответить | Ответить с цитатой | Цитировать
0 # RE: Один маленький минусDmitry654345 15.04.2016 08:32
Расширения>менеджер модулей>выбираем, скажем, модуль обычного вертикального меню и хотим присвоить его зоне "navigation". Ну, раз хотим - причваиваем. Перегружаем страницу. В navigation пусто.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Один маленький минусWedal 18.04.2016 03:53
Dmitry, проверьте, опубликован ли модуль, а также вкладку "Привязка к пунктам меню" - для каких страниц он активирован.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Один маленький минусDmitry654345 19.04.2016 17:33
1. Опубликован (включен). Если же речь про xml, то там он то же прописан. Собственно, весь шаблон скачен м этой части.
2. Для всех. В частности, для main menu (вертикальное левое) то же.
права в порядке..
Настройка bootstrap фрэймворка много сложнее, чем у вас в блоге. Очень много опущенных моментов. Наверное, новичку лучше все изучать с нуля, так как вы оговариваете лишь моменты, которые помните, а что-то делаете на автомате и уже не оговариваете это - новичек начинает заниматься неким "реинженирингом" всего этого хозяйства тогда, как с нуля может и дольше, чем кажется по этому блогу, заниматься, но более продуктивно. Меньше хаоса в голове.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Один маленький минусWedal 20.04.2016 04:36
Dmitry, если вы внимательно прочитаете предыдущую статью, то увидите, что позиции navigation у нас в шаблоне нет. У нас есть позиция header, в которую и нужно помещать модули. Как посмотреть доступные позиции в шаблоне?
1) Переходите в Менеджер шаблонов, в правом верхнем углу нажимаете кнопку Настройки.
2) Устанавливаете опцию Показывать позиции модулей в Да
3) На фронтенде добавляете к адресу сайта &tp=1
После этого вы увидите все доступные в шаблоне позиции для модулей. Только в этих позициях можно публиковать модули.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Один маленький минус5pix 14.06.2016 13:38
Цитирую Wedal:
Dmitry,
Цитата:
cms "помнит" лишь старые позиции (имена) и ни один из модулей не впихнуть в новые алиасы

ЧТО? :o
Наверное Дмитрий имеет ввиду, что когда задаешь позицию уже в настройках модуля, в выпадающем списке нет его позиции, даже когда вводишь руками свою, автоматом система исправляет на ту, которую уже использовали и прописана в системе. У меня сначала похожая проблема была, но ранее сталкивался с пользовательскими позициями в шаблонах, поэтому писал вручную в поле "позиция модуля". Просто немного внимательности и чуть прозорливости и все работает.
А так, огромное спасибо, пожалуй лучшее сжатое пояснение этому фреймворку с погружением в реальность.
Wedal, как вы смотрите на фреймворк от RocketTheme под названием Grav? будет ли от вас обзор ее и (было бы вообще прекрасно) разбор как настроить хотя бы базовой шаблон под себя.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Один маленький минусWedal 15.06.2016 05:33
5pix,
Цитата:
Wedal, как вы смотрите на фреймворк от RocketTheme под названием Grav? будет ли от вас обзор ее и (было бы вообще прекрасно) разбор как настроить хотя бы базовой шаблон под себя.
Думал об этом. Подобная статья уже есть в списке планируемых материалов.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.spro1 25.03.2016 13:38
Доброго дня! спасибо за статью!

Скажите пожалуйста, как настроить корректное отображение сайта на IE 8? знаю, что бутстрап это предусматривает. Нет смысла спорить о том, надо ли вообще поддерживать старые браузеры, но мое мнение, что надо по крайней мере обеспечить более-менее адекватное отображение, а если рассматривать шаблон мастербутстрап, то там вообще все кривее кривого в IE8 и как по мне, то это очень печально. Кстати проверьте кодировку страницы, которая открывается на вашем сайте в IE8, там тест иероглифами
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.Wedal 28.03.2016 06:40
spro1, по вопросу совместимости с разными браузерами есть информация здесь: http://getbootstrap.com/getting-started/ .
Поддерживается не всё, но при должном упорстве поддержки IE8 добиться можно.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.spro1 28.03.2016 19:23
то что добиться кое чего можно, я знаю. вот и хотел у вас помощи попросить, как именно?))) пробовал добавлять js библиотеки по инструкции, но так и не заработало ничего
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.Wedal 29.03.2016 04:43
spro1,
Цитата:
но так и не заработало ничего
- лозунг старых IE. Я не подскажу вам в этом вопросе, т.к. не занимаюсь поддержкой IE ниже 9 версии.
Ответить | Ответить с цитатой | Цитировать

Вверх