Pure CSS Mega Menu

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-demos/index.php?main_page=index&template_switch_id=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

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

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

gjh42:

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

Perfection! Thanks so much Anne!

bubbadan:

Perfection! Thanks so much Anne!

No problem ;-)

Thanks,

Anne

picaflor-azul:

No problem ;-)

Thanks,

Anne

I am working with the plugin to accomplish something a bit more complicated. I have 924 active manufacturers, therefore I need to separate that list into several columns, although I followed the link to the excellent mega menus tutorial you posted in the instructions, I was still not able to split to make 15+ pages with 60 rows each to accommodate all my brands ...

I am also working with the categories as I want all categories to be in a 5 column layout, by these I mean instead of the second level being displayed as a list I want to add images and show the second level subcategories as titles >>>>

That is

Main category >>> Second level Menu categories as Title, third level categories as list in multiple columns.

like this Main Category >>> Title H2
Multicolumn Third level list

icecold:

I am working with the plugin to accomplish something a bit more complicated. I have 924 active manufacturers, therefore I need to separate that list into several columns, although I followed the link to the excellent mega menus tutorial you posted in the instructions, I was still not able to split to make 15+ pages with 60 rows each to accommodate all my brands ...

I am also working with the categories as I want all categories to be in a 5 column layout, by these I mean instead of the second level being displayed as a list I want to add images and show the second level subcategories as titles >>>>

That is

Main category >>> Second level Menu categories as Title, third level categories as list in multiple columns.

like this Main Category >>> Title H2
Multicolumn Third level list

This will require custom php programming. You can try editing the classes/categories_ul_generator.php and the includes/templates/override/common/tpl_main_page.php file.


Thanks,

Anne

Hi, I just installed this on one of my sites and it seems to have gone in fine, but the old nav bar is still there. lol
I re-read the directions for installing it a few times, and it doesn't look like I missed anything. But I can't quite figure out what's up because I'm still rather new to zen-cart.
My site: http:// anyrissa bjd .x10 .bz/
I haven't adjusted it for width yet or anything, until I get the double-nav bar issue figured out.
I should also probably note that I am just trying it out on this site so I didn't break my other site. lol So it will not be staying on this one.

Thank you very much for this module! I built one of these for my old site with HTML and CSS, but I couldn't get it to work on this one. So this works just perfect. :)

nyrissa:

Hi, I just installed this on one of my sites and it seems to have gone in fine, but the old nav bar is still there. lol
I re-read the directions for installing it a few times, and it doesn't look like I missed anything. But I can't quite figure out what's up because I'm still rather new to zen-cart.
My site: http:// anyrissa bjd .x10 .bz/
I haven't adjusted it for width yet or anything, until I get the double-nav bar issue figured out.
I should also probably note that I am just trying it out on this site so I didn't break my other site. lol So it will not be staying on this one.

Thank you very much for this module! I built one of these for my old site with HTML and CSS, but I couldn't get it to work on this one. So this works just perfect. :)

Is your nav bar ez pages? turn the ones off for header in admin/tools

did you go to admin/layout settings/Categories-Tabs Menu ON/OFF -- and turn to off (0)

I love that you made this a standalone...I have it in my store now but I wanted to ask...

When the submenu is open for a category (or subsequent sub menus) the user can not slide down from one link to the next without the menu closing up.

I have set the categories sort order to be the last in the list but, this work around is good for only the first sub -- see image please or go to http://fantasiesrealm.com

to Poser and Daz/textures/outfit colors, when you hover over the first link it is fine but hover over the second one and you go to the next category UNLESS/sometimes you go to the near end of the block then you can choose a lower category

is there somewhere to get the listing to behave?
is there a way to add an arrow icon to those categories with subs?

Thanks in advance

I forgot the image

nyrissa:

Hi, I just installed this on one of my sites and it seems to have gone in fine, but the old nav bar is still there. lol
I re-read the directions for installing it a few times, and it doesn't look like I missed anything. But I can't quite figure out what's up because I'm still rather new to zen-cart.
My site: http:// anyrissa bjd .x10 .bz/
I haven't adjusted it for width yet or anything, until I get the double-nav bar issue figured out.
I should also probably note that I am just trying it out on this site so I didn't break my other site. lol So it will not be staying on this one.

Thank you very much for this module! I built one of these for my old site with HTML and CSS, but I couldn't get it to work on this one. So this works just perfect. :)

If you want to hide the current navigation bar, just add a display:none; to the #navMainWrapper in your stylesheet.css file.

Thanks,

Anne

DarkAngel:

I love that you made this a standalone...I have it in my store now but I wanted to ask...

When the submenu is open for a category (or subsequent sub menus) the user can not slide down from one link to the next without the menu closing up.

I have set the categories sort order to be the last in the list but, this work around is good for only the first sub -- see image please or go to http://fantasiesrealm.com

to Poser and Daz/textures/outfit colors, when you hover over the first link it is fine but hover over the second one and you go to the next category UNLESS/sometimes you go to the near end of the block then you can choose a lower category

is there somewhere to get the listing to behave?
is there a way to add an arrow icon to those categories with subs?

Thanks in advance

This is not the default behavior of the menu. I would back track to check any changes you made in the stylesheet_mega_menu.css file especially any widths, padding, margins, or position changes.

You can add your arrows in the stylesheet_mega_menu.css file.

Thanks,

Anne

having a couple issues, one i lost my search box in the install. two well this http://raptorengines.com/index.php?main_page=index doesnt seem to be replacing the main menu, just hopped on top. this is a template monster so yea i know theres issues. just wondering if ya have any ideas as to how i can make this work. i put in top-categories display none and that sort of worked, but your drop downs disappear as soon as you move the mouse down. i guess even if it's not displayed the main menu is still there disrupting the function of the new menu?

nevermind had to take it down before my boss saw the site in shambles and killed me :p

ICwater:

having a couple issues, one i lost my search box in the install. two well this http://raptorengines.com/index.php?main_page=index doesnt seem to be replacing the main menu, just hopped on top. this is a template monster so yea i know theres issues. just wondering if ya have any ideas as to how i can make this work. i put in top-categories display none and that sort of worked, but your drop downs disappear as soon as you move the mouse down. i guess even if it's not displayed the main menu is still there disrupting the function of the new menu?

You will need to either remove or hide the existing menu if you don't want both to show.

A good idea would be to add the menu onto a development version of your cart first, get it the way you like, and then move it to your live cart ;-)

Thanks,

Anne

I went in and adjusted numbers again and seem to have gotten it to be somewhat compliant with me...lol I have no clue how to add the little side arrow to the menu links at all...probably very simple yet the brain is not working simple today either...but this is what I did and if customer goes to about the middle section of the subs link then they can go from link to link in each sub cat.

Again thanks for this addon and the very easy to manage templates you create...I have gotten several of my "clients" to leave their monster templates and add yours instead.

DarkAngel:

I went in and adjusted numbers again and seem to have gotten it to be somewhat compliant with me...lol I have no clue how to add the little side arrow to the menu links at all...probably very simple yet the brain is not working simple today either...but this is what I did and if customer goes to about the middle section of the subs link then they can go from link to link in each sub cat.

Again thanks for this addon and the very easy to manage templates you create...I have gotten several of my "clients" to leave their monster templates and add yours instead.

I am happy that you have fixed the problem ;-) If you do a quick google search for something like css list style image you will get tutorials on how to add images as bullets to list items.

Thanks,

Anne

I have the megamenu running nicely as part of one of your templates.

What I would like to do is keep the shop drop down menu as is

take one specific category (its a top level category) and place it on the menu bar by itself and have its child categories drop down from it as well, is this possble?

I have cloned the categories_ul_generator.php file, and tried editing the sql query but i just seem to break it.

any ideas or pointers, I realise this is probably out of the scope of this thread, but I thought I'd ask