Left categories block: Open subcategories on mouse hover

[yadav.kumar]

Hello,

 

I would like to have the mouse hover effect on the categories block on the left. Instead of [+], I need the user just hover the mouse over the category and it will displays the subcategories in it. Something like the mouse hover effect on the Top Horizontal Menu. When you click Home button in it, It will open a jquery based drop down menu and hovering the mouse over a category displays the subcategories. I need the same on the left categories block.

 

Someone helps !

Thank you

Regards,

Yad

[febykw]

i need too.. please help..

[hsmonline]

Anyone figured this out yet?

[mankomal]

Any update did some one find a solution to this ?

[vekia]

$('span.grower').mouseover(function(){
  toggleBranch($(this));
 });

 

use this js function in the /themes/default/js/tools/treeManagement.js file

[mankomal]

$('span.grower').mouseover(function(){
  toggleBranch($(this));
 });

 

use this js function in the /themes/default/js/tools/treeManagement.js file

 

Vekia

Thanks for your help its working

But this code only works when we place the mouse over the + sign or - sign

It doesnt works when we place the mouse over the category name

How can I make it work over the category name also

 

Cheers

[justicejustine]

Vekia

Thanks for your help its working

But this code only works when we place the mouse over the + sign or - sign

It doesnt works when we place the mouse over the category name

How can I make it work over the category name also

 

Cheers

 

I second this too, how can it work when just hovered over the entire category area? Anyone please help or found a solution?

[vekia]

you can add your <li> element class name to the script,

it will work similar then.

[ibndawood]

Hi Justine,

 

I'd recommend not to open up the menu on hover instead just keep the default behavior i.e. show the sub category on click. The user has better experience with on click than hover.

 

This is a good read : http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

 

This is just a recommendation but the client is always right

[david-k]

you can add your <li> element class name to the script,

it will work similar then.

 

Thank you very much, this solution works for me very well

$('span.grower').mouseover(function(){
toggleBranch($(this));
});

But I still can't figure out how to add the <li> statement to the class to use this script for the name of the category, not only for the +/- sign.

Please, can you help me and show me the code that i have to add to  treeManagement.js?

 

Thank you so much.

[vekia]

you can use this code in treeManagment.js file

add there something like:

$('#categories_block_left li').mouseover(function(){
toggleBranch($(this));
});

[david-k]

you can use this code in treeManagment.js file

add there something like:

$('#categories_block_left li').mouseover(function(){

toggleBranch($(this));

});

Thank you very much, it really WORKS!

[Mani rathnam]

you can use this code in treeManagment.js file

add there something like:

$('#categories_block_left li').mouseover(function(){

toggleBranch($(this));

});

Hi Vekia,

 

I am new to prestashop.. 

I have tried this category block hover option. Its working but Only first category is opening on hover. 

 

i have added the code inside the ready(function() in treeManagement.js file.

is that right?

 

Note : actually i am trying to convert the left block category as look like top menu.

I have converted somewhat similar to top menu. Have a look below.

http://www.colorconceptions.com/index.php

 

It is working fine when you clicked the category once. So I thought of adding this mouseover concept in the js file to expand the category on hover instead of clicking.

 

Please help.

Edited January 7, 2014 by manirathnam1988 (see edit history)

[Mani rathnam]

Hi,

 

Now mouseover option is working when i keep the mouse on open-close.png image. But its not working on the category name.

When i move the mouse on category name its not displaying the sub-category.

 

Please help me on this.

 

Thanks in advance.

[Mani rathnam]

Hi,

 

Now mouseover option is working when i keep the mouse on open-close.png image. But its not working on the category name.

When i move the mouse on category name its not displaying the sub-category.

 

Please help me on this.

 

Thanks in advance.

Hi,

 

Please help me on this. 

 

Thanks in advance

[Mani rathnam]

please any one help me on this.

[auther]

you can use this code in treeManagment.js file

add there something like:

$('#categories_block_left li').mouseover(function(){

toggleBranch($(this));

});

 

Hello Vekia,

 

Could you please specify the lines of code need to removed / replaced for the above.

 

Thanks.

[vekia]

use it somewhere in module .js file, for example, at the very end of the file

[Mani rathnam]

Hello Vekia,

 

Could you please specify the lines of code need to removed / replaced for the above.

 

Thanks.

Hi,

 

I have modified the left category as mouse hover feature. but it is somewhat slow in response (opening the sub-category).

 

visit my test site : http://www.colorconceptions.com/index.php?

 

Steps i have taken:

1. Modify the treeManagement to accept the mouse hover. like Vekia's comment, add the code in js file.

2. then try to modified the CSS of the left category block to accept the mouse hover option. eg: removing the [+] sign, mouse hover option, expand the sub categories towards right side.

 

Please let me know if you need further help. 

 

P.S : I am also new to PS, PHP and CSS. I have learned by myself and did this changes. So i am not sure whatever i did is right.  

 

Mani

[auther]

use it somewhere in module .js file, for example, at the very end of the file

 

Hello Vekia,

 I must be doing something wrong, i pasted the code as provided by you at the end of both these files and it still doesn't seem to work

 

themes/default/js/tools/treeManagement.js

themes/theme758/js/tools/treeManagement.js

 

PS version 1.5.4.1

Test site: www.sussta.com

 

Thanks,

Asif

[guilhermebarbeiro]

I follow this steps but my menu still click to open.Someone can help me?

This is my site: http://keroimpresso.com.br/site/index.php

[guilhermebarbeiro]

Someone can help?

[vekia]

I follow this steps but my menu still click to open.Someone can help me?

This is my site: http://keroimpresso.com.br/site/index.php

 

 

where you applied these changes?

[guilhermebarbeiro]

Apply in the left category menu column, the organe one on the left.

When mouse over expands

[guilhermebarbeiro]

I do the steps, paste the code: $('span.grower').mouseover(function(){

   toggleBranch($(this));

  });

in /public_html/site/themes/default2/js/tools//treeManagement.js

but nothing happens.

 

I need to change another file too?

[guilhermebarbeiro]

Someone?

[Demchaldo]

PrestaShop 1.6

 

I solved this problem  in such a way

 

to treeManagament.js add this code

$('ul.tree.dhtml span.grower').mouseover(function(){
			toggleBranch($(this));
		});

 under

$('ul.tree.dhtml span.grower').click(function(){
			toggleBranch($(this));
		});

now, tree colappse on hover

 

to better effect i modified grower class to 

  #categories_block_left li span.grower {
    display: block;
    position: absolute;
    right: 4px;
    top: 10px;
    cursor: pointer;
    font-family: "FontAwesome";
    font-size: 18px; 
	width: 100%;
	}

    #categories_block_left li span.grower.OPEN:before, #categories_block_left li span.grower.CLOSE:before {
      content: "\f106";
      display: block;
      vertical-align: middle;
	  float: right;
      width: 30px;
      height: 30px;
      color: #303030;
      line-height: 30px;
      text-align: center; }

method is work, but now category name isn't clicable

Edited August 4, 2015 by Demchaldo (see edit history)

[ionutgeorgescu]

Dear Vekia, 

I have a store and i want for a certain article ( manufacturers) when i hover to do nothing, to open only on click. Can you please help?