Marek Detko 4 Posted October 27, 2012 Posted October 27, 2012 Hello, I'm sharing with you very simple small tip how you can add to block_categories_menu default supperfish vertical menu from the block_top_menu. You learn a basic functionality and to fit it with your theme you might continue to work with your css files. The basic idea of this small tip is that you don't need to buy or upload any new files. We use the files that we already have in system. This works for new Prestashop 1.5.x. /modules/blockcategories/category-tree-branch.tpl @line 28 #1 tip: to disable or turn off onmouseover tooltip block categories <a> tag link remove this: title="{$node.desc|escape:'htmlall':'UTF-8'}" <a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}>{$node.name|escape:'htmlall':'UTF-8'}</a> #2 tip: to show names of categories instead of description in onmouseover tooltips block categories <a> tag change to: title="{$node.name|escape:'htmlall':'UTF-8'}" <a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if} title="{$node.name|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a> --- /modules/blockcategories/blockcategories.tpl @line 31 add new class "sf-vertical" after "sf-menu": <ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow"> --- /modules/blocktopmenu/css/superfish-modified.css add these lines at the end of file: /*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/ .sf-vertical, .sf-vertical li { width: 200px; background: transparent url(../img/bg_blocktopmenu.png) repeat 0 0; /* change this if you want to play with background color */ /*background: #999;*/ } /* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */ .sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 200px; /* match ul width */ top: 0; } /*** alter arrow directions ***/ .sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */ .sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/ /* hover arrow direction for modern browsers*/ .sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** this will remove margin-left from global.css to display submenu ***/ #categories_block_left li ul {margin-left:0 !important;} 4 Share this post Link to post Share on other sites
Suthichai 20 Posted December 9, 2012 Posted December 9, 2012 Very useful. Thank you. Share this post Link to post Share on other sites
eloddevil 1 Posted January 18, 2013 Posted January 18, 2013 (edited) Thx ! Edited February 24, 2013 by eloddevil (see edit history) Share this post Link to post Share on other sites
Baldrog 0 Posted February 4, 2013 Posted February 4, 2013 danke my friend Share this post Link to post Share on other sites
datshay 2 Posted February 24, 2013 Posted February 24, 2013 Thanks a lot for sharing. I was looking for something like this. Thanks again Share this post Link to post Share on other sites
Vilas 19 Posted February 25, 2013 Posted February 25, 2013 Thx ! Hi Friend, Can u provide me the modified files as I am unable to understand exactly what I have to modify to make this kind of module. Thanks Share this post Link to post Share on other sites
alecsio 0 Posted June 7, 2013 Posted June 7, 2013 Hello, I'm having problems in editing the file /modules/blockcategories/blockcategories.tpl I cannot find in it the line <ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow"> but what I find is only <ul class="tree {if $isDhtml}dhtml{/if}"> . Is it because I'm using the last version of Prestashop 1.5.4.1? Can anyone help me? Thank you Share this post Link to post Share on other sites
Captain FLAM 71 Posted June 17, 2013 Posted June 17, 2013 Very useful. Thanks Share this post Link to post Share on other sites
sadaf 4 Posted June 24, 2013 Posted June 24, 2013 i did as you said but it doesn't work... actually the css name does not change at all.. even if i changed it in the file.. need help plz... Share this post Link to post Share on other sites
sadaf 4 Posted June 24, 2013 Posted June 24, 2013 i just needed off the cache and its there thanks a lott Share this post Link to post Share on other sites
alexglavan 1 Posted July 3, 2013 Posted July 3, 2013 Take a look on my menu: http://addons.prestashop.com/en/front-office-features-prestashop-modules/81[spam-filter]vertical-menu.html Share this post Link to post Share on other sites
Sissel 1 Posted July 7, 2013 Posted July 7, 2013 (edited) ............... Edited February 26, 2014 by Sissel (see edit history) Share this post Link to post Share on other sites
benignus 1 Posted September 13, 2013 Posted September 13, 2013 I want this for 1.4 ------- please help Share this post Link to post Share on other sites
TeNToRi 2 Posted December 13, 2013 Posted December 13, 2013 Tnx a lot, it's great Share this post Link to post Share on other sites
farzad123 0 Posted January 15, 2014 Posted January 15, 2014 really thanks i was searching the web almost 7hours for free module which can do this for me Share this post Link to post Share on other sites
geotargetplus 5 Posted February 22, 2014 Posted February 22, 2014 Thanks! Work with 1.5.6.1 Share this post Link to post Share on other sites
kin0kin 6 Posted May 8, 2014 Posted May 8, 2014 (edited) In 1.6 there are few block categories file: blockcategories.tpl {* * 2007-2014 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2014 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} {if $blockCategTree && $blockCategTree.children|@count} <!-- Block categories module --> <div id="categories_block_left" class="block"> <h4 class="title_block">{if isset($currentCategory)}{$currentCategory->name|escape}{else}{l s='Categories' mod='blockcategories'}{/if}</h4> <div class="block_content"> <ul class="tree {if $isDhtml}dhtml{/if}"> {foreach from=$blockCategTree.children item=child name=blockCategTree} {if $smarty.foreach.blockCategTree.last} {include file="$branche_tpl_path" node=$child last='true'} {else} {include file="$branche_tpl_path" node=$child} {/if} {/foreach} </ul> {* Javascript moved here to fix bug #PSCFI-151 *} <script type="text/javascript"> // <![CDATA[ // we hide the tree only if JavaScript is activated $('div#categories_block_left ul.dhtml').hide(); // ]]> </script> </div> </div> <!-- /Block categories module --> {/if} blockcategories_top.tpl {* * 2007-2014 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2014 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- Block categories module --> <div id="categories_block_top"> <div class="category_top"> <div class="list"> <ul class="tree {if $isDhtml}dhtml{/if} sf-menu sf-js-enabled clearfix"> {foreach from=$blockCategTree.children item=child name=blockCategTree} {if $smarty.foreach.blockCategTree.last} {include file="$branche_tpl_path" node=$child last='true'} {else} {include file="$branche_tpl_path" node=$child} {/if} {if isset($blockCategTree.thumbnails) && $blockCategTree.thumbnails|count > 0} <div id="category-thumbnails"> {foreach $blockCategTree.thumbnails as $thumbnail} <div>{$thumbnail}</div> {/foreach} </div> {/if} {if ($smarty.foreach.blockCategTree.iteration mod $numberColumn) == 0 AND !$smarty.foreach.blockCategTree.last} </ul> </div> </div> <div class="category_footer" style="float:left;clear:none;width:{$widthColumn}%"> <div style="float:left" class="list"> <ul class="tree {if $isDhtml}dhtml{/if}"> {/if} {/foreach} </ul> </div> </div> <br class="clear"/> </div> <!-- /Block categories module --> where do I make the changes? Edited May 8, 2014 by kin0kin (see edit history) Share this post Link to post Share on other sites
rajlaskar 20 Posted June 25, 2014 Posted June 25, 2014 hi in case someone need more professional vertical mega menu http://www.estyle.in/prestashop/index.php http://store1.in/index.php More details here http://www.prestashop.com/forums/topic/326234-mega-menu-amazon-style/?do=findComment&comment=1679379 Share this post Link to post Share on other sites
fmilland 0 Posted October 8, 2014 Posted October 8, 2014 In 1.6 there are few block categories file: blockcategories.tpl {* * 2007-2014 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2014 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} {if $blockCategTree && $blockCategTree.children|@count} <!-- Block categories module --> <div id="categories_block_left" class="block"> <h4 class="title_block">{if isset($currentCategory)}{$currentCategory->name|escape}{else}{l s='Categories' mod='blockcategories'}{/if}</h4> <div class="block_content"> <ul class="tree {if $isDhtml}dhtml{/if}"> {foreach from=$blockCategTree.children item=child name=blockCategTree} {if $smarty.foreach.blockCategTree.last} {include file="$branche_tpl_path" node=$child last='true'} {else} {include file="$branche_tpl_path" node=$child} {/if} {/foreach} </ul> {* Javascript moved here to fix bug #PSCFI-151 *} <script type="text/javascript"> // <![CDATA[ // we hide the tree only if JavaScript is activated $('div#categories_block_left ul.dhtml').hide(); // ]]> </script> </div> </div> <!-- /Block categories module --> {/if} blockcategories_top.tpl {* * 2007-2014 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2014 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- Block categories module --> <div id="categories_block_top"> <div class="category_top"> <div class="list"> <ul class="tree {if $isDhtml}dhtml{/if} sf-menu sf-js-enabled clearfix"> {foreach from=$blockCategTree.children item=child name=blockCategTree} {if $smarty.foreach.blockCategTree.last} {include file="$branche_tpl_path" node=$child last='true'} {else} {include file="$branche_tpl_path" node=$child} {/if} {if isset($blockCategTree.thumbnails) && $blockCategTree.thumbnails|count > 0} <div id="category-thumbnails"> {foreach $blockCategTree.thumbnails as $thumbnail} <div>{$thumbnail}</div> {/foreach} </div> {/if} {if ($smarty.foreach.blockCategTree.iteration mod $numberColumn) == 0 AND !$smarty.foreach.blockCategTree.last} </ul> </div> </div> <div class="category_footer" style="float:left;clear:none;width:{$widthColumn}%"> <div style="float:left" class="list"> <ul class="tree {if $isDhtml}dhtml{/if}"> {/if} {/foreach} </ul> </div> </div> <br class="clear"/> </div> <!-- /Block categories module --> where do I make the changes? This would be great if someone would help for 1.6. Share this post Link to post Share on other sites
lovemyseo 5 Posted January 27, 2015 Posted January 27, 2015 Hello, I'm sharing with you very simple small tip how you can add to block_categories_menu default supperfish vertical menu from the block_top_menu. You learn a basic functionality and to fit it with your theme you might continue to work with your css files. The basic idea of this small tip is that you don't need to buy or upload any new files. We use the files that we already have in system. This works for new Prestashop 1.5.x. /modules/blockcategories/category-tree-branch.tpl @line 28 #1 tip: to disable or turn off onmouseover tooltip block categories <a> tag link remove this: title="{$node.desc|escape:'htmlall':'UTF-8'}" <a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}>{$node.name|escape:'htmlall':'UTF-8'}</a>#2 tip: to show names of categories instead of description in onmouseover tooltips block categories <a> tag change to: title="{$node.name|escape:'htmlall':'UTF-8'}" <a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if} title="{$node.name|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a> --- /modules/blockcategories/blockcategories.tpl @line 31 add new class "sf-vertical" after "sf-menu": <ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow">--- /modules/blocktopmenu/css/superfish-modified.css add these lines at the end of file: /*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/ .sf-vertical, .sf-vertical li { width: 200px; background: transparent url(../img/bg_blocktopmenu.png) repeat 0 0; /* change this if you want to play with background color */ /*background: #999;*/ } /* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */ .sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 200px; /* match ul width */ top: 0; } /*** alter arrow directions ***/ .sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */ .sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/ /* hover arrow direction for modern browsers*/ .sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** this will remove margin-left from global.css to display submenu ***/ #categories_block_left li ul {margin-left:0 !important;} Will this work on PS 1.6+ Share this post Link to post Share on other sites
Deepa Durairajan 0 Posted March 23, 2015 Posted March 23, 2015 Thank you for your sharing.. But this is not working in prestashop_1.6.0.13 could you please help me on this... Share this post Link to post Share on other sites
Recommended Posts