?
Solved

Background overlay

Posted on 2011-10-28
3
Medium Priority
?
580 Views
Last Modified: 2012-05-12
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)

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

Open in new window

<!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&acirc;&euro;&trade;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 &amp; 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&Atilde;&permil;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&acirc;&euro;&trade;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&acirc;&euro;&trade;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&amp;action=introductionpage&amp;bookingstep=1&amp;menuid=481&amp;campaignid=0&amp;campaigngroupid=1"
        title=""><strong>Hotel Breaks</strong></a></li>

        <li><a href=
        "http://www.getawaybreaks.com/index.cfm?area=ebooking&amp;action=introductionpage&amp;bookingstep=1&amp;menuid=504&amp;campaignid=0&amp;campaigngroupid=20&amp;countryid="
        title=""><strong>5 Star Breaks</strong></a></li>

        <li><a href=
        "http://www.getawaybreaks.com/index.cfm?area=ebooking&amp;action=introductionpage&amp;bookingstep=1&amp;menuid=686&amp;campaignid=0&amp;campaigngroupid=67&amp;countryid="
        title=""><strong>5 Night Breaks</strong></a></li>

        <li><a href=
        "http://www.getawaybreaks.com/index.cfm?area=ebooking&amp;action=introductionpage&amp;bookingstep=1&amp;menuid=649&amp;campaignid=0&amp;campaigngroupid=58&amp;countryid="
        title=""><strong>Dublin City Breaks</strong></a></li>

        <li><a href=
        "http://www.getawaybreaks.com/index.cfm?area=ebooking&amp;action=introductionpage&amp;bookingstep=1&amp;menuid=502&amp;campaignid=0&amp;campaigngroupid=2&amp;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>

Open in new window

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

Open in new window


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> which is the over lay

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

0
Comment
Question by:john_yourspace
3 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 37055872
You said:

"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(),hideBack());

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(),hideBack());

If that's not what you're going for, post back
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 37131635
This way the overlay won't disappear until you mouse out of the entire nav system:

jQuery("#supernavUL").hover(showBack(),hideBack());


If you do that, (and I don't know what you're using this for), you'll now need to change this (line 26 in the code you posted above):

jQuery(this).css({'z-index' : 0}); // as you have it, "this" targets the li.

to:

jQuery(this).find('li').css({'z-index' : 0}); // targets all li's in the ul

or,

jQuery(this).children('li').css({'z-index' : 0}); // targets just the first layer of li's in the ul
0
 

Author Closing Comment

by:john_yourspace
ID: 37152502
this worked
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question