Создание подлиний в пунктах меню Joomla - PullRequest
Новая
       12

Создание подлиний в пунктах меню Joomla

0 голосов
/ 20 мая 2010

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

Вывод меню выглядит следующим образом 

<div class="moduletable_menu">
<ul id="mainmenu" class="menu">
    <li class="active item1" id="current">
        <a href="URL_HIDDEN">
            <span>Services</span>
        </a>
    </li>
</ul>

Это в основном выводит пункт меню в одну строку примерно так:

Услуга

Я бы хотел, чтобы у меня был такой пункт меню:

Услуга
Сервис x, Сервис y, Сервис z

Для справки, посмотрите главное меню на демонстрационной странице YooTheme .

То, как YooTheme делает это, использует два канала (||) как разрыв строки, поэтому в бэкэнде Joomla вы вводите «Services || Service x, Service y, Service z» в качестве заголовка меню, а затем быть неким причудливым javascript, который разбивает этот заголовок на две части, готовый для стилизации с использованием css.

Кто-нибудь знает простой способ кодировать это?

Обратите внимание, что я хочу встроить эту функцию в пользовательский шаблон (т. Е. Не-yootheme).

Также обратите внимание, что я не использую MooTools, а вместо этого использую Jquery.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2014

Это сработало для Joomla 3.2

Создайте переопределение в вашем шаблоне: Например: templates / beez_20 / html / mod_menu / default_component.php и используйте следующий код: 

// No direct access.
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;
}

$ta=explode('~',$linktype);  /////////////////////////// 3 new lines here
$linktype=$ta[0];
$subtitle=$ta[1];

switch ($item->browserNav) :
   default:
   case 0:
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?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; ?>" onclick="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;
endswitch;

if ($subtitle!=null) {    /////////////////////////// 4 new lines here
  echo '<div style="margin-top:0px;margin-bottom:10px;margin-left:15px;font-style:italic;"><small>'.$subtitle.'</small></div>';
}

Написать текст меню как заголовок ~ подзаголовок

0 голосов
/ 10 июня 2010

Я наконец понял это и подумал, что поделюсь этим, если кому-то еще это понадобится.

Прежде всего вам нужно создать переопределение шаблона для mod_mainmenu.

Затем откройте файл переопределения (default.php) и вставьте этот фрагмент кода после последнего IF: 

// add title & sub span
if (isset($node->_children[0]) && isset($node->_children[0]->span[0])) {
    $title = $node->_children[0]->span[0];
    $split = explode('//', $title->data(), 2);
    if (count($split) == 2) {
        $span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'title'));
        $span->setData(trim($split[0]));
        $span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'sub'));
        $span->setData(trim($split[1]));
    }
}

Теперь вы можете ввести подстроку в поле заголовка вашего пункта меню, вам просто нужно поставить // как разделитель. Пример: Lorem Ipsum // Dolor sit amet

Вывод html выглядит так: 

<li class="parent item2">
<a href="YOURURL">
    <span>
        <span class="title">Lorem Ipsum</span>
        <span class="sub">Dolor sit amet</span>
    </span>
</a>

Теперь это можно стилизовать с помощью CSS.

Счастливых дней! :)

СОВЕТ! Вы можете выбрать любой разделитель, какой захотите, просто обязательно измените его в default.php. Я использовал двойную косую черту, так как ее легко набрать.

...