суббота, 6 декабря 2014 г.

Меню Bootstrap 2 в joomla 3

Перед тем как раелизовать меню c Bootstrap 2 давайте рассмотрим его структуру, а также переопределим стили mod_menu в папку html нашего шаблона.


Структура.

На просторах интернета есть множество сайтов построенных на Bootstrap 2, структуру которых можно увидеть, например, при помощи расширением Firebug для Mozilla, и они все практически одинаковы, только имеют небольшое отличие - это в добавке дополнительных стилей, которые придают  оформление (фиксированное меню, цвет, ширина и т.д). На сайте bootswatch.com достаточно большое количество примеров и мы воспользуемся одним из них с фиксированнием :

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
     <div class="container">
    <button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="brand" href="/">Brand</a>
  </div>
  <div class="nav-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Active</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">Dropdown header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>

 С 1 по 7 строчки - это кнопка меню, которой не видно на настолных компьютеров,а отображается меню с 10 и далее классов.

На 8 строчке - это Логотип, который находится в меню.

В 10 строке - основная часть меню, где мы можем менять классы для различных дизайнерских решений.

Строки с 14 по 16 - это классы выпадающего блока, которого так не хватает в joomla меню. И наша задача будет внести свои изменения  в модуль меню, чтобы они присутствовали в навигации.

Добавляем меню в index.php.

 Пример добавления фиксированного меню в файл index.php joomla:

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<?php if($this->countModules('navbar')) : ?>
<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php endif; ?>
<a class="brand" href="/">Brand</a>
  <?php if($this->countModules('navbar')) : ?>
 <div class="nav-collapse collapse">
 <jdoc:include type="modules" name="navbar" style="none" />
</div>
<?php endif; ?>
</div>
</div>
</div>


 Незабываем добавить модуль navbar в templateDetails.xml:

 <position>navbar</position>

Вносим стили в mod_menu.

1. Переопределяем модуль меню. Создайте папку html в папке вашего шаблона сайта, в ней создайте еще одну папку с названием mod_menu. Теперь копируйте в нее файлы из папки TMPL модуля стандартного меню, которые находятся по пути ваш_сайт/modules/mod_menu/tmpl/.

2. Открываем файл default.php и вносим в него некоторые изменения:

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

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav<?php echo $class_sfx;?>"<?php
$tag = '';

if ($params->get('tag_id') != null)
{
$tag = $params->get('tag_id') . '';
echo ' id="' . $tag . '"';
}
?>>
<?php
foreach ($list as $i => &$item)
{
$class = 'item-' . $item->id;

if ($item->id == $active_id)
{
$class .= ' current';
}

if (in_array($item->id, $path))
{
$class .= ' active';
}
elseif ($item->type == 'alias')
{
$aliasToId = $item->params->get('aliasoptions');

if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
{
$class .= ' active';
}
elseif (in_array($aliasToId, $path))
{
$class .= ' alias-parent-active';
}
}

if ($item->type == 'separator')
{
$class .= ' divider';
}

if ($item->deeper)
{
$class .= ' dropdown';
}

if ($item->parent)
{
$class .= ' parent ';
}

if (!empty($class))
{
$class = ' class="' . trim($class) . '"';
}

echo '<li' . $class . '>';

// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
case 'heading':
require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
break;

default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;

// The next item is deeper.
if ($item->deeper)
{
echo '<ul class="nav-child dropdown-menu unstyled small">';
}
elseif ($item->shallower)
{
// The next item is shallower.
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
else
{
// The next item is on the same level.
echo '</li>';
}
}
?></ul>


 3. Открываем default_component.php и вносим изменения:

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

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';

if ($item->menu_image)
{
$item->params->get('menu_text', 1) ?
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
$linktype = $item->title;
}

switch ($item->browserNav)
{
default:
case 0:
?><a data-toggle="dropdown" href="/<?php echo $item->flink; ?>" <?php echo $title; ?>><i <?php echo $class; ?>></i><?php echo $linktype; ?></a><?php
break;
case 1:
// _blank
?><a <?php echo $class; ?> href="/<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
case 2:
// window.open
?><a <?php echo $class; ?> href="/<?php echo $item->flink; ?>" on-click="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a>
<?php
break;
}


 В 31 строчке как видно изменился класс на data-toggle="dropdown", но прошу обратить внимание на появившийся

<i <?php echo $class; ?>></i>
 С помощью этой вставки теперь мы сможем добавлять к пунктам меню иконки Bootstrap Font Awesome.  Как это сделать: Открыть пункт меню ==> Перейти на вкладку "Параметры отображения ссылки"==> в текстовом поле "CSS-класс ссылки" вставить класс иконки, например, fa fa-youtube и у вас слева от пункта меню появится иконка Ютуба

4. Но сначала также подправим default_url.php:

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

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';

if ($item->menu_image)
{
$item->params->get('menu_text', 1) ?
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
$linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
$linktype = $item->title;
}

$flink = $item->flink;
$flink = JFilterOutput::ampReplace(htmlspecialchars($flink));

switch ($item->browserNav) :
default:
case 0:
?><a data-toggle="dropdown" href="/<?php echo $flink; ?>" <?php echo $title; ?>><i <?php echo $class; ?>></i><?php echo $linktype; ?></a>

<?php
break;
case 1:
// _blank
?><a <?php echo $class; ?> href="/<?php echo $flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
case 2:
// window.open
$options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.$params->get('window_open');
?><a <?php echo $class; ?> href="/<?php echo $flink; ?>" on-click="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
break;
endswitch;
В выше указанном способе реализации меню Bootstrap , выпадающему пункту меню должен быть присвоен Тип пункта меню "Внешний URL", а Ссылка знак диеза "#".

http://joomsnipp.ru/