Как встроить выподающее меню в joomla

Uglik · 14 Авг 2010

Здравствуйте, столкнулся с такой пробелемой.... делаю шаблон под Joomla, реализованно выподающее меню... но не получается натянуть на joomla

Собственно вот что получатеся в шаблоне на html:

HTML:

Вот как реализованны стили в моем меню

<a href="" id="link">Главное меню</a>
<div id="top_menu" class="top_menu">    		
<ul class="menu-nav">
<li class="top item53"><a href="page.html"><strong>Уровень 1</strong></a></li>
<li class="top item54"><a href="page.html"><strong>Уровень 1</strong></a>
  <div class="ulwrapper">
  <ul>
    <li class="item59"><a href="/"><strong>Уровень 2</strong></a></li>
    <li class="parent item60"><a href="/"><strong>Уровень2</strong></a>
	<div class="ulwrapper">
	<ul>
	   <li class="item62"><a href="/"><strong>Уровень 3</strong></a></li>
	   <li class="item63"><a href="/"><strong>Уровень 3</strong></a></li>
	</ul>
	</div>
	</li>
<li class="item61"><a href="/"><strong>Уровень 2</strong></a></li>
   </ul>
   </div>
</li>
<li class="top item56"><a href="/"><strong>Уровень 1</strong></a></li>
</ul>	    
</div>

При вставке модуля меню

HTML:

<a href="" id="link">Главное меню</a>
<div id="top_menu" class="top_menu">    		
<jdoc:include type="modules" name="menu_nav" />	    
</div>

меню работает как статическое и не выподает.

А вот что отдает код Joomla в меню

HTML:

     <a href="/kuhni/" id="link">Главное меню</a>
     <div id="top_menu" class="top_menu">    		
     <ul class="menu">
            <li class="item1"><a href="http://localhost/kuhni/"><span>Уровень 1</span></a></li>
            <li class="parent active item3"><a href="/kuhni/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=3"><span>Уровень 1</span></a>
            <ul>
              <li class="item6"><a href="/kuhni/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=6"><span>Уровень 2</span></a></li>
              <li id="current" class="parent active item4"><a href="/kuhni/index.phpoption=com_content&amp;view=article&amp;id=3&amp;Itemid=4"><span> Уровень 2</span></a>
                  <ul>
                  <li class="item8"><a href="/kuhni/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=8"><span>Уровень 3</span></a></li>
                  <li class="item9"><a href="/kuhni/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=9"><span>Уровень 3</span></a></li>
                 </ul>
             </li><li class="item7"><a href="/kuhni/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=7"><span>Уровень 2</span></a></li>
           </ul>
           </li>
           <li class="item5"><a href="/kuhni/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=5"><span>Уровень 1</span></a></li>
     </ul>	    
     </div>

Что нужно прописать что бы стили меню соотовествыввали примеру на HTML
Когда здесь прописывается всего 1 строчка <jdoc:include type="modules" name="menu_nav" />

3ner · 14 Авг 2010

Вообще модуль выпадающего меню ставил?

Uglik · 15 Авг 2010

Нет никакого модоля не ставил... у меня меню встроенное в шаблон на javascript и css .... кароче все чтили переписал... а вот что то оно все равно не выпадает... что то не досмотрел

3ner · 15 Авг 2010

Uglik написал(а):
Нет никакого модоля не ставил... у меня меню встроенное в шаблон на javascript и css .... кароче все чтили переписал... а вот что то оно все равно не выпадает... что то не досмотрел

И как нам понять, что что-то не досмотрел?
Как поступить:
1. Ставишь готовый модуль выпадающего меню (их уже навалом).
2. Полностью все описываешь, что делал (в какой файл, что прописывал и в какую строку), включая код javascript и css.
Иначе ничем помочь не могу.

З.Ы.
Если будешь описывать пункт 2, то исходный код вывода писать не нужно, это:
"Собственно вот что получатеся в шаблоне на html:" и "А вот что отдает код Joomla в меню"

ndvkerch · 15 Авг 2010

Тут нужно править шаблон модуля \modules\mod_mainmenu\tmpl\default.php и оборачивать выпадающие списки второго уровня в тег <div class="ulwrapper"></div> а также проверить еще соответствие всех классов и идентификаторов в верстке и в том что отдает джумла и либо править шаблон либо css. А еще лучще использовать специальный модуль

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

и на него уже натягивать дизайн и css

Uglik · 15 Авг 2010

Прикрепляю архив с js index и css

Меню сейчас такого плана

HTML:

<div id="top_menu" class="top_menu">    		
<ul class="menu">
<li><a href="page.html"><strong>Уровень 1</strong></a></li>
<li><a href="page.html"><strong>Уровень 1</strong></a>
  <div class="ulwrapper">
  <ul>
    <li><a href="/"><strong>Уровень 2</strong></a></li>
    <li><a href="/"><strong>Уровень 2</strong></a>
    <div class="ulwrapper">
	<ul>
	   <li><a href="/"><strong>Уровень 3</strong></a></li>
	   <li><a href="/"><strong>Уровень 3</strong></a></li>
	</ul>
    </div>
	</li>
    <li><a href="/"><strong>Уровень 2</strong></a></li>
   </ul>
</div>
</li>
<li><a href="/"><strong>Уровень 1</strong></a></li>
</ul>	    
</div>

Нужно привести к такому

HTML:

<div id="top_menu" class="top_menu">    		
<ul class="menu">
<li><a href="page.html"><strong>Уровень 1</strong></a></li>
<li><a href="page.html"><strong>Уровень 1</strong></a>
  <ul>
    <li><a href="/"><strong>Уровень 2</strong></a></li>
    <li><a href="/"><strong>Уровень 2</strong></a>
	<ul>
	   <li><a href="/"><strong>Уровень 3</strong></a></li>
	   <li><a href="/"><strong>Уровень 3</strong></a></li>
	</ul>
	</li>
    <li><a href="/"><strong>Уровень 2</strong></a></li>
   </ul>
</li>
<li><a href="/"><strong>Уровень 1</strong></a></li>
</ul>	    
</div>

Что бы работоло без <div class="ulwrapper">
Целый сетки промучался... как мне кажется нужно просто в js (который находится в index) переписать...

Код:

	<script type="text/javascript">
	var $j = jQuery.noConflict();
		$j(document).ready(function(){
			$j('ul#jbg-menu').wrap('<div class="new" />');
		$j('.menu li').hover(
			function() {
				$j(this).addClass("active");
				$j(this).find('> .ulwrapper').stop(false, true).fadeIn();
				Cufon.refresh();
			},
			function() {
				$j(this).removeClass("active");        
				$j(this).find('div').stop(false, true).fadeOut('fast');
				Cufon.refresh();
			}
		);
		$j('.ulwrapper').hover(
			function() {
				$j('.parent').addClass("active_tab");
			},
			function() {
				$j('.parent').removeClass("active_tab");        
			}
		);
		$j('.ulwrapper .ulwrapper').hover(
			function() {
				$j('.ulwrapper .parent').addClass("active_tab2");
			},
			function() {
				$j('.ulwrapper .parent').removeClass("active_tab2");        
			}
		);
	});

$j(function()
		{
		 
		$j("#link").click(function(event) {
		event.preventDefault();
		$j(this).toggleClass("link2");
		$j("#top_menu").slideToggle();
		});
		 		});
	</script>

пробывал переписывать .ulwrapper в стилях и в самом js на ul.menu ul, все равно не помагло

Архиф с файломи Для просмотра ссылки Войди или Зарегистрируйся

3ner · 15 Авг 2010

Uglik написал(а):
Архиф с файломи

Архив не распаковывается, весит 2.3Kb всего.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Uglik · 15 Авг 2010

3ner написал(а):
Архив не распаковывается, весит 2.3Kb всего.
*** скрытое содержание ***

Перезалил... пробуй теперь

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Uglik · 15 Авг 2010

ndvkerch написал(а):
Тут нужно править шаблон модуля \modules\mod_mainmenu\tmpl\default.php и оборачивать выпадающие списки второго уровня в тег <div class="ulwrapper"></div> а также проверить еще соответствие всех классов и идентификаторов в верстке и в том что отдает джумла и либо править шаблон либо css. А еще лучще использовать специальный модуль Для просмотра ссылки Войди или Зарегистрируйся и на него уже натягивать дизайн и css

а что здесь \modules\mod_mainmenu\tmpl\default.php отвечает за вложенность меню что то не могу понять

PHP:

// no direct access
defined('_JEXEC') or die('Restricted access');


if ( ! defined('modMainMenuXMLCallbackDefined') )
{
function modMainMenuXMLCallback(&$node, $args)
{
	$user	= &JFactory::getUser();
	$menu	= &JSite::getMenu();
	$active	= $menu->getActive();
	$path	= isset($active) ? array_reverse($active->tree) : null;

	if (($args['end']) && ($node->attributes('level') >= $args['end']))
	{
		$children = $node->children();
		foreach ($node->children() as $child)
		{
			if ($child->name() == 'ul') {
				$node->removeChild($child);
			}
		}
	}

	if ($node->name() == 'ul') {
		foreach ($node->children() as $child)
		{
			if ($child->attributes('access') > $user->get('aid', 0)) {
				$node->removeChild($child);
			}
		}
	}

	if (($node->name() == 'li') && isset($node->ul)) {
		$node->addAttribute('class', 'parent');
	}

	if (isset($path) && (in_array($node->attributes('id'), $path) || in_array($node->attributes('rel'), $path)))
	{
		if ($node->attributes('class')) {
			$node->addAttribute('class', $node->attributes('class').' active');
		} else {
			$node->addAttribute('class', 'active');
		}
	}
	else
	{
		if (isset($args['children']) && !$args['children'])
		{
			$children = $node->children();
			foreach ($node->children() as $child)
			{
				if ($child->name() == 'ul') {
					$node->removeChild($child);
				}
			}
		}
	}

	if (($node->name() == 'li') && ($id = $node->attributes('id'))) {
		if ($node->attributes('class')) {
			$node->addAttribute('class', $node->attributes('class').' item'.$id);
		} else {
			$node->addAttribute('class', 'item'.$id);
		}
	}

	if (isset($path) && $node->attributes('id') == $path[0]) {
		$node->addAttribute('id', 'current');
	} else {
		$node->removeAttribute('id');
	}
	$node->removeAttribute('rel');
	$node->removeAttribute('level');
	$node->removeAttribute('access');
}
	define('modMainMenuXMLCallbackDefined', true);
}

modMainMenuHelper::render($params, 'modMainMenuXMLCallback');

3ner · 15 Авг 2010

Что-то у меня не получается с твоим архивом сделать меню, может есть косяк в исходниках.
Сдается мне что это файлы с какого-то TM шаблона. Если так, то с какого?

Как встроить выподающее меню в joomla

Uglik

Старатель

3ner

Мой дом здесь!

Uglik

Старатель

3ner

Мой дом здесь!

ndvkerch

Гуру форума

Uglik

Старатель

3ner

Мой дом здесь!

Uglik

Старатель

Uglik

Старатель

3ner

Мой дом здесь!