Прячущееся вертикально меню (off-сanvas) для сайта
3.2K
1
Здравствуйте. Делаю сайт на базе 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 (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
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>
Могу посоветовать сделать следующее.
ZURN Foundation — это целый фреймворк.
Чтобы оттуда что-то взять — это необходимо как-то выдернуть. В данном случае — это какие-то стили и код js.
Например, это можно сделать со страницы:
foundation.zurb.com/sites/download.html/#customizeFoundation
После этого, надо стили CSS подправить под свою страницу и всё это дело подключить. Самое главное посмотреть, чтобы стили CSS Foundation не переопределили стили Bootstrap.