Jump to content
sperio

[ module ] horizontal category menu

Recommended Posts

Hi all,

modified the homecategory module in accordance with Cédric Girard's work in http://www.mastermateriel.com/

I have consolidated the code to be self containing within the module... have fun :)

Cédric Girard - 19 February 2009 11:47 AM
Hello
Great contribution. I propose another horizontal menu but full CSS (no javascript) ; the compatibility with browsers is good (in usual way : IE6, IE7, IE8 beta, FF, Chrome…)

You can see it here (little bug with IE6 on the base level of the menu, but it’s only the fact of my template) ; and an explaination (in french, sorry !) here.

hcatmenu.zip

  • Like 4

Share this post


Link to post
Share on other sites

i am sure you can... am doing it now for my site... a different image for each category as background...

can do mouseover images as well... pretty simple hack

Share this post


Link to post
Share on other sites

Hi, i try the module, but i have a little problem with the position of the menu
could you help me please!

Share this post


Link to post
Share on other sites

Hi,

I tried your menu. with Firefox works well, but with ie the subcategories won´t show. Also with Firefox It shows only one subcategory ( i have set level 5 ). Any Ideas ?

Anyway It´s good work

Regards,

Share this post


Link to post
Share on other sites

the limit is only level 2 max... have tried it on ie and it works... perhaps it is your css... have you tried debugging with firebug on firefox?

Share this post


Link to post
Share on other sites

hi

sperio do you know wich css code i must modify to center the text of each botton on this horizontal menu.
I try to adapt it with web developer toolbar but it's not easy.

thanks

Share this post


Link to post
Share on other sites

the css styles are in the module itself... hcatmenu.css

Share this post


Link to post
Share on other sites

I need your help Cedric GErard!

i always send you many message but you never respond to me!
could you help me with your horizontal menu
I try to put it on top of the page

many thanks

Share this post


Link to post
Share on other sites

Brutuska
I send you a message, explain me your problem perhaps i could help you
this menu is great but it's very difficult to have a help.

i test it on ie and firefox, no problem for me,
just a position problem

regards

Share this post


Link to post
Share on other sites

Hi Cedric :) it is all your work :) i just packaged it all up for all to enjoy... took me quite a while to figure out your instructions... just thought that the module will save all some time...

ananly, it is pretty straight forward to use... for your positioning issue... from the way i see it... you need to either add a new hook or remodify your divs positions to suit your needs... adding a new hook is easiest to do

http://www.prestashop.com/forums/viewthread/12637/modules/_solution_create_hooks_in_6_easy_steps

if you still cannot get it resolved... send me your header.tpl and I will show your the mod needed with the css...

alfred

Share this post


Link to post
Share on other sites

Hi !

Very nice indeed. Is there any way to set parameters BEFORE getting it in line ?

Ann

Share this post


Link to post
Share on other sites

Hello. Is there anyone other than me who feel that thickbox collide with the menu? Thanks for a great module!

Share this post


Link to post
Share on other sites

check your divs...

look at in FF with Firefox... you can see how and what all the CSS are doing...

Share this post


Link to post
Share on other sites

Hello,

very good module, but does not work when URL rewriting is activated with v1.2 alpha 2 and v1.2 beta 1

Share this post


Link to post
Share on other sites

just tested it... you are right... will check and let u know

Share this post


Link to post
Share on other sites

it is not the menu issue... it is 1.2 URL rewriting issue... the URL rewrite does not work...

Share this post


Link to post
Share on other sites

The module works when transplanted into an existing hook... but I can't get it to display in its own hook

DB entry in the ps_hook table:

id-hook     44
name     hmenu
title     Menu Block
description     Horizontal Menu Block
position     1



In header.tpl:

            <!-- Header -->


                   {$HOOK_TOP}


                   {$HOOK_HMENU}




In header.php:

$smarty->assign(array(
   'HOOK_HEADER' => Module::hookExec('header'),
   'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
   'HOOK_TOP' => Module::hookExec('top'),
   'HOOK_HMENU' => Module::hookExec('hmenu'),
   'static_token' => Tools::getToken(false),
   'token' => Tools::getToken(),
   'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
   'content_only' => intval(Tools::getValue('content_only'))
));



In global.css:

#hmenu {
   float: left;
   height:50px;
   width: 100%;
   text-align: center;
}



The css works (div appears correctly), but no contents. Any ideas?

Share this post


Link to post
Share on other sites

I un-installed then re-installed the module and it seems to be working now...

Share this post


Link to post
Share on other sites

my installation is on its own hook... just have to reinstall and you should be ok... it happens for all modules

Share this post


Link to post
Share on other sites

nice module.

can you also be kind to share that template of the link you gave :)

That's a very nice template.

Share this post


Link to post
Share on other sites
Hello, 

very good module, but does not work when URL rewriting is activated with v1.2 alpha 2 and v1.2 beta 1




only problem with the v1.2 testing the configuration and default store, categories, products, etc. ...

The failure is that the htaccess is no longer present in the v1.2.

Normal operation when you register your own products, URL rewriting enabled.

Share this post


Link to post
Share on other sites

URL rewriting does not work in 1.2... i cannot get it to work on my server even when the installation is virgin...

Share this post


Link to post
Share on other sites

Can somebody please help. I have installed the module and figured it out to implement it in its own hook. But now whatever I do in hcatmenu.css doesn't do anything. I still have menu background in black, text in white and orange for submenu, and background in orange in hover mode.
Anyboby facing the same situation?
Thanks
Great add-on otherwise.
Christophe

Share this post


Link to post
Share on other sites

use FF and firebug... then u can see what is the issue with the CSS...

working at www.iputa.com

Share this post


Link to post
Share on other sites
The module works when transplanted into an existing hook... but I can't get it to display in its own hook

DB entry in the ps_hook table:
id-hook     44
name     hmenu
title     Menu Block
description     Horizontal Menu Block
position     1



In header.tpl:

            <!-- Header -->


                   {$HOOK_TOP}


                   {$HOOK_HMENU}




In header.php:

$smarty->assign(array(
   'HOOK_HEADER' => Module::hookExec('header'),
   'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
   'HOOK_TOP' => Module::hookExec('top'),
   'HOOK_HMENU' => Module::hookExec('hmenu'),
   'static_token' => Tools::getToken(false),
   'token' => Tools::getToken(),
   'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
   'content_only' => intval(Tools::getValue('content_only'))
));



In global.css:

#hmenu {
   float: left;
   height:50px;
   width: 100%;
   text-align: center;
}



The css works (div appears correctly), but no contents. Any ideas?



Hi all !

I'm a begginer, thanks for Hcatmenu it looks like perfect for what i wanna do ;) except that the menu is not centered, It is attached to the TOP hook. then I created my OWN hook as decribed is some tutorials to place it at the bottom/center in the header.

I did exactly the same as cmulder, first, I added a new hook in the DB :

id-hook     49
name     hcatmenu
title     Menu Block
description     Horizontal Menu Block
position     1



In header.tpl:

            <!-- Header -->


                   {$HOOK_TOP}


                   {$HOOK_HCATMENU}



In header.php:

$smarty->assign(array(
   'HOOK_HEADER' => Module::hookExec('header'),
   'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
   'HOOK_TOP' => Module::hookExec('top'),
   'HOOK_HCATMENU' => Module::hookExec('hcatmenu'),
   'static_token' => Tools::getToken(false),
   'token' => Tools::getToken(),
   'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
   'content_only' => intval(Tools::getValue('content_only'))
));



I added the css in global.css

After reading cmulder's following post, I uninstalled and re-installed, so my menu is always positionned to the right (not centered at the bottom of the header)

I dunno what to do more, Thanks for Ur help

10234_XKRFQYdowq8EVVyoDdlx_t

10235_0QsFui5FCE2WqGzxWzhd_t

Share this post


Link to post
Share on other sites

I have tried this in a fresh install of latest version V1.208 and it does not work.

Am I doing something wrong? The moduke loads I can configure it but the nav bar does not show iether in ie or firefox.

Share this post


Link to post
Share on other sites

Very nice module. Like it very much.
I have 1 question though and something that does not work.

Question: I would like to add other items like About us, Promotions etc.. I tried different things but have no clue on how to do it.

Issue: everything works perfectly until I reach the payment step of the checkout process. Any clue on how to correct that? (see screen shot attached)

Thanks
Christophe

10600_HN719wlfAzIBJSPlAVnM_t

Share this post


Link to post
Share on other sites
I have tried this in a fresh install of latest version V1.208 and it does not work.

Am I doing something wrong? The moduke loads I can configure it but the nav bar does not show iether in ie or firefox.


You need to update the module's php file as well with
}
function hookHcatmenu($params)
{

Christophe

Share this post


Link to post
Share on other sites

I answer to myself and cdouillard in the case of someone else would encounter the same problem.

In hcatmenu.tpl :

replace :

<link rel="stylesheet" media="all" type="text/css" href="/modules/hcatmenu/hcatmenu.css" />



with :

<link rel="stylesheet" media="all" type="text/css" href="{$content_dir}modules/hcatmenu/hcatmenu.css" />



it was just a css link problem when visiting urls into the modules directory.

sorry for my english guys.



Issue: everything works perfectly until I reach the payment step of the checkout process. Any clue on how to correct that? (see screen shot attached)



I have the same problem, It happens when visiting other pages too.

http://www.le20sanssulfites.fr/modules/mailalerts/myalerts.php
http://www.le20sanssulfites.fr/modules/loyalty/loyalty-program.php
http://www.le20sanssulfites.fr/modules/referralprogram/referralprogram-program.php

What could I modify to make it appears correctly like in other pages?

Thks

Share this post


Link to post
Share on other sites

my horizontal category menu is not showing. when you put your arrow over it, then it goes orange. it's everywhere and not in the right place. can somebody help me? thanks heaps

Share this post


Link to post
Share on other sites

After upgrading to PS 1.2.3 my horizontal menu vanished... I've reviewed all the installation steps of this module and I can't find anything wrong... Any ideas?

EDIT: Sorry! Ignore this... The module was in the wrong block, don't know why. Everything is working now. Thanks for this nice module.

Share this post


Link to post
Share on other sites
Hi Kierrock in what block do you place it ? Many thanks


In his own block because I've created a new hook. After upgrading it was in the native top hook block.

Share this post


Link to post
Share on other sites

Hey all,

I have a question about Internet Explorer. In fact, the module works PERFECTLY with Firefox and I had no problem in installating or managing it but now when I look at my website with Internet Explorer I cannot understand why the menu is moved on the right (see the images below).

Do you guys have any idea about that?

Thanks,

Julien

13187_3WWC6QohlCsDgiHHqwmp_t

13188_8ifhaR9flluGWisj3Mek_t

Share this post


Link to post
Share on other sites

very nice site... fantastic deisign... KUDOsss

which version of IE are you looking at? I am seeing in IE8 on vista... no problems...

checked on LINUX, opera + FF no problems too...

perhaps it is a old IE version... if that is the case... then it may be hard to resolve...

one thing to note... your grey background on mouseover is a bit slow to load... you might want to consider spriting it...

love your design... tried to do it before but could not divorce the cart at the main page... i like the way you have it... the layout for the products page is fantastic too... simple and elegant... just like the champange you are selling...

all the best... let me know if i can be of further assistance

alfred

Share this post


Link to post
Share on other sites

Thanks a lot Alfred, that's very nice of you.

The problem appears on the IE7 lastest version and older. This is the only browser on which this appears...Safari, Firefox, Opera...are ok but not IE!

I checked some over websites using your module on IE7 and the problem appears sometimes too.

Share this post


Link to post
Share on other sites

well... actually it is not my module... someone made a hack and I made it into a module... the problem is probably in the CSS specs... IE is a bit weird at times... sorry could not be of more help... I have transited to linux and dun use my windows machine much these days... i would suggest looking at how IE and FF CSS approach menus... maybe you can find a clue there

all the best

Share this post


Link to post
Share on other sites

Ok I'll try something with that.

Thanks anyway, I'll get back to you if I find something

Share this post


Link to post
Share on other sites

Woohh...I never noticed that before!

Do you have any idea where it can come from? And I can modify that!
Very strange

Share this post


Link to post
Share on other sites

I solved the problem but I still have the same display using IE...thanks for the tip anyway

Share this post


Link to post
Share on other sites

123julien, remove text-align:center; from everywhere and place it just in div#menu a

That should solve your problem.

Share this post


Link to post
Share on other sites

Thanks a lot Kierrok!! You solved my problem.
I think I understood now why it didn't work properly before!

Thanks again,

Julien

Share this post


Link to post
Share on other sites

Hi,

I'm back with a new problem and with IE again!
I tried the website using IE6.0 and off course the dropdown thing won't work. (cf img)

I looked it up online and found that usually you need to add a dropdowns.js file to make it work using IE6.0.

So I did create the file (dropdowns.js) but it is still not working.

Do you have any idea how I can solve my problem?

Thanks a lot in advance,

Julien

14555_5G5tzGcPTHUPs8zjHggh_t

Share this post


Link to post
Share on other sites

Hi everyone,

I have this module displaying in my header correctly however I have not been able to hook the module into my own custom hook (hcatmenu).

Back on page 3 of this thread the same question is asked by alphabravo8 (reply #33) and cdouillard seemed to be on the right track by stating that:

function hookHcatmenu($params)



needs to be added to hcatmenu's php file however when I do this the whole page show's as white. Now I am presuming I am supposed to not just add:

function hookHcatmenu($params)



by it's self and there is some other code to be added after it however I am not sure where to go with it, I am quite new to PHP and Prestashop in general.

Any help would be greatly appreciated.

Share this post


Link to post
Share on other sites
123julien: take a look at hcatmenu.htc file...


Hey Kierrok,

I did have a look at this .htc file but I just saw that
// css prefix, a leading dash would be nice (spec), but IE6 doesn't like that.



I tried to had the
body { behavior:url("csshover3.htc"); } to my css but it won't work still...

Do you have any tip for me?

Thanks in advance!

Share this post


Link to post
Share on other sites
I tried to had the
body { behavior:url("csshover3.htc"); } to my css but it won't work still...


The file was renamed to hcatmenu.htc, so you have to reflect that in the .css file. You might need to add the full path too.

Share this post


Link to post
Share on other sites
function hookHcatmenu($params)



needs to be added to hcatmenu's php file however when I do this the whole page show's as white. Now I am presuming I am supposed to not just add:

function hookHcatmenu($params)



by it's self and there is some other code to be added after it however I am not sure where to go with it, I am quite new to PHP and Prestashop in general.



Just replace this line:

function hookTop($params)



for that line.

Share this post


Link to post
Share on other sites

You were right one more time!
I didn't try with the full path but now it's working.

I still have a problem though...the images wont display. The :hover thing is working but I still have no image for my menu.

Do you have any idea about that one?

I did change every image to the .gif format for IE and check the padding and margin to make it adapted to the "IE way of thinking"

Thanks a lot anyway

Share this post


Link to post
Share on other sites

123julien can you remove the login to your site or send it to me (PM) so I can try to debug the code?

I can't promise you nothing, I refuse to develop to IE 6, but I can have a look...

Share this post


Link to post
Share on other sites

This module doesn't work with friendly URL's active. It only appears in the home page, not in the product page. If you disable Friendly URL's everything works fine.

Unfortunately Friendly URLs is a must have in Prestashop.

Share this post


Link to post
Share on other sites

Bonjour,

Je voudrez savoir comment crée le meme header que celui la ?


Hello, Does I will want to know how create same the header that?

15766_6dY8W5ohDUzNiwVi9sKe_t

Share this post


Link to post
Share on other sites

Hi,,,

Can I add "Home" to this menu ?
I like to let it be first and link to homepage

Can this be done ?

Share this post


Link to post
Share on other sites

Yes it can, beginning. Just edit hcatmenu.tpl and add your code just before the loops that build the rest of the menu.

Share this post


Link to post
Share on other sites
Yes it can, beginning. Just edit hcatmenu.tpl and add your code just before the loops that build the rest of the menu.



Could you show me the code that I need to add ?

Share this post


Link to post
Share on other sites
Yes it can, beginning. Just edit hcatmenu.tpl and add your code just before the loops that build the rest of the menu.



Could you show me the code that I need to add ?


:roll:

Home

Share this post


Link to post
Share on other sites
Yes it can, beginning. Just edit hcatmenu.tpl and add your code just before the loops that build the rest of the menu.



Could you show me the code that I need to add ?


:roll:

Home



Thanks.

One more... Can I have only my link there and cut out Catagory links ? If so please tell me what to change in code.

Thanks a lot

Share this post


Link to post
Share on other sites

Thanks.

One more... Can I have only my link there and cut out Catagory links ? If so please tell me what to change in code.

Thanks a lot


To do that you don't need this module. Just Google for CSS Horizontal Menu.

Share this post


Link to post
Share on other sites

Thanks.

One more... Can I have only my link there and cut out Catagory links ? If so please tell me what to change in code.

Thanks a lot


To do that you don't need this module. Just Google for CSS Horizontal Menu.


Thanks for your reply....

However even if I got css Horizontal Menu that I like I am not sure where I add the code. I quess and did try to add it in global.css with no luck.
I´m newbie and after few weeks here in this forum I got informtion owerflow :')

But I´m trying hard to study this :P

It would be nice if you can tell me where I add css menu

Share this post


Link to post
Share on other sites

i need the text to be bigger, where shall i edit that? also id like the horizontal menu to stay just on top of the page as arrow shows on the picture

19554_UJF2XKSbbhLZFgbMsV50_t

Share this post


Link to post
Share on other sites
Bonjour,

Je voudrez savoir comment crée le meme header que celui la ?


Hello, Does I will want to know how create same the header that?



I would also like to have this creation

Share this post


Link to post
Share on other sites
Yes it can, beginning. Just edit hcatmenu.tpl and add your code just before the loops that build the rest of the menu.



Could you show me the code that I need to add ?


:roll:

Home



Thanks.

One more... Can I have only my link there and cut out Catagory links ? If so please tell me what to change in code.

Thanks a lot


where should i put in the codeing

Share this post


Link to post
Share on other sites

Great module! Thank you so much for your contribution and everyone providing support for this.

I'm about to try make this baby sort level1 and level2 sort by different parameters. Let's say for example the top level, the actual bar to clarify, sorts by 'category_id'. Then level2 sorts by say 'Name' ...

Any thoughts on how this would best be implemented? :) Is there any way to sort arrays? Or do I have to run two querys? Too tired to investigate too much into this. Nightwatch about to end his shift, hehe.

Thanks again guys,
LONG LIVE PRESTASHOP!!

Share this post


Link to post
Share on other sites

Hmm, after some heavy consideration I ended up not using this afterall. The fact that it doesn't multilevel and other factors just didn't make it worth it :/

I went over to a customized WIZNAV 2.1.3 with Category addon. A quick edit and it's a pure Category bar, indefinite leveled and easy to customize :) Best of luck to anyone looking for a module like this, and thanks again for all your contributions :)

Share this post


Link to post
Share on other sites

Wiznav doesn't hover down in IE6. But then again, this menu also doesn't drop-down for me in IE6. No idea why.

Share this post


Link to post
Share on other sites

Hi, guys!

this module is exact what i want, but i have a problem with it, so maybe someone can help me out i hope.

How to put this category menu under logo and replace current menus: "Piibud", "Raamatud" etc... ?
I have one theme installed, called "Earth".

Wanna do something like this: http://www.cdelabulle.com/shop/ :)

Any help, please?

27579_CfnbN1X0H443qzW6IDjL_t

Share this post


Link to post
Share on other sites

It looks like you have placed the hook in the wrong place. Looks like it is before the "header" div and it should be after.

Share this post


Link to post
Share on other sites

I've done nothing. :) Just installed this module, no tweaking or anything... I really dont' know, where is the right place to hook or how to do this neither. So... can you help me or give me some advice?

Here is my testpage:
http://herbalize.planet.ee/

Share this post


Link to post
Share on other sites

Carefully read all posts in this thread, especially #33 and the following because it looks the same problem you have.

Share this post


Link to post
Share on other sites

Allright.. let me try this. But let's start at the beginning. What or where is ps_hook? Hook.php?
Sorry, if it sounds dumb :-)

Share this post


Link to post
Share on other sites

Ok, i figured out, what is ps_hook and do same thing as #33 http://www.prestashop.com/forums/viewreply/110594/ in this thread, but got no acceptable result, total mess to be exact.

Maybe there is some way to move logo.gif above horizontal menu, not menu under logo??




-edit-
Oh, boy.. what a anomaly :-) I can't get this on to right position. Someone, please, give me solution. I've spent so many time on this. So, it is a matter of principle now!

Share this post


Link to post
Share on other sites

Did you also read all the thread linked in #12? It explains how to configure the hook.

I don't have a working prestashop ATM so I can't help much, but I managed to install this module by carefully reading the ~3 first pages of this thread.

Share this post


Link to post
Share on other sites

OK, case closed. I'm happy with another horizontal menu which works lihe a charm ;) Thanks anyways!

Share this post


Link to post
Share on other sites

Hello Sperio,

The menu seems to work fine, but when directed to the payment process (from order-step 4) the hcatbar dissapears and ALL of the categories appear on the right side of the page, seems like it is on top of everything because the "ik bevestig mijn bestelling" button is not working anymore, categories are in it's way I guess.

Any idea how to solve this? version 1.3.1 is uses ...

29226_PSNJohgeJ67jHqEo12LB_t

Share this post


Link to post
Share on other sites

Does anyone know how I can change the menu order (it's alphabetical by default).

(haven't gotten to the point yet where I test the payment process..hope that issue is fixed by now?)

Share this post


Link to post
Share on other sites

How do I get this module to work in 1.4? (I do not want to use Smarty V2)

Share this post


Link to post
Share on other sites
Does anyone know how I can change the menu order (it's alphabetical by default).

(haven't gotten to the point yet where I test the payment process..hope that issue is fixed by now?)



rename your categories by typing digits and a dot before them.

example :
10.ORANGE
20.APPLE
30.BANANA



Prestashop will order the categories according to those numbers, and will NOT let them appear on your website.

Better use 10, 20, 30.. than 1, 2, 3.. in case you should add an unexpected new cat.

Share this post


Link to post
Share on other sites