Внедрение Off-canvas меню в шаблон Joomla 3

// ->from($db->quoteName('#__content', 'a'))->from( $db->quoteName('#__content', 'a') . ' STRAIGHT_JOIN ' . $db->quoteName('#__categories', 'c') . ' ON ' . $db->quoteName('c.id') . ' = ' . $db->quoteName('a.catid'))// ->join('LEFT', $db->quoteName('#__categories', 'c'), $db->quoteName('c.id') . ' = ' . $db->quoteName('a.catid'))

Здравствуйте. Пишу шаблон сайта для Joomla с нуля. Как сделать горизонтальное адаптивное меню разобрался. Но, сейчас нужно сделать левое боковое прячущееся меню (Off-canvas). Оно должно стать основным для сайта. Есть исходник с кодом, но я не могу как не стараюсь внедрить его в шаблон. Ребята уже неделю вишу на одном месте. Помогите пожалуйста. Задача вроде бы как простая, но справится не могу хоть убейте

.

Кому не тяжело, гляньте пожалуйста.
Исходник меню тут: http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html#

Мой файл index.php такой:

Код

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$app             = JFactory::getApplication();
$doc             = JFactory::getDocument();
$user            = JFactory::getUser();
$this->language  = $doc->language;
$this->direction = $doc->direction;

// Getting params from template
$params = $app->getTemplate(true)->params;

// Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');

if($task == "edit" || $layout == "form" )
{
	$fullWidth = 1;
}
else
{
	$fullWidth = 0;
}

// Add JavaScript Frameworks
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/bootstrap.js');

// Add Stylesheets
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/bootstrap.css');
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/style.css');
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span9";
}
else
{
	$span = "span12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
	$logo = '<img src="' . JUri::root(). $this->params->get('logoFile'). '" alt="' . $sitename . '" />';
}
elseif ($this->params->get('sitetitle'))
{
	$logo = '<span class="site-title" title="' . $sitename . '">' . htmlspecialchars($this->params->get('sitetitle')). '</span>';
}
else
{
	$logo = '<span class="site-title" title="' . $sitename . '">' . $sitename . '</span>';
}
?>

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<jdoc:include type="head" />
</head>
<body>
	<div class="container" id="main">
		<div class="row">
          	<div class="col-xs-12 col-md-6 col-md-push-3" style="background:#4876FF;">
				<font color="#FFFFFF"; size="5"><b>Полтавский Банк Информации</b></font>
          	</div>
          	<div class="col-xs-12 col-md-3  col-md-pull-6">
				<img src="images/uapoltava.png" alt="Полтавский банк информации" />
			</div>
			<div class="col-xs-12 col-md-3" id="social">
				<a href="http://vk.com/rybalchenkoiv" target="_blank" class="icon-vk"></a>
				<a href="" class="icon-facebook2"></a>
				<a href="" class="icon-twitter"></a>
				<a href="" class="icon-google-plus2"></a>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<jdoc:include type="modules" name="position-5" style="none" />
		</div>
		<div class="row"></div>
		<div class="row"></div>
	</div>
</body>
</html>

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

P.S. - Как привязать к модулю меню я знаю. Главное, что бы заработало с ul>, <li> и прочими, я там уже дальше разберусь.
И очень Вас прошу, не давайте советов типа: "пропиши в index.php то и то и будет работать". Я не могу понять что и после чего конкретно нужно прописывать. Кто поможет буду ОЧЕНЬ признателен. Спасибо.

Различные условия в шаблонах Joomla 3.0 и 2.5 Автор Fedor Vlasenko	Ответов: 133 Просмотров: 31382	16.12.2024, 15:52:14 от goga_pgasovav
Двойное меню Автор cirip	Ответов: 0 Просмотров: 1506	05.11.2024, 23:19:21 от cirip
Шаблон jm MyPlace - не воспроизводится видео Автор THE KILLERS	Ответов: 2 Просмотров: 2183	23.07.2024, 13:58:16 от THE KILLERS
Пункт меню Текстовый разделитель ведет на главную страницу Автор zahar_92	Ответов: 8 Просмотров: 4687	27.07.2023, 13:37:17 от ei-dos
Ошибка при входе в корзину шаблон jmart Автор dimiur	Ответов: 5 Просмотров: 5048	24.05.2023, 14:24:30 от Gleb72

Внедрение Off-canvas меню в шаблон Joomla 3 - Joomla 3.x: Шаблоны, разметка и макеты вывода

Новости Joomla

SW JProjects v.2.6.0 - компонент каталога расширений для Joomla

Phoca Collapse System Plugin

Человек на GitHub ускорил Joomla в 600 раз на объёме 150к+ материалов в 1700+ категориях

rubinded

Внедрение Off-canvas меню в шаблон Joomla 3

Похожие темы