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);
}

[gareththomasnz]

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

[gareththomasnz]

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

[gareththomasnz]

<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 ?

[gareththomasnz]

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

[gareththomasnz]

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

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

[mydanilo]

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

[gareththomasnz]

http://www.superfitnessguru.com/shop

[markshimo]

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.

[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.