Pure CSS Mega Menu

gareththomasnz:

Hi folks - very nice menu & it works fine

However I want my site to have an Amazon like look & the Amazon Mega Menu has a white background and displays a dark lightbox effect covering everything except the menu & header

I wonder does anybody have the CSS code to do this?

I assume its a Z-layer with opacity & layer is a depth below the header & menu which displays on hover?

I would like to get it working this afternoon fingers crossed

Heres my additional CSS:

/*LightBox Effect*/

.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}

Not working yet

I added the following to tpl_mega_menu.php

<div id="mega-wrapper" "javascript:void(0)" onclick = "document.getElementsByClassName('mega-menu').style.display='block';document.getElementById('fade').style.display='block';"><!-- bof mega-wrapper -->

    <ul class="mega-menu menu_red" "javascript:void(0)" onclick = "getElementsByClassName('mega-menu').style.display='none';document.getElementById('fade').style.display='none';"><!-- bof mega-menu -->

And the following line to tpl_header.php

		  <div id="fade" class="black_overlay"></div>

After the code that adds the mega menu

If anybody has suggestions? obviously it must work on hover not click but I want to get it at least to display at all for a start

Well I changed the display to position:fixed this at least covers the whole page with the display: none turned off

The inline js works if I show an alert box & I only have the following now:

<ul class="mega-menu menu_red" "javascript:void(0)" onmouseover = "document.getElementById('fade').style.display='block';"><!-- bof mega-menu -->

Which does not work

One big problem is that as Zen Cart uses modules to display data & create the page there is no standardization of the stack order

The stack order of my page elements is all over the show

As for why the opacity layer does not show - when an alert box does work I do not know. It may just be the stack order.

Another problem is that I want it to show the header & megamenu bar above the opacity layer without being darkened out.

At present the menu bar itself and sub menus are showing above the darkened opacity as they should

<div id="mega-wrapper" onmouseover="document.getElementsByClassName('black_overlay').style.display='block';">

I cant for the life of me get this to work

The opacity layer itself works in I remove display:none from the css

The code above works if I display an alert box - I have even managed to display the class name in the console but it will not display the darn opacity

Where am I going wrong ?

Got it finally & this drove me nuts

<div id="mega-wrapper" onmouseover="document.getElementById('fade').style.display='block';"><!-- bof mega-wrapper -->

Thats in TPL_MEGA_MENU.PHP

OK now I just adjust the z-index so the entire header & menubar display above my opacity - perfect

Final post on this to summarize:

It now fully works just like the Amazon LightBox Mega Menu

Four files involved

.hvmainheader I added z-index:9999; position: relative;

tpl_mega_menu.php

I added <div id="mega-wrapper" onmouseover="document.getElementById('fade').style.display='block';" onmouseout="document.getElementById('fade').style.display='none';">

stylesheet_mega_menu.css I added

.black_overlay{
	display: none;
	position:fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1000;
	-moz-opacity: 0.5;
	opacity:.50;
	filter: alpha(opacity=50);
}

tpl_header.php I added

Nice job figuring it out. Can we see the results somewhere? Link?

http://www.superfitnessguru.com/shop

Hi Anne,
Like this plug in a lot. We are using it with one of your templates and it works wee.
But all elements between the header and footer no longer center.
Any thoughts on how to correct this? I know CSS but not very proficient.
This is our site http://www.punkfashionshop.com
on Zencart 1.5.4
Thanks in advance. Sorry if this has been answered before, I've been searching and haven't found it.

Install went well. Good directions. :smile:
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. :smile:
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

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

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. :smile:

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

Just installed on a local server zc 2.0.1 and then installed Bootstrap template. Thought I would see if I could get this mega menu working, but there is a slight issue to this ...... I am not a coder.

I have managed to change the language file and get it working, but there are loads of other errors which mean that the site does not load. I have found out for example if you have no manufactures listed against product it will not work. Not solved the issue other than adding a manufacturer and assigning it to a product. So now I have this error: PHP Warning: Undefined array key "customer_id" in .......bootstrap\common\tpl_mega_menu.php on line 197. Is there any thing I should be doing help migrate this across to PHP8 and the new version of ZC. Has anyone else used this in with the bootstrap template? Thank you in advance for your help.

Recently I tried it out and cleaned it up for dropping into responsive classic

https://github.com/torvista/Zen_Cart-Pure_CSS_Mega_Menu

but have ended up not using it for the moment.
Maybe that's of use/ you could add your fixes for Bootstrap.

torvista, thank you for the link I shall take a look and post back any thing I discover that will help others. Looking at the change logs you list on github your fixes seem to highlight the errors that the zc logs are reporting for me, so hopefully all will work. Thank you.

Okay this is the error that I get PHP Fatal error: MySQL error 1054: Unknown column 'pages_title' in 'order clause' :: select * from ezpages where status_header = 1 order by header_sort_order, pages_title ==> (as called by) \WWW-Server........\includes\modules\sideboxes\bootstrap\ezpages_drop_menu.php on line 23 <== in \WWW-Server.......\includes\classes\db\mysql\query_factory.php on line 714.

Looking at the tables using php admin the pages_title is not in ezpages but in ezpages_content

I have tried this at line 23 and seems to work:

$page_query = $db->Execute("select *, ".TABLE_EZPAGES_CONTENT .".pages_title from " . TABLE_EZPAGES . " JOIN ". TABLE_EZPAGES_CONTENT. " ON ezpages.pages_id = ". TABLE_EZPAGES_CONTENT .".pages_id where status_header = 1 order by header_sort_order, pages_title");

Hope that helps others get the menu into their template this is my first foray into coding for a while and I was never an expert anyway. If anyone sees any issues regarding security or anything else to do with the query or performance then please feedback or comment. I have not done anything regarding the CSS and boostrap yet but will continue to test.

Thanks