tags:

views:

593

answers:

2
+2  Q: 

"Mega" Drop Down Menu

I am working on a "mega" drop down menu. However I need a small twist to it which is proving to be a task.

To be considered correct it should look like the following and Each tab dropdown needs to be displayed at the same location because they will each contain similar info. The left side of the dropdown should start at the left side of the large image.

alt text

Just to note that all 5 sub areas will show when the main tab is hovered. It is only a 2 level dropdown.

Currently it is correct in IE8, FF and Opera but wrong in Chrome, IE7 and IE6. These 3 "wrong" browsers all render it pretty much the same.

Any help would be greatly appreciated. I am pretty sure its something small that I keep missing.

Quick General Structure

ul#MM
  li.mega h2 a
  div.subMenu
  div.mini
    h3
    ul.sub
      li a

CSS

body { background:#FFFFFF; color:#343434; font-size:14px; font-family:Verdana, Geneva, sans-serif; margin:0; padding:0; }

ul#MM { }
ul#MM li { display: inline; position: relative; padding:0; margin:0; overflow:hidden; }
ul#MM h2 { font-size:100%; font-weight: normal; display:inline; line-height:24px; }
ul#MM h3 { font-size:100%; font-weight: normal; display:inline; padding:5px; margin:0; color:#fff; }
ul#MM li a { color:#0086aa; text-decoration:none; }
ul#MM li a:hover { text-decoration:none; }
ul#MM li.mega a { background:transparent url(arrow.gif) center right no-repeat; padding:8px 5px; }
ul#MM li.mega a:hover { text-decoration:none; background:url(blueTrandBG.png) repeat; color:#fff;}
ul#MM li.mega h2 a.current { text-decoration:none; background:url(blueTrandBG.png) repeat; color:#fff; padding:8px 5px;  -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius:5px; border-top-right-radius:5px; }

ul#MM li.mega div.subMenu { display:none; position: absolute; top:25px; margin:0; padding:10px; width:960px; height:366px; background:url(blueTrandBG.png) repeat; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}

ul#MM li.mega div.subMenu div.mini { width:168px; float:left; margin:5px; position:relative; background:url(blueTrandBG_lite.png) repeat; padding:5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
ul#MM li.mega div.subMenu div.mini:hover { background:url(blueTrandBG.png) repeat; }

ul#MM li.hovering div.subMenu { display:block; margin:0; }

ul#MM li.mega div.subMenu ul.sub { background:#fff; padding:0; margin:0; display:block; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
ul#MM li.mega div.subMenu ul.sub li { border-bottom:1px solid #eaeaea; padding:0; margin:0; list-style:none; width:100%; display:block; }
ul#MM li.mega div.subMenu ul.sub li a { display:block; background:transparent; margin:0; border:0; padding:6px; color:#221f1f; }
ul#MM li.mega div.subMenu ul.sub li a:hover { color:#f37928; background:transparent; }

#box { margin:0 auto; padding:0; width:960px; }
#bigPicture { width:960px; height:351px; background-color:#000; margin-left:-7px; margin-top:20px; }
.grayLight { color:#777; }

HTML / JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css-02.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
/** hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+ <http://cherne.net/brian/resources/jquery.hoverIntent.html&gt; @author Brian Cherne <[email protected]> */
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
</script>
<script type="text/javascript">
    $(document).ready(function() {
    function addMega(){ 
      $(this).children("h2").children().addClass("current"); 
      $(this).addClass("hovering");
      var subMenu = $(this).children("ul#MM li.hovering div.subMenu");
//    var pos = $(this).offset();
//     var width = $(this).width();
//    alert(pos.left);
//    subMenu.children("ul").css( { "left": "0", "top":"50px" } );
      subMenu.show();
      subMenu.css("marginLeft", "-50px");
     }

    function removeMega(){ 
      $(this).children("h2").children().removeClass("current"); 
      $(this).removeClass("hovering"); 
     }

    var megaConfig = { 
      interval: 100, 
      sensitivity: 10, 
      over: addMega, 
      timeout: 250, 
      out: removeMega 
     };

    $("li.mega").hoverIntent(megaConfig); 
     $("ul#MM li.mega div ul li:last-child").css("borderWidth",0); 

     if ($.browser.opera) { 
      $("ul#MM li.mega div.subMenu").css("top", "33px"); 
      $("ul#MM li.mega div.mini").css("top", "0"); 
     }
  });
</script>
<!--[if lte IE 7]> <style type="text/css">ul#MM li.mega div.subMenu { top:33px; left:0; } </style><![endif]-->
</head>
<body>
<div id="box">
  <ul id="MM">
    <li>
      <h2><a href="./">home</a></h2>
    </li>
    <li><span class="grayLight">|</span></li>
    <li class="mega">
      <h2><a href="play.cfm">plays</a></h2>
          <div class="subMenu">
          <div class="mini">
              <h3>play</h3>
            <ul class="sub">
                <li><a href="bay_fishing.cfm">bay fishing</a></li>
              <li><a href="deep_sea_fishing.cfm">deep sea fishing</a></li>
                <li><a href="fly_fishing.cfm">fly fishing</a></li>
                <li><a href="floundering.cfm">floundering</a></li>
              <li><a href="fresh_water_fishing.cfm">fresh water fishing</a></li>
                <li><a href="jetty_fishing.cfm">jetty fishing</a></li>
              <li><a href="kayak_fishing.cfm">kayak fishing</a></li>
                <li><a href="surf_fishing.cfm">surf fishing</a></li>
              <li><a href="pier_fishing.cfm">pier fishing</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>hiy</h3>
              <ul class="sub">
                <li><a href="species.cfm">species</a></li>
              <li><a href="bag_limits.cfm">bag limits</a></li>
                <li><a href="photo_gallery.cfm">photo gallery</a></li>
            </ul>
            </div>
            <div class="mini">
            <h3>hellj</h3>
              <ul class="sub">
              <li><a href="when_to_come.cfm">when to come</a></li>
                <li><a href="where_to_go.cfm">where to go</a></li>
              <li><a href="hot_spots.cfm">hot spots</a></li>
                <li><a href="boat_ramps_marinas.cfm">boat ramps &amp; marinas</a></li>
              <li><a href="guides.cfm">guides</a></li>
                <li><a href="bait_shops.cfm">bait shops</a></li>
              <li><a href="what_to_bring.cfm">what to bring</a></li>
                <li><a href="boater_s_checklist.cfm">boater's checklist</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>there</h3>
              <ul class="sub">
              <li><a href="seagrass_protection.cfm">seagrass protection</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>wow</h3>
              <ul class="sub">
              <li><a href="round_the_bend.cfm">round the bend</a></li>
              </ul>
          </div>
          </div>
    </li>
    <li><span class="grayLight">|</span></li>
    <li class="mega">
      <h2><a href="learn.cfm">learn</a></h2>
          <div class="subMenu">
          <div class="mini">
              <h3>play</h3>
            <ul class="sub">
                <li><a href="bay_fishing.cfm">bay fishing</a></li>
              <li><a href="deep_sea_fishing.cfm">deep sea fishing</a></li>
                <li><a href="fly_fishing.cfm">fly fishing</a></li>
                <li><a href="floundering.cfm">floundering</a></li>
              <li><a href="fresh_water_fishing.cfm">fresh water fishing</a></li>
                <li><a href="jetty_fishing.cfm">jetty fishing</a></li>
              <li><a href="kayak_fishing.cfm">kayak fishing</a></li>
                <li><a href="surf_fishing.cfm">surf fishing</a></li>
              <li><a href="pier_fishing.cfm">pier fishing</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>hiy</h3>
              <ul class="sub">
                <li><a href="species.cfm">species</a></li>
              <li><a href="bag_limits.cfm">bag limits</a></li>
                <li><a href="photo_gallery.cfm">photo gallery</a></li>
            </ul>
            </div>
            <div class="mini">
            <h3>hellj</h3>
              <ul class="sub">
              <li><a href="when_to_come.cfm">when to come</a></li>
                <li><a href="where_to_go.cfm">where to go</a></li>
              <li><a href="hot_spots.cfm">hot spots</a></li>
                <li><a href="boat_ramps_marinas.cfm">boat ramps &amp; marinas</a></li>
              <li><a href="guides.cfm">guides</a></li>
                <li><a href="bait_shops.cfm">bait shops</a></li>
              <li><a href="what_to_bring.cfm">what to bring</a></li>
                <li><a href="boater_s_checklist.cfm">boater's checklist</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>there</h3>
              <ul class="sub">
              <li><a href="seagrass_protection.cfm">seagrass protection</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>wow</h3>
              <ul class="sub">
              <li><a href="round_the_bend.cfm">round the bend</a></li>
              </ul>
          </div>
          </div>
    </li>
    <li><span class="grayLight">|</span></li>
    <li>
      <h2><a href="plan.cfm">plan</a></h2>
    </li>
    <li><span class="grayLight">|</span></li>
    <li class="mega">
      <h2><a href="conserve.cfm">conserve</a></h2>
          <div class="subMenu">
          <div class="mini">
              <h3>play</h3>
            <ul class="sub">
                <li><a href="bay_fishing.cfm">bay fishing</a></li>
              <li><a href="deep_sea_fishing.cfm">deep sea fishing</a></li>
                <li><a href="fly_fishing.cfm">fly fishing</a></li>
                <li><a href="floundering.cfm">floundering</a></li>
              <li><a href="fresh_water_fishing.cfm">fresh water fishing</a></li>
                <li><a href="jetty_fishing.cfm">jetty fishing</a></li>
              <li><a href="kayak_fishing.cfm">kayak fishing</a></li>
                <li><a href="surf_fishing.cfm">surf fishing</a></li>
              <li><a href="pier_fishing.cfm">pier fishing</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>hiy</h3>
              <ul class="sub">
                <li><a href="species.cfm">species</a></li>
              <li><a href="bag_limits.cfm">bag limits</a></li>
                <li><a href="photo_gallery.cfm">photo gallery</a></li>
            </ul>
            </div>
            <div class="mini">
            <h3>hellj</h3>
              <ul class="sub">
              <li><a href="when_to_come.cfm">when to come</a></li>
                <li><a href="where_to_go.cfm">where to go</a></li>
              <li><a href="hot_spots.cfm">hot spots</a></li>
                <li><a href="boat_ramps_marinas.cfm">boat ramps &amp; marinas</a></li>
              <li><a href="guides.cfm">guides</a></li>
                <li><a href="bait_shops.cfm">bait shops</a></li>
              <li><a href="what_to_bring.cfm">what to bring</a></li>
                <li><a href="boater_s_checklist.cfm">boater's checklist</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>there</h3>
              <ul class="sub">
              <li><a href="seagrass_protection.cfm">seagrass protection</a></li>
              </ul>
          </div>
            <div class="mini">
            <h3>wow</h3>
              <ul class="sub">
              <li><a href="round_the_bend.cfm">round the bend</a></li>
              </ul>
          </div>
          </div>
    </li>
    <li><span class="grayLight">|</span></li>
    <li>
      <h2><a href="learn.cfm">learn</a></h2>
    </li>
    <li><span class="grayLight">|</span></li>
    <li>
      <h2><a href="plan.cfm">plan</a></h2>
    </li>
    <li><span class="grayLight">|</span></li>
    <li>
      <h2><a href="stay.cfm">stay</a></h2>
    </li>
  </ul>
  <div id="bigPicture" style="background-image:url(http://www.visitcorpuschristitx.org/birding/images/bigimage5.jpg)"&gt;
    <div id="megaMenu"></div>
  </div>
</div>
</body>
</html>
A: 

It's a dirty hack, but you could hard-code the left properties for each div.submenu.

Put an ID on the parent element of each flyout menu, then in an IE conditional style, set the first flyout #flyout1 div.submenu to be left:-50px; the second to left:-90px; etc.

Not sure how to tackle this in Safari / Chrome, sorry.

ndorfin  2009-12-22 16:05:48
I was thinking about doing this but I was hoping to avoid it.
corymathews  2009-12-22 16:09:07
+1  A: 

There are too many problems here to provide a solution for all browsers in a single answer (I'd recommend rebuilding this methodically starting with a reset style-sheet).

However, the key to the problem with the layout of your drop-downs is which parent element of the drop-down DIV is relatively positioned. It's currently the LI element when, to achieve the layout you want, it should be the UL element. So, the start of a solution for Safari (and presumably other Webkit browsers) would be something like this:

  • Remove this line from your Javascript:

    subMenu.css("marginLeft", "-50px");

  • Add/change these CSS declarations:

    ul#MM { position: relative; }

    ul#MM li.mega { position: static; }

    ul#MM li.mega div.subMenu { left: 0; top: 2em; }

Richard M  2009-12-22 17:07:46
thanks richard it worked great. After looking more into your answer I should have gone back and read the description for position:absolute. "Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties" http://www.w3schools.com/Css/pr_class_position.asp
corymathews  2009-12-22 17:32:30

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?