Прячущееся вертикально меню (off-сanvas) для сайта

Здравствуйте. Делаю сайт на базе Joomla 3 (шаблон пишу с Bootstrap). Возникла проблема: нужно боковое вертикальное прячущееся меню.Нашел идеальный для меня вариант, но встроить его в шаблон никак не могу. За источник беру эту разработку: foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html Но как не мучусь — ничего не выходит. index.php выглядит так:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright © 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
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/bootstrap.js');

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/style.css');
$doc->addStyleSheet('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 = "col-md-6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "col-md-9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "col-md-9";
}
else
{
	$span = "col-md-12";
}

// 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 hidden-xs" style="background:#2780e3; text-align:center;">
				<font color="#FFFFFF"; size="5"><b>Полтавский Банк Информации</b></font>
          	</div>
          	<div class="col-xs-12 col-md-3  col-md-pull-6">
				<p class="fig"><img src="images/uapoltava.png" style="align:center"; 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>
      <nav class="navbar navbar-inverse">
          <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="#topmenu" 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>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="topmenu">
              <jdoc:include type="modules" name="position-1" style="none" />
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
		<div class="row">
          <div class="col-xs-12">
			<jdoc:include type="modules" name="position-5" style="none" />
          </div>
      </div>
		<div class="row">
          <?php if ($this->countModules('position-8')) : ?>
      		<div class="col-md-3">
              <jdoc:include type="modules" name="position-8" style="xhtml" />
          	</div>
          <?php endif; ?>
          	<div class="<?php echo $span; ?>" id="content">
              <div id="content-inner">
                <jdoc:include type="message" />
              	<jdoc:include type="component" />
              </div> 
          	</div>
          <?php if ($this->countModules('position-7')) : ?>
          	<div class="col-md-3">
              <jdoc:include type="modules" name="position-7" style="mystyle" />
          	</div>
          <?php endif; ?>
      	</div>
	</div>
  	<div class="container-fluid" id="footer">
      <div class="row">
        <div class="hidden-xs col-sm-3">
          <P>
          .
          </P>
        </div>
        <div class="col-sm-9 col-xs-12">
          <jdoc:include type="modules" name="position-9" style="none" />
        </div>
      </div>
  </div>
</body>
</html>

Помогите пожалуйста, сам не справлюсь никак…

Александр Мальцев

24 марта 2016, 13:57

Здравствуйте.
Могу посоветовать сделать следующее.
ZURN Foundation — это целый фреймворк.
Чтобы оттуда что-то взять — это необходимо как-то выдернуть. В данном случае — это какие-то стили и код js.
Например, это можно сделать со страницы:
foundation.zurb.com/sites/download.html/#customizeFoundation

После этого, надо стили CSS подправить под свою страницу и всё это дело подключить. Самое главное посмотреть, чтобы стили CSS Foundation не переопределили стили Bootstrap.

Комментарии: