Делаем развернутое меню на jQuery
#41
Отправлено 16 January 2012 - 10:43 PM
#42
Отправлено 16 January 2012 - 11:49 PM
хз, возможно, какие-то стили пересекаются. потому как у меня все ок.У меня в IE9 при наведении мышки не появляются подменю, а в ГуглХроме нормально работает, может подкрутить какие настройки?
в .multinav ul свойство z-index: 100; добавляли ?
#43
Отправлено 18 January 2012 - 12:20 PM
Подключаю библиотеку на Jquery
1. Открываем фаил - big_category_tree.tpl
2. Находим:
........
Внимание! Это для версии 3.1
попробовал в 3 1 2 - вообще ничего не изменилось? так и должно быть без правки прямыми руками? )
или библиотека jQuery в ShopCMS отсутствует по умолчанию и ее надо подключить отдельно?
#44
Отправлено 18 January 2012 - 12:37 PM
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
#45
Отправлено 18 January 2012 - 12:57 PM
Спасибо за быстрый ответ, но, увы, не помогло - как было родное меню, так и осталось )jQuery в ShopCMS отсутствует по умолчанию, все верно. проще всего подключить в хидере через CDN, к примеру, так
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
---------- Сообщение объединено ----------
А это к чему тогда в head.tpl.html ?jQuery в ShopCMS отсутствует по умолчанию, все верно.
<script src="data/{$smarty.const.TPL}/jquery.tools.min.js" type="text/javascript"></script>
#46
Отправлено 18 January 2012 - 01:24 PM
jquery.tools.min.js - а хз что у вас за шаблон и кто его верстал в дефолтном такого нет.
#47
Отправлено 18 January 2012 - 04:54 PM
Шаблон compic.может другой блок каталога подключен, попробуйте остальные в управлении блоками.
jquery.tools.min.js - а хз что у вас за шаблон и кто его верстал в дефолтном такого нет.
В нем есть.
Заменял вашим стандартный big_category_tree.tpl.html
#48
Отправлено 18 January 2012 - 04:59 PM
Ну дак а может включен другой... А, и кеш чистили, кстати ?Заменял вашим стандартный big_category_tree.tpl.html
#49
Отправлено 18 January 2012 - 05:28 PM
само собой чистил, причем руками ( не доверяю я этой галочке ) ладно, не буду беспокоить, попробую сам разобратьсяНу дак а может включен другой... А, и кеш чистили, кстати ?
#50
Отправлено 29 January 2012 - 11:44 PM
#51
Отправлено 29 January 2012 - 11:59 PM
подскажите пожалуйста как сделать такое меню в шаблоне flower. Всё заменил как писал админ. Подскажите что подключать, что изменять))) я просто новичок) хотелось бы и себе такое)) p.s версия движка 3.1.2
В теме все подробно расписано. Пережевывать второй раз - сомнительное удовольствие. Если не получается сделать самому - обратитесь к профессионалам
#52
Отправлено 09 February 2012 - 05:45 PM
#53
Отправлено 09 February 2012 - 06:00 PM
можешь переформулировать вопрос? лично я не понимаю твоей задачименю "вкладками" кто-нибудь делал? категории и в описании товаров (характеристики, фото, описание, отзывы)
---------- Сообщение объединено ----------
можешь переформулировать вопрос? лично я не понимаю твоей задачименю "вкладками" кто-нибудь делал? категории и в описании товаров (характеристики, фото, описание, отзывы)
#54
Отправлено 09 February 2012 - 06:16 PM
1) категории открываются с наведением указателя (не переход, открытие под-категорий на главной)
2) "вкладки" в полном описании товара (см там же на розетке: "Всё | Характеристики | Фото | Оставить отзыв | Доставка")
#55
Отправлено 09 February 2012 - 06:42 PM
я делал по аналогии меню в этой теме, вертикальное и открывающееся при нажатии с использованием Java
[HIDE="1"]пример: lionel.com.ua[/HIDE]
если интересно могу выложить код
#56
Отправлено 09 February 2012 - 07:29 PM
если кто делал в описании "вкладки" или шарит, прошу помощи
#57
Отправлено 10 February 2012 - 03:18 AM
Учимся гуглить (как минимум первые 3 результата вас полностью устроят): [HIDE="1"]Вкладки на jQuery[/HIDE]если кто делал в описании "вкладки" или шарит, прошу помощи
Конечно выкладывайте, наш девиз: "Больше менюх, хороших и разных!"я делал по аналогии меню в этой теме, вертикальное и открывающееся при нажатии с использованием Java, если интересно могу выложить код
#58
Отправлено 10 February 2012 - 11:08 AM
Создание Java меню. Основной задачей было решение проблемы огромного меню с большим количеством категорий и подкатегорий. При открытии даже нескольких пунктов стандартных меню страница неимоверно растягивалась. Преимущества данного компактность, второй бонус – страница не перегружается.
[SPOILER="Рабочий пример"]Lionel.com.ua[/SPOILER]
Картинка меню:
[ATTACH]325.vB[/ATTACH]
Инструкция (не забываем сделать бэкап исходных файлов):
В папке core\tpl\user\ваш_шаблон\blocks\ создаем новый файл my_menu3_tpl.html со следущим содержанием (не забываем его включить в админ панели):
{if $big_categories_tree && $big_categories_tree_count>0}
{assign var="oldnumber" value=0}
{if $big_categories_tree[h].level < 4}
{if $smarty.const.CONF_MOD_REWRITE eq 1}#{/if}
{/if}
{if $big_categories_tree[h].level > 3}
{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}
{/if}
{assign var="oldnumber" value=$big_categories_tree[h].level}
{/if}
{/section}
{section name=h loop=$big_categories_tree}
{if $big_categories_tree[h].categoryID != 1}
{if $big_categories_tree[h].level > $oldnumber}
{/if}
{if $big_categories_tree[h].level < $oldnumber}
{section name=w loop=$oldnumber-$big_categories_tree[h].level}
{/section}
{/if}
{else}
{/if}
Добавляем в style.css стили (не совсем удачные, подкрутите сами):
.topnav { width: 213px; padding: 40px 28px 25px 0; font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif; } ul.topnav { padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none; } ul.topnav li {} ul.topnav li a { line-height: 10px; font-size: 11px; padding: 10px 5px; color: #000; display: block; text-decoration: none; font-weight: bolder; } ul.topnav li a:hover { background-color:#675C7C; color:white; } ul.topnav ul { margin: 0; padding: 0; display: none; } ul.topnav ul li { margin: 0; padding: 0; clear: both; } ul.topnav ul li a { padding-left: 20px; font-size: 10px; font-weight: normal; outline:0; } ul.topnav ul li a:hover { background-color:#D3C99C; color:#675C7C; } ul.topnav ul ul li a { color:silver; padding-left: 40px; } ul.topnav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C; } ul.topnav span{ float:right; }
Подключаем Javascript-ы в файл head.tpl.html, добавляем перед тегом следующее:
<script type="text/javascript" src="data/{$smarty.const.TPL}/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="data/{$smarty.const.TPL}/scriptbreaker-multiple-accordion-1.js"></script> {literal} <script language="JavaScript"> $(document).ready(function() { $(".topnav").accordion({ accordion:false, speed: 500, closedSign: '[+]', openedSign: '[-]' }); }); </script> {/literal}
В папку data\ кладем скрипты из архива (jquery-1.5.2.min.js и scriptbreaker-multiple-accordion-1.js):
[HIDE="1"][ATTACH]326.vB[/ATTACH][/HIDE]
Меню сделано для 5-уровневого дерева каталога товаров. В нем открывается только последняя, вложенная, категория.
[SPOILER="Код брал сдесь"]http://www.scriptbre...-accordion-menu[/SPOILER]
Делал на версии 3.1.2 (другие не пробовал).
#59
Отправлено 11 February 2012 - 01:59 PM
В продолжении выпадающего меню. Учим меню понимать вложенность.
Создаем файл к примеру: menu_li.tpl.html с содержимым:
{* шаблон блока развернутого дерева категорий *} {if $big_categories_tree && $big_categories_tree_count>0} {assign var="oldnumber" value=0} <div class="suckerdiv"> <ul id="suckertree1"> {section name=h loop=$big_categories_tree} {if $big_categories_tree[h].categoryID != 1} {if $big_categories_tree[h.index].level lt $big_categories_tree[h.index_next].level}{* вывод категорий *} <li><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}" {if $categoryID == $big_categories_tree[h].categoryID}class="bf"{/if}>{$big_categories_tree[h].name}</a> <ul> {else} {* вывод подкатегорий или категорий без вложенности *} <li><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}" {if $categoryID == $big_categories_tree[h].categoryID}class="bf"{/if}>{$big_categories_tree[h].name}</a></li> {/if} {if $big_categories_tree[h.index].level gt $big_categories_tree[h.index_next].level} </ul> </li> {/if} {/if} {/section} </ul> </div> {else} <div class="vcent">{$smarty.const.STRING_NO_CATEGORIES}</div> {/if}
Кладем в core/tpl/user/blocks/ваш шаблон, и подключаем его из админки.
создаем отдельный файл css. Как подключать знаете... В нем:
.suckerdiv ul{ margin: 0; padding: 0; list-style-type: none; width: 220px; /* Width of Menu Items */ border-bottom:; } .suckerdiv ul li{ position: relative; } /*Sub level menu items */ .suckerdiv ul li ul{ background: #cccccc; position: absolute; width: 220px; /*sub menu width*/ top: 0; } /* Sub level menu links style */ .suckerdiv ul li a{ display: block; overflow: auto; /*force hasLayout in IE7 */ color: black; text-decoration: none; text-align: left; background: #cccccc; padding: 3px 10px 3px 5px; border: 1px solid #fff; border-bottom: 0; } .suckerdiv ul li a:visited{ color: black; } .suckerdiv ul li a:hover{ background-color: yellow; text-decoration: none; } .suckerdiv .subfolderstyle{ background: url(ваша картинка.gif) no-repeat center right; } /* Holly Hack for IE \*/ * html .suckerdiv ul li { float: left; height: 1%; } * html .suckerdiv ul li a { height: 1%; } /* End */
Файл изображения (сами рисуете, желательно 5px Х 5px) кладем в data/ваш шаблон
Далее создаем файл ваше_имя.js, и кладем его также в data/ваш шаблон (соответственно также подключаем его), с содержимым:
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas function buildsubmenus(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle" if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item else //else if this is a sub level submenu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.display="block" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none" } } for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" } } } if (window.addEventListener) window.addEventListener("load", buildsubmenus, false) else if (window.attachEvent) window.attachEvent("onload", buildsubmenus)
Вот и все, теперь пользователь видит где есть вложенные категории, и где нет их.
#60
Отправлено 11 February 2012 - 09:06 PM
Хорошо когда структура имеет четко один уровень, а как если есть и 2 и 3 и 4....Меню сделано для 5-уровневого дерева каталога товаров. В нем открывается только последняя, вложенная, категория.