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?