john_yourspace
asked on
Background overlay
Hi guys,
I am trying to accomplish the same menu over lay as seen here,
http://bit.ly/3TwFs (hover over any of the menus)
My over lay works correctly however when I hover over any sub elements in the ul it disaapears,
My codes for css uses :hover
here is my html (this is a snip from the main page and is only for illustration)
I also have a div called <div id="supernavOverlay"></div
The site is currently in development and is not available on line so I have no further explain just what ever code you ask me to provide
Thanks again
John
I am trying to accomplish the same menu over lay as seen here,
http://bit.ly/3TwFs (hover over any of the menus)
var config = {
over: showBack, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: hideBack// function = onMouseOut callback (REQUIRED)
};
//jQuery("#supernavUL li").hoverIntent( config );
jQuery("#supernavUL li").hover(showBack(),hideBack());
function showBack(){
var layoutHeight = jQuery(document).height() + document.body.scrollTop + 'px';
if(jQuery('#supernavOverlay').css('display') == 'none'){
jQuery(this).css({'z-index' : 10001});
jQuery('#supernavOverlay').css({'display' : 'block', 'height' : layoutHeight, opacity : 0}).animate({opacity:0.4},600);
}
}
function hideBack() {
console.log("hide attempt");
jQuery(this).css({'z-index' : 0});jQuery('#supernavOverlay').stop().fadeOut(200);
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
li.c2 {z-index: 0;}
li.c1 {list-style: none; display: inline}
/*]]>*/
</style>
</head>
<body>
<ul id="supernavUL">
<li class="c2" id="SuperNav1">
<!--Real Food-->
<a href="http://localhost//?page_id=486" title="Real Food"><strong>Real
Food</strong></a>
<ul>
<li class="c1">
<h5><a href="http://localhost//?page_id=488" title="Recipe Finder">Recipe
Finder</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/chicken_mock.jpg" alt="" height=
"65" width="215" />
</li>
<li class="c2"><a href="https:///?page_id=1903" title=""><strong>Wine
Finder</strong></a></li>
<li class="c2"><a href="https:///?page_id=488" title=""><strong>Find a
Recipe</strong></a></li>
<li class="c2"><a href="https:///?page_id=3723" title=""><strong>Cheese
Suppliers</strong></a></li>
<li><a href="https:///?page_id=3793" title=""><strong>Tapas</strong></a></li>
<li class="c1">
<h5><a href="http://localhost//?page_id=490" title=
"Recipes with Kevin Dundon">Recipes</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/keven_halloween.jpg" alt=""
height="65" width="215" />
</li>
<li><a href="https:///?page_id=492" title=""><strong>Halloween
Recipes</strong></a></li>
<li><a href="https:///?page_id=3184" title=""><strong>Hearty Winter
Recipes</strong></a></li>
<li><a href="https:///?page_id=1499" title=""><strong>Weekday
Dinners</strong></a></li>
<li><a href="https:///?page_id=1503" title=""><strong>Kevin’s
School Lunches</strong></a></li>
<li><a href="https:///?recipe=ginger-and-coriander-pork-chops" title=
""><strong>Most Popular Recipe</strong></a></li>
<li class="c1">
<h5><a href="http://localhost//?page_id=718" title="Our Instore Experts">Our
Instore Experts</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/butcher.jpg" alt="" height="65"
width="215" />
</li>
<li><a href="https:///?page_id=721" title=""><strong>Our Butcher
Expert</strong></a></li>
<li><a href="https:///?page_id=778" title=""><strong>Our Fruit & Veg
Expert</strong></a></li>
<li><a href="https:///?page_id=772" title=""><strong>Our Bakery
Expert</strong></a></li>
<li><a href="https:///?page_id=776" title=""><strong>Our Baby
Expert</strong></a></li>
<li><a href="https:///?page_id=774" title=""><strong>Our Wine
Expert</strong></a></li>
<li class="c1">
<h5><a href="http://localhost//?page_id=723" title=
"Awards">Awards</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/Awards.jpg" alt="" height="65"
width="215" />
</li>
<li><a href="https:///?page_id=723" title=""><strong>Blas na
hÉireann Awards</strong></a></li>
</ul>
</li>
<li id="SuperNav2">
<!--Real People-->
<a href="http://localhost//?page_id=573" title="Real People"><strong>Real
People</strong></a>
<ul>
<li class="c1">
<h5><a href="http://localhost//?page_id=697" title="Our Suppliers">Our
Suppliers</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/keohane.jpg" alt="" height="65"
width="215" />
</li>
<li><a href="https:///?page_id=697" title=""><strong>Supplier
Finder</strong></a></li>
<li><a href="https:///?page_id=701" title=""><strong>Dunhill
Cuisine</strong></a></li>
<li><a href="https:///?page_id=1336" title=
""><strong>Keohane’s Fish</strong></a></li>
<li><a href="https:///?page_id=699" title=""><strong>St Tolas
Cheese</strong></a></li>
<li><a href="https:///?page_id=703" title=""><strong>McEvoy Family
Foods</strong></a></li>
<li class="c1">
<h5><a href="http://localhost//?page_id=1973" title="Our Sponsorships">Our
Sponsorships</a></h5><img src=
"http://localhost//wp-content/uploads/2011/09/NAVrealfood-recipes2.jpg" alt=""
height="65" width="215" />
</li>
<li><a href="https:///?page_id=676" title=""><strong>GAA</strong></a></li>
<li><a href="https:///?page_id=706" title=""><strong>TidyTowns</strong></a></li>
<li><a href="https:///?page_id=766" title=""><strong>2011 TidyTown
Winner</strong></a></li>
<li class="c1">
<h5><a href="http://localhost//?page_id=687" title="Mum and Baby">Mum and
Baby</a></h5><img src="http://localhost//wp-content/uploads/2011/10/Baby.jpg"
alt="" height="65" width="215" />
</li>
<li><a href="https:///?page_id=1136" title=""><strong>Free EU Mom Gift
Box</strong></a></li>
<li><a href="https:///?page_id=691" title=""><strong>Healthy Eating for
Babies</strong></a></li>
<li><a href="https:///?page_id=693" title=""><strong>Eating For
Two</strong></a></li>
<li><a href="https:///?page_id=695" title=""><strong>Baby’s
First Bite</strong></a></li>
</ul>
</li>
<li id="SuperNav3">
<!--Real Rewards-->
<a href="http://localhost//?page_id=271" title="Real Rewards"><strong>Real
Rewards</strong></a>
<ul>
<li class="c1">
<h5><a href="http://localhost//?page_id=271" title="Real Rewards">Real
Rewards</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/real_rewards.jpg" alt="" height=
"65" width="215" />
</li>
<li><a href="https:///?page_id=503" title=""><strong>About Real
Rewards</strong></a></li>
<li><a href="https:///?page_id=672" title=""><strong>Your Local
Offers</strong></a></li>
<li><a href="https:///?page_id=667" title=""><strong>5% Off Future
Shop</strong></a></li>
<li><a href="https:///?page_id=522" title=""><strong>Login</strong></a></li>
<li><a href="https:///?page_id=1285" title=""><strong>Sign Up</strong></a></li>
<li class="c1">
<h5><a href="http://localhost//?page_id=1288" title="Getaway Breaks">Getaway
Breaks</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/getaway.jpg" alt="" height="65"
width="215" />
</li>
<li><a href=
"http://www.getawaybreaks.com/index.cfm?area=ebooking&action=introductionpage&bookingstep=1&menuid=481&campaignid=0&campaigngroupid=1"
title=""><strong>Hotel Breaks</strong></a></li>
<li><a href=
"http://www.getawaybreaks.com/index.cfm?area=ebooking&action=introductionpage&bookingstep=1&menuid=504&campaignid=0&campaigngroupid=20&countryid="
title=""><strong>5 Star Breaks</strong></a></li>
<li><a href=
"http://www.getawaybreaks.com/index.cfm?area=ebooking&action=introductionpage&bookingstep=1&menuid=686&campaignid=0&campaigngroupid=67&countryid="
title=""><strong>5 Night Breaks</strong></a></li>
<li><a href=
"http://www.getawaybreaks.com/index.cfm?area=ebooking&action=introductionpage&bookingstep=1&menuid=649&campaignid=0&campaigngroupid=58&countryid="
title=""><strong>Dublin City Breaks</strong></a></li>
<li><a href=
"http://www.getawaybreaks.com/index.cfm?area=ebooking&action=introductionpage&bookingstep=1&menuid=502&campaignid=0&campaigngroupid=2&countryid="
title=""><strong>Holiday Homes</strong></a></li>
</ul>
</li>
<li id="SuperNav4">
<!--Offers-->
<a href="http://localhost//?page_id=513" title=
"Offers"><strong>Offers</strong></a>
<ul>
<li class="c1">
<h5><a href="http://localhost//?page_id=513" title="All Offers">All
Offers</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/offers_arrow.jpg" alt="" height=
"65" width="215" />
</li>
<li><a href="https:///?page_id=513" title=""><strong>All Offers</strong></a></li>
</ul>
</li>
<li id="SuperNavShop">
<a href="http://localhost//?page_id=575" title="Shop Online Groceries"><strong>Shop
Online</strong></a>
<ul>
<li class="c1">
<h5><a href="http://localhost//?page_id=575" title="Shop Online">Shop
Online</a></h5><img src=
"http://localhost//wp-content/uploads/2011/10/shop_online_v11.jpg" alt=""
height="65" width="215" />
</li>
<li><a href="https:///?page_id=1695" title=""><strong>About Online
Shopping</strong></a></li>
<li><a href="https:///?page_id=1703" title=""><strong>Delivery
Areas</strong></a></li>
<li><a href="https:///?page_id=2719" title=""><strong>Register Your
Interest</strong></a></li>
<li><a href="http://shop..ie/" title=""><strong>Start Shopping</strong></a></li>
</ul>
</li>
<li class="c1">
<div class="clearfix"></div>
</li>
</ul>
</body>
</html>#supernavOverlay {
background-color: #000000;
cursor: pointer;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#supernav {
background-color: #A71930;
clear: left;
margin-top: 10px;
position: relative;
z-index: 10001;
}
#supernav nav {
height: 70px;
min-height: 70px;
position: relative;
}
#supernav nav span {
display: none;
}
#supernav nav ul {
position: relative;
}
#supernav nav ul li {
float: left;
}
#supernav nav ul li a {
background: url("images/templateImages/NAVarrowred.gif") no-repeat scroll right center transparent;
color: #FFFFFF;
display: block;
font-size: 18px;
font-weight: normal;
margin: 0 10px 0 0;
min-height: 32px;
padding: 25px 13px 13px;
text-decoration: none;
text-transform: uppercase;
}
#supernav nav ul li ul {
display: none;
position: relative;
}
.RealFood nav ul #SuperNav1 {
background-color: #87091E;
}
.RealPeople nav ul #SuperNav2 {
background-color: #87091E;
}
.RealRewards nav ul #SuperNav3 {
background-color: #87091E;
}
.Offers nav ul #SuperNav4 {
background-color: #87091E;
}
#supernav nav ul li:hover {
background-color: #F9F9F9;
}
#supernav nav ul li:hover a {
color: #000000;
}
#supernav nav ul li:hover ul {
background: url("images/templateImages/NAVbggradient.gif") repeat-x scroll left bottom #F9F9F9;
border-bottom: 5px solid #A71930;
display: block;
min-height: 230px;
padding: 20px 15px 20px 5px;
position: absolute;
z-index: 10000;
}
#supernav nav ul li:hover ul li {
background: url("images/templateImages/MOREarrow.gif") no-repeat scroll 0 53% transparent;
float: none;
margin-left: 10px;
padding-left: 17px;
}
#supernav nav ul li:hover ul li a {
background-image: none;
color: #474747;
display: list-item;
font-size: 10px;
font-weight: bold;
margin: 0 0 10px;
min-height: 0;
padding: 0;
}
#supernav nav ul li:hover ul li a:hover {
text-decoration: underline;
}
#supernav nav ul li h5 a {
background-image: none;
color: #A71930 !important;
font-size: 13px;
font-weight: bold;
margin: 0;
min-height: 0;
padding: 0;
text-transform: uppercase;
}
#supernav nav figure {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
height: 65px;
margin: 10px 0 20px;
padding: 3px;
width: 215px;
}
#supernav nav section {
float: left;
margin: 0 10px;
min-height: 180px;
width: 210px;
}
#SuperNavShop {
background-color: #F9F9F9;
color: #80B357;
height: 70px;
margin: 0;
min-height: 70px;
position: absolute;
right: 0;
width: 171px;
}
#SuperNavShop a {
background: url("images/templateImages/NAVarrowgreen.jpg") no-repeat scroll right center transparent !important;
color: #80B357 !important;
}
#SuperNavShop h5 a {
background-image: none !important;
}
#SuperNavShop:hover ul li a {
background-image: none !important;
color: #474747 !important;
display: list-item;
font-size: 10px;
font-weight: bold;
margin: 0 0 10px;
min-height: 0;
padding: 0;
}
#SuperNavShop a:hover {
color: #000000;
}
#SuperNavShop:hover ul li a:hover {
text-decoration: underline;
}
#SuperNav1 ul {
min-width: 940px;
position: absolute;
right: 0;
top: 70px;
}
#SuperNav2 ul {
min-width: 720px;
position: absolute;
right: 0;
top: 70px;
}
#SuperNav3 ul {
min-width: 460px;
right: 0;
top: 70px;
}
#SuperNav4 {
min-width: 112px;
position: absolute;
right: 171px;
top: 0;
}
#SuperNav4 ul {
min-width: 263px;
right: -171px;
top: 70px;
}
#SuperNavShop ul {
right: 0;
top: 70px;
}My over lay works correctly however when I hover over any sub elements in the ul it disaapears,
My codes for css uses :hover
here is my html (this is a snip from the main page and is only for illustration)
I also have a div called <div id="supernavOverlay"></div
The site is currently in development and is not available on line so I have no further explain just what ever code you ask me to provide
Thanks again
John
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
this worked
"My over lay works correctly however when I hover over any sub elements in the ul it disaapears,"
Which is because this line:
jQuery("#supernavUL li").hover(showBack(),hide
With the above line, you're saying "anytime a list item in the supernav is mouseout-ed, hide the overlay".
Are you trying to say "anytime a top-level list item is mouseout-ed, hide the overlay"?
If so, use this:
jQuery("#supernavUL > li").hover(showBack(),hide
If that's not what you're going for, post back