[SOLVED]Vertical menu with product categories

[itdes]

Hello,

 

I'm a new user of PrestaShop, 1.5.6.0 version, and in the last couple of days am trying to figure out how to show the product categories and subcategories in a vertical menu, same menu as the 'Top horizontal menu' but a vertical flyout one at the left column of the page. I searched a lot, but couldn't find a solution. The way that the Categories block shows the categories and products isn't the way I have to show these items.

If anyone had encountered a similar issue?

 

Thanks.

Edited October 18, 2013 by itdes (see edit history)

[vekia]

just wondering what you exactly expect, something like:

 

?

[itdes]

Yes, exactly like that one on the picture you've shared, containing just the product categories and subcategories, without the "Home", "Delivery" etc.

[vekia]

it's a snapshot from my new modification of block top module. it will be available for free, i will let you know

[itdes]

I'm also trying to modify the block top menu to achieve this, seems like working, but there's some jQuery issue. Thank you very much, I'm looking forward to see your module.

Thanks again.

[vekia]

it will be released tommorow!

[itdes]

Has it been released already? I got it working at my end, but would like to chech it out, if it is available.

Thank you.

[safa]

maybe my module helping you .

http://addons.prestashop.com/en/front-office-features-prestashop-modules/5528-block-categories-slide-module-vertical-sliding.html

[vekia]

Has it been released already? I got it working at my end, but would like to chech it out, if it is available.

Thank you.

yes it is, here is library:

 

temporary disabled

[itdes]

Thank you, vekia. I'm going to give it a try now.

[vekia]

let me know if something will not work, we want to release it officially asap, but we need to make some tests in separate installations

[itdes]

Sorry for the late reply, I just didn't see your last post on time.

I tested the module and it works good, but the 'Top horizontal menu' also turned into a vertical one.

[vekia]

it using the same css stylesheet file, this is why

 

so you want to use these both modules, right?

i can modify it before official release

[itdes]

Yes, I wanted to use both menus. But I adjusted it already here. Maybe it is going to be useful to have this additional option in the official release.

Thank you.

[vekia]

it will be thank you for your suggestion.

i will add this feature and also release official version asap

thank you for suggestions

[PascalVG]

Hi Vekia,

tried to install your new blockcat using install-> upload zip file, but got an error:

 

Maybe have a look.

For your info,

pascal

 

PS 1.5.6. Clean install)

[vekia]

hmm wierdy :| for me everything works fine, it's a copy of official module, nothing changed in the core, only js and css files

[PascalVG]

Fixed:

In blockcat.php:

require (dirname(__FILE__).'/MenuCatLinks.class.php');

 

with small letters...

 

That helps.

 

Also, change the description of the module. Still "Horizontal" in it

 

pascal

[Antonis S]

Hi,

 

i've installed it on PS 1.5.6.0 and it destroyed my top horizontal menu and also displays the menu twice and i cannot remove it.

Cat you think of a reason?

 

Antonis

 

 

[vahidafshari]

If i want to use vertical menu in main page on theme that not support left & right sidebar, how can do this?

[vekia]

this module is a copy of horizontal top menu as i stated above.

uninstall this addon because it changing top menu styles too (because it's based on this module)

[Antonis S]

ahh i see.

 

thank you for your answer

[vekia]

it's almost ready, i will inform you here when the full version will be released. i temporary removed library due to the confusion you had

[Antonis S]

great,

 

thanks again

 

Antonis

[tapuknight]

This is really nice to hear, this type of module is coming. I am eagerly waiting for this to apply on my site.. If it takes time can you please give me the code you made... it will be so  kind of you. best wishes and advance thanks.

[tapuknight]

eagerly waiting for it..

[jahidulewu]

can any one give me the module link?

 

I am waiting for this type of module.

[vekia]

module is currently unavailable.

i disabled it due to the conflict with top horizontal menu

if it will be fixed, i will upload it once again.

[Denys06]

module is currently unavailable.

i disabled it due to the conflict with top horizontal menu

if it will be fixed, i will upload it once again.

Hello vekia, do you have news about your vertical menu ?

I would like to test it.

 

Thank you in advance

[ukwyspa]

I have vertical menu for presta 1.5.6.1, pm 

[Denys06]

Can you send me a link for the original module please ?

[vekia]

for what prestashop version?

[Denys06]

Hello vekia, my prestashop version is : 1.5.6.2
Can you send me your module by PM or Link ?

Thank you

[Denys06]

Hello vekia, can you send me your module please, I have not received your link. My presta version is : 1.5.6.2

[Michal N. SEO]

Hello Vekia, Can you send me a link for the original module please for 1.5.6.2?

Thank you

[vishnu8742]

I need this module , where can i get it from .

[lovemyseo]

Wher can I find the module?

[Maheshmohan1093]

Please replace the following code in superfish-modified.css  and change the positions accordingly:

/*** ESSENTIAL STYLES ***/
.sf-menu > li:last-child{

border-bottom: 1px solid orange;

}
.sf-menu > li {
border-left:1px;
border-right:1px;

}



.sf-contener {
  clear: both;
  float: none;
  width: 20%;
 margin-top: -14%;
 margin-left:0px;
 z-index:2;
 }
 @media (max-width:767px){
 .sf-contener{
 clear: both;
  float: left;
  width: 100%;
 margin-top: 0px;
 margin-left:0px;
 }
 }
 
 .sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }

.sf-menu {
  position: absolute;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #e9e9e9;
  background: #f6f6f6;
 
  position: absolute;
padding: 15px;
width: 88%;
border-bottom: 3px solid #E9E9E9;}
  @media (max-width: 767px) {
    .sf-menu {
       position:relative;
      display: none;
      padding:0;
      width:100%;
       } }

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #fff; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }

.sf-menu ul li {
  width: 100%; }

.sf-menu li:hover {
  visibility: inherit;
  border-right:none;
  border-left:none;
  /* fixes IE7 'sticky bug' */ }

.sf-menu > li {
  float: none;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px;
  width: 100%;
  position:relative;
  border-left:1px solid orange;
  border-right:1px solid orange;
  }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none;
      width: 100%;
      }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }
  .sf-menu > li > a {
    font: 600 10px/29px Lato,sans-serif;
    text-transform: uppercase;
    color: #484848;
    display: block;
    padding: 9px 0px;
    border-bottom: 3px solid #e9e9e9;
    background-color: white;
    text-align:center;
    }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #FFEBCD;
    border-bottom-color: #666666;
    color: black;
    text-decoration:underline;
    }
.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: #777777;
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  padding-bottom: 10px; }
  .sf-menu li li li a:before {
    content: "\f105";
    display: inline-block;
    font-family: "FontAwesome";
    padding-right: 10px; }
  .sf-menu li li li a:hover {
    color: #333; }

.sf-menu li ul {
  display: none;
  left: 100%;
  top: 0px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0;
      left:    0px;  } }

.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  background: none;
  -moz-box-shadow: transparent 0px 0px 0px;
  -webkit-box-shadow: transparent 0px 0px 0px;
  box-shadow: transparent 0px 0px 0px; }

.sf-menu li li li ul {
  padding: 0 0 0 20px; }

.sf-menu li li li ul {
  width: 220px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 500%;
  background-color: wheat;
  border-right: 1px solid orange;
  border-top:1px solid orange;
  border-bottom:1px solid orange;
  }
 @media (max-width: 767px) {
    .sf-menu > li > ul  {
      width: 100%; } }
 
  .sf-menu > li > ul > li > a {
    text-transform: capitalize;
    font: 400 16px/29px "Roboto Slab",serif;
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #096;
      }

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px; }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%;
      padding-bottom: 20px; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }

.sf-menu > li > ul > li.category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li.category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%; }
    @media (max-width: 479px) {
      .sf-menu > li > ul > li.category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li.category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li.category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
 
  display: block;  
 
  text-transform: uppercase;
  text-align: center;
  background-color: #8DC73F;
  height: 29px;
  color: white;
  padding-top: 6px;
  font-family: bold;
  font: 600 13px Lato,sans-serif;
  font-size: 18px;
  padding-bottom: 30px;
  width:100%;
  border-radius: 4px;
 
  display: block;
text-transform: uppercase;
text-align: center;
background-color: #8DC73F;
height: 29px;
color: #FFF;
padding-top: 6px;
font: 600 18px Lato,sans-serif;
padding-bottom: 29px;
width: 100%;
border-radius: 4px;
margin-left: 2px;
 
  }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 600 18px/22px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: black;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      position: relative;
width:100%;    
margin-left:0px;

 }
      .cat-title:hover {
        background: #333;
        border-bottom-color: #666666;
        color: #fff; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }

#block_top_menu .category-thumbnail {
  clear: both;http://localhost:100/prestashop/23-grocery
  width: 100%;
  float: none; }
  #block_top_menu .category-thumbnail div {
    float: left;
    width: 33.33333%; }
    #block_top_menu .category-thumbnail div img {
      max-width: 100%; }
#block_top_menu li.category-thumbnail {
  padding-right: 0; }

/*# sourceMappingURL=superfish-modified.css.map */

 

Cheers
 

[smartcare.ie]

hi, 

Any idea how to make tophorizontalmenu to dispaly subcategories vertical in prestashop 1.6.1.1 ?

[newage]

Any chance we can download this vertical menu?