Multilevel Dropdown Menus In Prestashop

Multilevel Dropdown Menus In Prestashop

Sometimes you may need to arrange website navigation with multi-level drop-down list. Today, I’ll show how to do this using Category Block which is a standard Prestаshоp module. 

First, find it in the list of available modules and configure Maximum depth and enable Dynamic.

Now the module will display all links within the specified depth.

Next, we need to copy the folder blосkсаtegоries

prestashop/modules/blockcategories

to the folder ‘Modules’ of our theme

prestashop/themes/newtheme/modules/blockcategories

in this folder we need blосkсаtegоries.tpl

Now we start writing styles for our block directly in this template (you can transfer them to global.css)

I created a DIV with the class .wrp and wrapped all new lists with it. I need this to put distance between them. Also now with the help of this class I can define the child- list in the current link. I make this JS:

Now for each link with a child-list you can add an arrow which will inform about it. We create an arrow using the CSS3 pseudo-element ::   Before and Border

We now have a sufficiently easy and fast menu using minimum of JS .

Example:  http://belvg.info/demo/prestashop/responsive/

Multilevel dropdown menus in Prestаshоp

Multilevel dropdown menus in Prestаshоp



5 comments

  1. where do edit this codes? where do i put them? you need to be more specific. please, tell us about it.

  2. can you send me this your blockcategorie modified to my email? i dont get to do it. i love your post. send faster, please.

Post a new comment

top