Многоступенчатое выпадающее меню

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Caeterra
phpBB 1.4.2
Сообщения: 51
Стаж: 15 лет 7 месяцев
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Многоступенчатое выпадающее меню

Сообщение Caeterra »

Здравствуйте. Я пытаюсь сделать выпадающее меню по принципу:

Код: Выделить всё

<ul>
	<li>Форум
		<ul>
			<li>Подфорум1
				<ul>
					<li>Подфорум1.1</li>
				</ul>
				<ul>
					<li>Подфорум1.2</li>
				</ul>
				<ul>
					<li>Подфорум1.3</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Код: Выделить всё

<!-- BEGIN forumrow -->
<ul id="menu_cat">	
 <li><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a>
<!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --> {forumrow.SUBFORUMS}<!-- ENDIF -->
</li></ul>
 <!-- END forumrow -->


-----------
CSS:

Код: Выделить всё

#menu_cat, #menu_cat ul {
 margin:0;
 padding: 0;
 list-style: none;
float:left;
}
 
#menu_cat:before,
#menu_cat:after {
 content: "";
 display: table;
}
#menu_cat:after {
 clear: both;
}
#menu_cat {
 zoom:1;
}

#menu_cat li {
 float: left;
 width: 200px;
 position: relative;
}
#menu_cat a {
 float: left;
 padding: 11px 20px;
 color: #424242;
 font: bold 12px Arial, Helvetica;
 text-decoration: none;

}
#menu_cat li:hover > a {
 color: #424242;
background-color:#e2e2e2 !important;
width: 178px;
}



#menu_cat li span:hover > a {
 color: #424242;
background-color:#e2e2e2 !important;
  width: 180px;
 border-radius: 3px;
}


#menu_cat ul {
 margin: 20px 0 0 0;
 _margin: 0; /*IE6 only*/
 opacity: 0;
visibility: hidden;
 position: absolute;
 top: 0;
 left: 215px;
 z-index: 9999;
  background: #fafafa;
}

#menu_cat li:hover > ul {
 opacity: 1;
 visibility: visible;
 margin: 0;
}
#menu_cat ul ul {
 top: 0;
 left: 197px;
 margin: 0 0 0 20px;
 _margin: 0; /*IE6 only*/
 
}
#menu_cat ul li {
 float: none;
 display: block;
 border: 0;
 _line-height: 0; /*IE6 only*/
 
}
 
#menu_cat ul a {
 padding: 11px;
 width: 200px;
 _height: 10px; /*IE6 only*/
 display: block;
 white-space: nowrap;
 float: none;
 text-transform: none;
}

#menu_cat ul a:hover {
 background: #fafafa;
color:#424242;
}

#menu_cat ul ul a:hover {
 background: #fafafa;
color:#424242;

}
 

-----
functions_display.php

Код: Выделить всё

foreach ($subforums_list as $subforum)
		{
			$s_subforums_list[] ='<li>'.'<a href="' . $subforum['link'] . '">' . $subforum['name'] . '</a>' .'</li>';
		}
		
		$max_subforums_column_length = 10;
		$i = 0;
		$s_subforums_list_str = '';
		foreach ($s_subforums_list as $k => $v)
		{
			if ($i == 0)
			{
				$s_subforums_list_str .= '<ul class="subforums">';
			}
			$s_subforums_list_str .= $v;
			if ($i == $max_subforums_column_length - 1)
			{
				$s_subforums_list_str .= '</ul>';
				$i = 0;
			}
			else
			{
				++$i;
			}
		}
		if ($i != 0)
		{
			$s_subforums_list_str .= '</ul>';
		}
		$s_subforums_list = $s_subforums_list_str;


----

Изображение 1
меню.jpg
У меня получается как на вложении, то есть подкатегории третьего уровня не выносятся дальше, а отображаются снизу..
Что добавить чтобы они выносились?
--
Конкретно интересует расположение <UL><LI></LI></UL> в functions_display.php, и возможно правка цикла..
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Питер
phpBB 1.4.4
Сообщения: 197
Стаж: 15 лет 2 месяца
Откуда: Москва
Благодарил (а): 1 раз
Поблагодарили: 2 раза

Re: Многоступенчатое выпадающее меню

Сообщение Питер »

Код: Выделить всё

</li><li style="width: 8em"><a href="#"style="background: url({T_THEME_PATH}/images/arrow-parent.gif) 100% 50% no-repeat;">Библиотечка</a>
	<ul>
		<li><a href="#" class="havechild">Поль Альтер</a>
		<ul>
				<li><a href="/Forum/viewtopic.php?f=201&t=464">Зов Лорелеи</a></li>
				<li><a href="/Forum/viewtopic.php?f=201&t=361">Ночные пляски смерти</a></li>
				<li><a href="/Forum/viewtopic.php?f=201&t=365">Мания Потрошителя</a></li>
				<li><a href="/Forum/viewtopic.php?f=201&t=297">Туннель, который убивал</a></li>
		</ul>
		<li><a href="#" class="havechild">Стен Блихер</a>
И так далее
Вопрос. Каким образом можно над каждым любым

Код: Выделить всё

<li><a href="#" class="havechild">Поль Альтер</a>
и так далее, сделать отличающимся текстом неклиабельную надпись.
Просто есть разные категории авторов: классики, современники, авторы пародийных детективов и так далее. Надо эти категории разделить.
Надеюсь, что объяснил нормально.
«-Да он не псих, просто детективов начитался.
- Да какая разница...» © Донна Эндрюс «Месть кованых фламинго»
Аватара пользователя
Nekstati
Поддержка
Поддержка
Сообщения: 3365
Стаж: 17 лет 6 месяцев
Благодарил (а): 37 раз
Поблагодарили: 1454 раза

Re: Многоступенчатое выпадающее меню

Сообщение Nekstati »

Caeterra писал(а):У меня получается как на вложении, то есть подкатегории третьего уровня не выносятся дальше, а отображаются снизу..
Что добавить чтобы они выносились?
--
Конкретно интересует расположение <UL><LI></LI></UL> в functions_display.php, и возможно правка цикла..
Многоуровневые меню обычно выводятся с помощью рекурсивных функций. Вот пример функции для вывода дерева форумов с уровнем вложенности до 10.

Код: Выделить всё

    function my_forumlist($parent_id, $level = 0)
    {
        global $phpbb_root_path, $phpEx, $my_forums;

        // Исполняем это лишь раз, на корневом уровне
        if ($level == 0)
        {
            global $db, $auth;
            $my_forums = array();

            // Извлекаем форумы из БД, запрос кэшируем на час
            $sql = 'SELECT *
                FROM ' . FORUMS_TABLE . '
                ORDER BY left_id ASC';
            $result = $db->sql_query($sql, 3600);

            while ($item = $db->sql_fetchrow($result))
            {
                // Учитываем права доступа
                if (!$auth->acl_get('f_list', $item['forum_id'])) continue;
                // Помещаем форумы в 3D-массив, используя parent_id как ключ
                $my_forums[$item['parent_id']][] = $item;
            }

            $db->sql_freeresult($result);
        }

        // Если у текущего форума нет вложенных форумов, уходим
        if (!isset($my_forums[$parent_id]) || $level > 10) return;

        // Открываем список
        $html = ($level == 0) ? "\n<ul class=\"menu-main-level\">\n" : "\n<ul class=\"menu-sub-level\">\n";

        foreach ($my_forums[$parent_id] as $item)
        {
            // Открываем элемент списка
            $html .= '<li' . (isset($my_forums[$item['forum_id']]) ? ' class="has-child"' : '') . '>';

            // Формируем ссылку
            $html .= '<a href="' . append_sid($phpbb_root_path . 'viewforum.' . $phpEx . '?f=' . $item['forum_id']) . '">' . $item['forum_name'] . '</a>';

            // Рекурсивно формируем подменю
            $html .= my_forumlist($item['forum_id'], $level + 1);

            // Закрываем элемент списка
            $html .= "</li>\n";
        }

        // Закрываем список
        $html .= "</ul>\n";

        return $html;
    } 
Эту функцию можно вставить, например, в includes/functions.php (в самый конец файла). Далее передаём меню в шаблон: ищем строку

Код: Выделить всё

		'SITENAME'						=> $config['sitename'],
И добавляем после неё

Код: Выделить всё

		'MY_FORUMLIST'					=> my_forumlist(0),
Затем переменную {MY_FORUMLIST} вставляем в шаблон (напр., в overall_header.html).

Будет сгенерирован такой HTML-код:

Код: Выделить всё

<ul class="menu-main-level">
	<li>
		<a href="">Category_1</a>
	</li>
	<li class="has-child">
		<a href="">Category_2</a>
		<ul class="menu-sub-level">
			<li>
				<a href="">Forum_1</a>
			</li>
			<li class="has-child">
				<a href="">Forum_2</a>
				<ul class="menu-sub-level">
					<li>
						<a href="">Subforum_1</a>
					</li>
					<li>
						<a href="">Subforum_2</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
Caeterra
phpBB 1.4.2
Сообщения: 51
Стаж: 15 лет 7 месяцев
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Re: Многоступенчатое выпадающее меню

Сообщение Caeterra »

Просто супер!!! Спасибо!!!
Caeterra
phpBB 1.4.2
Сообщения: 51
Стаж: 15 лет 7 месяцев
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Re: Многоступенчатое выпадающее меню

Сообщение Caeterra »

У меня вот еще вопрос возник.. Как написать условие чтобы ссылки работали только в последнем подменю? А первые, вторые не перенаправляли?
Аватара пользователя
Nekstati
Поддержка
Поддержка
Сообщения: 3365
Стаж: 17 лет 6 месяцев
Благодарил (а): 37 раз
Поблагодарили: 1454 раза

Re: Многоступенчатое выпадающее меню

Сообщение Nekstati »

Код: Выделить всё

			// Формируем ссылку
			$html .= '<a href="' . append_sid($phpbb_root_path . 'viewforum.' . $phpEx . '?f=' . $item['forum_id']) . '">' . $item['forum_name'] . '</a>';
→

Код: Выделить всё

			// Формируем ссылку
			$html .= ($level < 2) ? ($item['forum_name']) : ('<a href="' . append_sid($phpbb_root_path . 'viewforum.' . $phpEx . '?f=' . $item['forum_id']) . '">' . $item['forum_name'] . '</a>');
Caeterra
phpBB 1.4.2
Сообщения: 51
Стаж: 15 лет 7 месяцев
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Re: Многоступенчатое выпадающее меню

Сообщение Caeterra »

Спасибо, работает! Единственное, что теперь стили не работают в первых двух меню, видимо потому что они не как ссылки теперь.. Можете помочь тут разобраться?
Код у меня такой:

Код: Выделить всё

function my_forumlist($parent_id, $level = 0)
    {
        global $phpbb_root_path, $phpEx, $my_forums;

        // Исполняем это лишь раз, на корневом уровне
        if ($level == 0)
        {
            global $db, $auth;
            $my_forums = array();

            // Извлекаем форумы из БД, запрос кэшируем на час
            $sql = 'SELECT *
                FROM ' . FORUMS_TABLE . '
                ORDER BY left_id ASC';
            $result = $db->sql_query($sql, 3600);

            while ($item = $db->sql_fetchrow($result))
            {
                // Учитываем права доступа
                if (!$auth->acl_get('f_list', $item['forum_id'])) continue;
                // Помещаем форумы в 3D-массив, используя parent_id как ключ
                $my_forums[$item['parent_id']][] = $item;
            }

            $db->sql_freeresult($result);
        }

        // Если у текущего форума нет вложенных форумов, уходим
        if (!isset($my_forums[$parent_id]) || $level > 10) return;

        // Открываем список
        $html = ($level == 0) ? "\n<ul id=\"menu_cat\">\n" : "\n<ul>\n";

        foreach ($my_forums[$parent_id] as $item)
        {
            // Открываем элемент списка
            $html .= '<li' . (isset($my_forums[$item['forum_id']]) ? '' : '') . '>';

            // Формируем ссылку
           $html .= ($level < 2) ? ($item['forum_name']) : ('<a href="' . append_sid($phpbb_root_path . 'viewforum.' . $phpEx . '?f=' . $item['forum_id']) . '">' . $item['forum_name'] . '</a>');

            // Рекурсивно формируем подменю
            $html .= my_forumlist($item['forum_id'], $level + 1);

            // Закрываем элемент списка
            $html .= "</li>\n";
        }

        // Закрываем список
        $html .= "</ul>\n";

        return $html;
    } 
CSS:

Код: Выделить всё

 #menu_cat, #menu_cat ul {
 margin:0;
 padding: 0;
 list-style: none;
float:left;
}
 
  
 .menu_cat{
 

 text-decoration: none;
background-color:#fff !important;
 -moz-box-shadow: 0  0 2px #9b9b9b;
 -webkit-box-shadow: 0  0 2px #9b9b9b;
 box-shadow: 0  0 2px #9b9b9b;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 }
 
#menu_cat:before,
#menu_cat:after {
 content: "";
 display: table;
}
#menu_cat:after {
 clear: both;
}
#menu_cat {
 zoom:1;
}

#menu_cat li {
 float: left;
 width: 200px;
 position: relative;
}
#menu_cat a {
 float: left;
 padding: 11px 20px;
 color: #424242;
 font: bold 12px Arial, Helvetica;
 text-decoration: none;

}
 

#menu_cat  li:hover > a {
 color: #424242;
background-color:#e2e2e2 !important;
  background: url("{T_THEME_PATH}/img/body/vector.png") ;
 background-repeat:no-repeat;
background-position: right;
  width: 178px;

  -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;

}


*html #menu_cat li a:hover { /* IE6 only */
 color: #424242;
background-color:#e2e2e2 !important;
  background: url("{T_THEME_PATH}/img/body/vector.png") ;
 background-repeat:no-repeat;
background-position: right;
 -moz-box-shadow: 0 0 1px #9b9b9b;
 -webkit-box-shadow: 0 0 1px #9b9b9b;
 box-shadow: 0 0 1px #9b9b9b;
 
}
  

#menu_cat ul {
 margin: 20px 0 0 0;
 _margin: 0; /*IE6 only*/
 opacity: 0;
visibility: hidden;
 position: absolute;
 top: 0;
 left: 215px;
 z-index: 9999;
  background: #fff;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -moz-box-shadow: 0  0 2px #9b9b9b;
 -webkit-box-shadow: 0  0 2px #9b9b9b;
 box-shadow: 0  0 2px #9b9b9b;

}
#menu_cat li:hover > ul {
 opacity: 1;
 visibility: visible;
 margin: 0;
}
#menu_cat ul ul {
 top: 0;
 left: 197px;
 margin: 0 0 0 20px;
 _margin: 0; /*IE6 only*/
 
}
#menu_cat ul li {
 float: none;
 display: block;
 border: 0;
 _line-height: 0; /*IE6 only*/
 
}
 
#menu_cat ul a {
 padding: 11px;
 width: 200px;
 _height: 10px; /*IE6 only*/
 display: block;
 white-space: nowrap;
 float: none;
 text-transform: none;
}
#menu_cat ul a:hover {
 background: #fff;
color:#424242;
    background: url("{T_THEME_PATH}/img/body/vector.png") ;
 background-repeat:no-repeat;
background-position: right;
}

#menu_cat ul ul a:hover {
 background: #fff;
color:#424242;

}
 
 

$(function() {
 if ($.browser.msie && $.browser.version.substr(0,1)<7)
 {
 $('li').has('ul').mouseover(function(){
 $(this).children('ul').css('visibility','visible');
 }).mouseout(function(){
 $(this).children('ul').css('visibility','hidden');
 })
 }
});
Аватара пользователя
Nekstati
Поддержка
Поддержка
Сообщения: 3365
Стаж: 17 лет 6 месяцев
Благодарил (а): 37 раз
Поблагодарили: 1454 раза

Re: Многоступенчатое выпадающее меню

Сообщение Nekstati »

Код: Выделить всё

            // Формируем ссылку
           $html .= ($level < 2) ? ('<a>' . $item['forum_name'] . '</a>') : ('<a href="' . append_sid($phpbb_root_path . 'viewforum.' . $phpEx . '?f=' . $item['forum_id']) . '">' . $item['forum_name'] . '</a>');
Caeterra
phpBB 1.4.2
Сообщения: 51
Стаж: 15 лет 7 месяцев
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Re: Многоступенчатое выпадающее меню

Сообщение Caeterra »

Еще раз спасибо! :!:

Вернуться в «Стили для phpBB 3.0.x»