Multilevel Dropdown Menus In Prestashop

[lucasdemenezes]

hi, does anyone know which files to edit to have a left menu like this post? this post try to teach how to create a drop down menu, but they are not telling what files we need to edit to get it.

 

http://blog.belvg.com/multilevel-dropdown-menus-in-prestashop.html

[NemoPS]

Files are mentioned there actually, as far as I can see

 

prestashop/modules/blockcategories

 

and

 

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

[lucasdemenezes]

i tried, but, it doesnt works. can you explain better? like, the first code i put on that file, javascript code i put on that file and third code i put on that file. because i am not getting do that.

[lucasdemenezes]

where do i put this code?

 

<style>

 

#categories_block_left li {

position:relative;

}

 

.wrp{

    display: none;

    left: 91%;

    padding: 5px;

    position: absolute;

    top: -6px;

    width: 100%;

    z-index: 777;

}

 

.wrp .wrp{

    left: 89%;

}

 

#categories_block_left li:hover > .wrp{

display:block;

}

 

#categories_block_left li ul {

background: none repeat scroll 0 0 #FFFFFF;

border: 1px solid #E7E7E7;

}

 

#categories_block_left li ul li a{

padding: 10px 20px !important;

}

 

#categories_block_left li {

-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;

border-bottom: 1px dotted #E7E7E7;

position:relative;

}

#categories_block_left li.last {

border: none;

}

#categories_block_left li a {

   background-image: none;

    display: block;

    padding: 10px 20px 10px 12px;

}

 

#categories_block_left .selected {

background: none repeat scroll 0 0 #EEEEEE;

}

#categories_block_left li:hover {

background: none repeat scroll 0 0 #EEEEEE;

 

}

#categories_block_left li a:hover {

text-decoration:none;

}

 

#categories_block_left li ul {

margin-left: 20px;

}

 

</style>

 

 

and this code, where do i put?

 

 

<script>

  $(document).ready(function(){

 

           $(".wrp").parent().addClass('sub-item');

          $(".selected").parent().addClass('selecte');

 

  });

  </script>

 

 

and this code?

 

<style>

 

.sub-item{

position:relative;

 

}

 

.sub-item:before{

-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;

border-color: #fff #fff  #fff #000000;

    border-image: none;

    border-style: solid;

    border-width: 5px;

    bottom: 35%;

    content: "";

    position: absolute;

    right: 10px;

}

 

.sub-item:hover:before{

 

border-color: #EEEEEE #EEEEEE #EEEEEE #000000;

}

 

.sub-item:hover:before{

border-color: #EEEEEE #EEEEEE #EEEEEE #000000;

}

 

.selecte:before{

-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;

border-color: #EEEEEE #EEEEEE #EEEEEE #000000;

}

 

</style>

[NemoPS]

It's not exactly good practice, but they suggest putting it in the same tpl file apparently. They seem not to know prestashop well if they recommend it, it's dirty yet quick, so you can try it out that way, or do it clean by using hookDisplayHeader and creating separate css/js files

[lucasdemenezes]

hi, tried to use. but, it doesnt works. see the result on www.laoulet.com.br. see left blockcategory. i edit blockcategory.tpl. i put all that codes.

[NemoPS]

Hm, the page can't be reached for some reason. Which one did you modify? The one in the modules folder, or in themes/themename/modules?

[lucasdemenezes]

what is your country? i think that can be firewall or can you send me your skype? i can show you by teamviewer.