Модуль Динамическое меню категорий (полное).

fbeyond

Создатель
Регистрация
11 Июн 2008
Сообщения
31
Реакции
27
[Модуль] Динамическое меню категорий (полное).

Приветствую.

Это мой первый топик на этом форуме, хотел бы сделать его максимально интересным :)

Для желающих сделать вот такое меню -
attachment.php
.

Берете приаттаченный файл slide-out-menu-new.js
Кладете его куда-нибудь на сервер.


Вставляете данный кусок в свой файл стилей .css
Код:
#dhtmlgoodies_menu	li{	/* Main menu <li> */
	list-style-type:none;	/* No bullets */
	margin:0px;	/* No margin - needed for Opera */
}
#dhtmlgoodies_menu ul{
	margin:0px;	/* No <ul> air */
	padding:0px;	/* No <ul> air */
}
#dhtmlgoodies_menu ul li ul{	/* Styling for those who doesn't have javascript enabled */
	padding-left:0px;
}
#dhtmlgoodies_menu	li a{	/* Main menu links */

	height:15px;	/* 20 pixel height */
	line-height:15px;	/* 20 pixel height */
	font-family:		verdana,arial,helvetica,sans-serif;
	font-size:		12px;
	margin:1px;	/* A little bit of air */
	padding:1px;	/* Air between border and text inside */
	display:block;
}
#dhtmlgoodies_menu	li a:hover, #dhtmlgoodies_menu .activeMainMenuItem{

}
.dhtmlgoodies_subMenu{
	visibility:hidden;
	position:absolute;
	overflow:hidden;
	border: solid gray 1px;
	background: #fff4da;
	font-family:arial;
	text-align:left;

}
.dhtmlgoodies_subMenu ul{
	margin:0px;
	padding:0px;
}
.dhtmlgoodies_subMenu ul li{
	list-style-type:none;
	margin:0px;
	padding:1px;	/* 1px of air between submenu border and sub menu item - (the "white" space you see on mouse over )*/
}
.dhtmlgoodies_subMenu ul li a{	/* Sub menu items */
	white-space:nowrap;	/* No line break */
	text-decoration:none;	/* No underline */
	font-family:		verdana,arial,helvetica,sans-serif;
	font-size:		12px;
	height:16px;	/* 16 pixels height */
	line-height:16px;	/* 16 pixels height */
	padding:1px;	/* 1px of "air" inside */
	border: solid gray 1px;
	display:block;	/* Display as block - you shouldn't change this */
}
.dhtmlgoodies_subMenu ul li a:hover{	/* Sub menu items - mouse over effects */
	text-decoration:underline;	/* No underline */
}


Меняете (полностью) содержимое файла templates/.../category_tree.tpl.html на это:
Код:
<div id="dhtmlgoodies_menu" style="visibility: hidden;">
<ul>
{section name=i loop=$root_categories}
<li><a href="index.php?categoryID={$root_categories[i][0]}" class="cat">{$root_categories[i][1]}</a>
{* show sub categories *}
{assign var="tmp" value=0}
{section name=j loop=$root_categories_subs}
{if $root_categories_subs[j][3] == $root_categories[i][0]}
{if $tmp == 1}
{else}
{assign var="tmp" value=1}
<ul>
{/if}
<li><a href="index.php?categoryID={$root_categories_subs[j][0]}" class="faq">{$root_categories_subs[j][1]}</a></li>
{/if}
{/section}
</ul>
</li>
{/section}
</ul>
</div>

Прописываем в head.tpl.html -
Код:
<script type="text/javascript" src="/[B]путь до вашего файла[/B]/slide-out-menu-new.js"></script>


Всё, должно заработать.
А дальше уже играетесь с настройками в файле .js и .css.

Удачи :)


Автор скрипта - Для просмотра ссылки Войди или Зарегистрируйся , я его всего лишь редактировал.
 

Вложения

  • ajaxmenu.gif
    ajaxmenu.gif
    7 KB · Просмотры: 1.083
  • slide-out-menu-new.rar
    3 KB · Просмотры: 164
Скрипт эффективный и главное простой. Тоже мучалась но сделать не удалось.

Однако вопрос у меня а реально ли сделать так чтобы и под под кагегория выводилась.

Пример:
АВТОМОБИЛИ
- Отечественные
- Жигули
- непосредственно товар

- Зарубежные
- Мерседес
- непосредственно товар
- Ниссан.....
- непосредственно товар.
??????????????????????????????????????????:ah:
 
Однако вопрос у меня а реально ли сделать так чтобы и под под кагегория выводилась.

Конечно, можно.
category_tree.tpl.html:
Код:
<div id="dhtmlgoodies_menu" style="visibility: hidden;">
<ul>
{section name=i loop=$root_categories}
<li><a href="index.php?categoryID={$root_categories[i][0]}" class="cat">{$root_categories[i][1]}</a>
{* show sub categories *}
{assign var="tmp" value=0}
{section name=j loop=$root_categories_subs}
{if $root_categories_subs[j][3] == $root_categories[i][0]}
{if $tmp == 1}
{else}
{assign var="tmp" value=1}
<ul>
{/if}
<li><a href="index.php?categoryID={$root_categories_subs[j][0]}" class="faq">{$root_categories_subs[j][1]}</a>
<ul>
<li><a href="#">Sub Sub Item #1</a></li>
<li><a href="#">Sub Sub Item #2</a></li>
<li><a href="#">Sub Sub Item #3</a></li>
</ul>
</li>
{/if}

Думаю, дальше понятно...
 
Сделал все как описано в №1 посте.
Результат "0", а именно каталог не отображается (его просто навсего не видно и он не кликабелен), хоть место под него есть.
В чем может быть проблема?
 
Спасибо, очень класная штука, вопрос как изменить фон всппыхивающего окошка? Я в яве не очень.
 
Спасибо, очень класная штука, вопрос как изменить фон всппыхивающего окошка? Я в яве не очень.

Код:
.dhtmlgoodies_subMenu{
	visibility:hidden;
	position:absolute;
	overflow:hidden;
	border: solid gray 1px;
	[B][U][I][COLOR="Red"]background: #fff4da;[/COLOR][/I][/U][/B]
	font-family:arial;
	text-align:left;

}


Добавлено через 1 минуту
Вариантов два:
1. в настройках вашего браузера. Потому что у все всё открывается. Пришлите ссылку на ваш сайт, я посмотрю. Все ли в порядке. Посмотрите в браузере на запрет яваскрипта, например.

2. В ошибке в коде и\или в его модификации. Опять-таки, пришлите,-посмотрим, разберемся.
 
Спасибо. Еще есть один вопрос не по меню. Переделал 4 шаблон (который в стандарте идет) он никак не вырадниваеться и стоит по левую стороно решир переместит колонку с права на лево (что усппешно зделал) немного доработки а вот по центру поставить не получаеться=(((( я уже всё перепробывал и просто Центр ставить и таблице центр задавать, посмотрел как в других шаблонах, зделал так же ноль на массу. Уже не знаю что делать.
 
Еще вопрос по меню- как изменить цвет сылок?
 
В Firefox 3 меню не работает :(
Только в IE.
В IE еще меню подъезжает под контент страницы. Как бы сделать поверх?
Где грабли?
 
Без обид, но грабли в руках, видимо.
Ибо у меня ничего нигде не подъезжает, да и последние лет 5 пользуюсь исключительно Файрфоксом.

Смотрите свои таблицы стилей...
 
Назад
Сверху