Pure CSS Mega Menu

[picaflor-azul]

Hello everyone! I am excited to announce my first module release that isn't a template! I have packaged up the popular Pure CSS Mega Menu that is used in many of our template pacakges as a stand alone module:



You can check out live demos of the menu on our free templates here:

http://www.picaflor-azul.com/free-de...abbington_mega

Module Features:

• Completely customizable--add links, images, or customize menu colors, or easily hide elements of the menu from the stylesheet

• No javascript used

• Neutral colors, looks good with any template!

• Display lots of content while keeping a clean layout

• Improves site navigation and usability

• Customers get to their destination in fewer clicks

• Easily ad EZpage links to the Info drop down

• Dynamically builds your categories and sub categories for the Shop drop down

• Quick Links drop down includes links to Home, New Products, Featured Products, All Proucts, Specials, and Search

• Dynamically ads manufacturers with listed products to the Brands drop down

• About Us drop down has text and an image

• Connect drop down with facebook, twitter, pinterest, youtube, google, and blog links

• Customer Service drop down has short shipping text and shop with confidence text with payments image

• W3C Valid XHTML and CSS3

• No changes to core files

• Easy Installation

• Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

• Fully compatible with versions 1.3.8x, 1.3.9x, 1.5x. Would probably work with lower versions although it has not been tested.

Please post any bugs or questions here.

Thanks,

Anne

[bubbadan]

Is there any way to NOT have the Main Categories branch off into side sub-categories?
Example:
What it does now is makes the tree when you hover over the category name
Category 1
----------- Sub-1
----------- Sub-2
----------------- Sub2-1
Category 2
Category 3
----------- Sub-1
----------- Sub-2

What I want is to just have
Category 1
Category 2
Category 3

and not have it split off in to sub-menus.], since one of my categories has over 30 sub-categories. (An no... there is no way to change it or combine them. It is what it is) :)

Thanks
Bubba

[gjh42]

It should be a simple stylesheet change, removing a :hover rule. Anne will be able to tell you exactly what to change.

[picaflor-azul]

It should be a simple stylesheet change, removing a :hover rule. Anne will be able to tell you exactly what to change.

You can add a display:none; to the .mega-menu .levels li ul rule in the stylesheet_mega_menu.css file.

Thanks,

Anne

[bubbadan]

Perfection! Thanks so much Anne!

[picaflor-azul]

Perfection! Thanks so much Anne!

No problem ;-)

Thanks,

Anne

[MaxBodine]

Install went well. Good directions.
What I am trying to figure out is how I can display the top level categories along the top main menu. Now it comes off of Shop and I have turned off the top menus I am not using.
https://uesakausa.com Zen cart 1.5.5f

Instead of Shop on the top level I would like the top level categories, then subcats off of those.

Training | Competition | Custom Bumpers | Apparel & Access | About Us | Info | Connect then sub categories similar to this:
Bumpers Bumpers Platinum
Metal Metal Uesaka
Bars Bars
Collars

Not sure how to do this. I am assuming it is in here tpl_mega_menu.php but have no clue how to change this code without blowing it up. Couldn't find any tutorial or post. Thanks in advance for any help! Got a headache on this one.

[MaxBodine]

Install went well. Good directions.
What I am trying to figure out is how I can display the top level categories along the top main menu. Now it comes off of Shop and I have turned off the top menus I am not using.
https://uesakausa.com Zen cart 1.5.5f

Instead of Shop on the top level I would like the top level categories, then subcats off of those.

Training | Competition | Custom Bumpers | Apparel & Access | About Us | Info | Connect then sub categories similar to this:
Bumpers Bumpers Platinum
Metal Metal Uesaka
Bars Bars
Collars

Not sure how to do this. I am assuming it is in here tpl_mega_menu.php but have no clue how to change this code without blowing it up. Couldn't find any tutorial or post. Thanks in advance for any help! Got a headache on this one.

Does anyone have a mega menu that has the top level categories in the main part and the sub categories drop down and branch out from there? Can you offer me any ideas on how to proceed?

Thanks,

Max

[kavlito]

Is the Pure CSS Mega Menu compatible with 1.5.5f - My Responsive Classic template? I've installed it and it is a mess.

[MaxBodine]

I did the same thing, and I am still working through it too. I will keep posting as I go. I just found out the mega menu is not responsive. What I did was keep the mega menu for my desktop and put this code below in responsive.css and responsive_mobile.css. Not sure if you made a custom template or not. If you did copy those two files in your custom template css folder with the changes.

@media (min-width:0px) and (max-width:480px){ #mega-wrapper { display:none;visibility:hidden; }

Now the problem I am working on is this works until they get to the product info page, then the menu is loosing the css. That may be do to other changes I made. I would be interested if you do not have that problem if you try my fix. That may head me in the right directions too.

Good Luck hope this helps. And I will keep updating as I figure it out.