PrestaShop Forum

The best place in the world to ask questions about PrestaShop and get advice from our passionate community!

PrestaShop Forum

Jump to content

[Module]Horizontal Categories - CSS drop down menu

32 replies to this topic
#1
whitelighter

    PrestaShop Addict

  • Members
  • PipPipPip
  • 589 posts
I have made some modifications to the categories block module, made it a horizontal CSS-drop down menu on the header.
It is not perfect, but it would be a good starting point for better modules.

You can view it here:
http://www.bvkyazilim.com/cart/

I am attaching the module. You can also download it directly from your shop using the module I made earlier:
http://www.prestasho...module_delivery

UPDATE: Made it cover the entire width of the header. You should uninstall the old version before installing version 1.1
Also included are the header.php and header.tpl files, you need to replace the originals with these.

Attached Files



#2
topgiftsuk

    PrestaShop Newbie

  • Members
  • Pip
  • 10 posts
That is exactly what im looking for as a structure, id obviously change the cosmetics of it myself, how easy is it to do having the same thing but without gaps between each nav button

#3
whitelighter

    PrestaShop Addict

  • Members
  • PipPipPip
  • 589 posts
You need to edit the jquerycssmenu.css file on line 27, change the margin to 0px.

#4
topgiftsuk

    PrestaShop Newbie

  • Members
  • Pip
  • 10 posts
Being a newbie, is this hard to install? where do i install it to etc?

Sorry for my lack of knowledge!

#5
Guest__*
  • Guests

From 1234972387:

I have made some modifications to the categories block module, made it a horizontal CSS-drop down menu on the header.
It is not perfect, but it would be a good starting point for better modules.

You can view it here:
http://www.agait.com.sg/cart/

I am attaching the module. You can also download it directly from your shop using the module I made earlier:
http://www.prestasho...module_delivery


just a quick not, you have a issue sending mail from your contact form.

Attached Files



#6
topgiftsuk

    PrestaShop Newbie

  • Members
  • Pip
  • 10 posts
Right

I have installed the Nav bar but have some problems.
I am changing the images and reloading them onto the server, but even after resetting cache, the old images remain e.g. arrow colours

Also how can i position it to move the left and right colum modules down in order for the nav bar to site right on the left.

THEN i want to create a bar to go across so it fills across the whole page instead of just "floating"

Cheers

#7
hieloiceberg

    PrestaShop Apprentice

  • Members
  • PipPip
  • 480 posts

From 1235001961:

Right

I have installed the Nav bar but have some problems.
I am changing the images and reloading them onto the server, but even after resetting cache, the old images remain e.g. arrow colours

Also how can i position it to move the left and right colum modules down in order for the nav bar to site right on the left.

THEN i want to create a bar to go across so it fills across the whole page instead of just "floating"

Cheers


Similar to this one? NAV
FarmVille Addict ;-)

#8
Cédric Girard

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1074 posts
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.
EX entrepreneur spécialiste du référencement Prestashop, certifié CESEO - Attention, je n'exerce plus mais je partage désormais mes connaissances sur mon site dédié à Prestashop et Wordpress !

Mon projet phare (créé de A à Z) : Matériel de cuisine professionnel

#9
topgiftsuk

    PrestaShop Newbie

  • Members
  • Pip
  • 10 posts

From 1235022478:

From 1235001961:

Right

I have installed the Nav bar but have some problems.
I am changing the images and reloading them onto the server, but even after resetting cache, the old images remain e.g. arrow colours

Also how can i position it to move the left and right colum modules down in order for the nav bar to site right on the left.

THEN i want to create a bar to go across so it fills across the whole page instead of just "floating"

Cheers


Similar to this one? NAV


HI I want the bar just like that one, going across the page and embedding the search box in there...exacly what im looking to do.

How ever I want to keep a normal horizontal drop down menu

#10
hieloiceberg

    PrestaShop Apprentice

  • Members
  • PipPip
  • 480 posts

From 1235033249:

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.


The one I did is just Style Sheet no javascript in it :cheese: Now I only test on IE and FF maybe you can check them on the other browsers and give me a feed on it :coolsmirk:

Cédric Girard I love how the mastermateriel store looks :coolsmile:
FarmVille Addict ;-)

#11
topgiftsuk

    PrestaShop Newbie

  • Members
  • Pip
  • 10 posts

From 1235067653:

From 1235033249:

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.


The one I did is just Style Sheet no javascript in it :cheese: Now I only test on IE and FF maybe you can check them on the other browsers and give me a feed on it :coolsmirk:


could you help with my above question above your last post friend?

Thanks very much

#12
Cédric Girard

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1074 posts
Hum... I don't know if I have really understood the question (my english is very bad :cheese: )

I tested this one on Google Chrome, Firefox 3.x, IE 5.5, IE 6.x, IE 7.x, IE 8 beta ; my layout seems to have little problem in FF 2.x and above, but the menu should be OK.

I don't test other browsers...
EX entrepreneur spécialiste du référencement Prestashop, certifié CESEO - Attention, je n'exerce plus mais je partage désormais mes connaissances sur mon site dédié à Prestashop et Wordpress !

Mon projet phare (créé de A à Z) : Matériel de cuisine professionnel

#13
jolvil

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 2706 posts
I've seen an horizontal menu on a prestashop shop:

http://www.boutikenvogue.com

not bad ! do you know what is it ?

#14
hieloiceberg

    PrestaShop Apprentice

  • Members
  • PipPip
  • 480 posts

From 1235076531:

I've seen an horizontal menu on a prestashop shop:

http://www.boutikenvogue.com

not bad ! do you know what is it ?


That is a flash menu Mr. Jolvil you can easy make a flash menu add links to it and add the flash code on your header.tpl
FarmVille Addict ;-)

#15
Kreasite

    PrestaShop Addict

  • Members
  • PipPipPip
  • 817 posts
Ne fonctionne pas sous IE6 comme sur ton shop online.
Les menus sont les uns en dessous des autres.

++

DAV
Infographiste/intégrateur - Graphic designer/integrator XHTML/CSS template specialist for PrestaShop
www.e.kreasite.fr - www.facebook
C'est parce que la vitesse de la lumière est supérieure à celle du son, que certains ont l'air brillant avant d'avoir l'air con.

#16
Cédric Girard

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1074 posts
Exact ; comme je l'ai expliqué sur mon blog, ça vient (dans le cas de ma boutique) de la structure du menu de base... mal interprétée par IE6 ; si je mets des largeurs auto et que je vire les images sur les balises LI, ça fonctionne ;-)

Par contre ça nécessite impérativement la prise en charge du fichier htc pour le hack CSS sur IE6... J'ai déjà eu des soucis sur un site, où ce fameux fichier n'était pas pris en compte pour une raison que j'ignore.
EX entrepreneur spécialiste du référencement Prestashop, certifié CESEO - Attention, je n'exerce plus mais je partage désormais mes connaissances sur mon site dédié à Prestashop et Wordpress !

Mon projet phare (créé de A à Z) : Matériel de cuisine professionnel

#17
Kreasite

    PrestaShop Addict

  • Members
  • PipPipPip
  • 817 posts
Désolé Cédric, je parlais du menu de whitelighter

++

DAV
Infographiste/intégrateur - Graphic designer/integrator XHTML/CSS template specialist for PrestaShop
www.e.kreasite.fr - www.facebook
C'est parce que la vitesse de la lumière est supérieure à celle du son, que certains ont l'air brillant avant d'avoir l'air con.

#18
Cédric Girard

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1074 posts
Ah zut :cheese:
EX entrepreneur spécialiste du référencement Prestashop, certifié CESEO - Attention, je n'exerce plus mais je partage désormais mes connaissances sur mon site dédié à Prestashop et Wordpress !

Mon projet phare (créé de A à Z) : Matériel de cuisine professionnel

#19
Darksist

    PrestaShop Newbie

  • Members
  • Pip
  • 19 posts
Hi everyone,

i'm modifying iris blue theme at www.iloveprestashop.com. i am using prestashop 1.1 and i copying folder of horizontalcategories in the modules and i activate at top position. my problem is starting after this procedures: how can i show this menu?

#20
Presta-TR

    PrestaShop Addict

  • Members
  • PipPipPip
  • 544 posts
Hi,

i have some problem for this module:
see the pictures is have 2 problem.. see 1 pict: is 2-1 category ids to lose the other categories..

see the second picture module http://www.prestasho...ured_slide_show is the lose over showing..

Attached Files