[Mod] Динамическое меню категорий (полное).

Тема в разделе "Shop-script", создана пользователем fbeyond, 20 авг 2008.

  1. fbeyond

    fbeyond Создатель

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

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

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

    Для желающих сделать вот такое меню - [​IMG].

    Берете приаттаченный файл 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.

    Удачи :)


    Автор скрипта - http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_slide_out_menu , я его всего лишь редактировал.
     

    Вложения:

    naisen, VenomHOLD, MastZzz и 9 другим нравится это.
  2. Hmelex

    Hmelex

    Регистр.:
    15 апр 2008
    Сообщения:
    515
    Симпатии:
    119
    Скрипт эффективный и главное простой. Тоже мучалась но сделать не удалось.

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

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

    - Зарубежные
    - Мерседес
    - непосредственно товар
    - Ниссан.....
    - непосредственно товар.
    ??????????????????????????????????????????:ah:
     
  3. fbeyond

    fbeyond Создатель

    Регистр.:
    11 июн 2008
    Сообщения:
    31
    Симпатии:
    28
    Конечно, можно.
    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}
    
    Думаю, дальше понятно...
     
    IRIDON нравится это.
  4. biznesoft

    biznesoft

    Регистр.:
    11 фев 2008
    Сообщения:
    510
    Симпатии:
    128
    Сделал все как описано в №1 посте.
    Результат "0", а именно каталог не отображается (его просто навсего не видно и он не кликабелен), хоть место под него есть.
    В чем может быть проблема?
     
  5. IRIDON

    IRIDON

    Регистр.:
    3 авг 2008
    Сообщения:
    227
    Симпатии:
    12
    Спасибо, очень класная штука, вопрос как изменить фон всппыхивающего окошка? Я в яве не очень.
     
  6. fbeyond

    fbeyond Создатель

    Регистр.:
    11 июн 2008
    Сообщения:
    31
    Симпатии:
    28
    Код:
    .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. В ошибке в коде и\или в его модификации. Опять-таки, пришлите,-посмотрим, разберемся.
     
    IRIDON нравится это.
  7. IRIDON

    IRIDON

    Регистр.:
    3 авг 2008
    Сообщения:
    227
    Симпатии:
    12
    Спасибо. Еще есть один вопрос не по меню. Переделал 4 шаблон (который в стандарте идет) он никак не вырадниваеться и стоит по левую стороно решир переместит колонку с права на лево (что усппешно зделал) немного доработки а вот по центру поставить не получаеться=(((( я уже всё перепробывал и просто Центр ставить и таблице центр задавать, посмотрел как в других шаблонах, зделал так же ноль на массу. Уже не знаю что делать.
     
  8. IRIDON

    IRIDON

    Регистр.:
    3 авг 2008
    Сообщения:
    227
    Симпатии:
    12
    Еще вопрос по меню- как изменить цвет сылок?
     
  9. Lawyer707

    Lawyer707

    Регистр.:
    23 сен 2006
    Сообщения:
    182
    Симпатии:
    93
    В Firefox 3 меню не работает :(
    Только в IE.
    В IE еще меню подъезжает под контент страницы. Как бы сделать поверх?
    Где грабли?
     
  10. fbeyond

    fbeyond Создатель

    Регистр.:
    11 июн 2008
    Сообщения:
    31
    Симпатии:
    28
    Без обид, но грабли в руках, видимо.
    Ибо у меня ничего нигде не подъезжает, да и последние лет 5 пользуюсь исключительно Файрфоксом.

    Смотрите свои таблицы стилей...