Menu déroulant "Mega"

Je travaille sur un menu déroulant "méga". Cependant, j'ai besoin d'une petite touche, ce qui s'avère être une tâche.Menu déroulant "Mega"

Pour être considéré comme correct, il doit ressembler à ceci et chaque liste déroulante des onglets doit être affichée au même endroit car ils contiennent chacun des informations similaires. Le côté gauche de la liste déroulante devrait commencer sur le côté gauche de la grande image.

alt text http://egdata.com/Cory/mdd.jpg

Juste pour noter que les 5 zones sous montreront lorsque l'onglet principal est plané. Ce n'est qu'une liste déroulante à 2 niveaux.

Actuellement, il est correct dans IE8, FF et Opera mais mal dans Chrome, IE7 et IE6. Ces 3 "mauvais" navigateurs rendent tous le même résultat.

Toute aide serait grandement appréciée. Je suis sûr que c'est quelque chose de petit que je continue à manquer.

rapide Structure générale

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> @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)"> 
    <div id="megaMenu"></div> 
    </div> 
</div> 
</body> 
</html>

Source

2009-12-22 corymathews

Est-ce vraiment un sous-menu à cinq niveaux nav? Si oui, s'il vous plaît, arrêtez-vous pendant que vous êtes derrière. Je sais que c'est pratiquement trolling mais 5-niveau est l'homme de la folie. L'UX est horrible. Si ce n'est pas 5 niveaux, je m'excuse. –

son seul niveau 2. 5-niveau serait fou lol. Le deuxième niveau a les 5 mini sections, mais son niveau de tous les 1 pas de survol ou de clic supplémentaire nécessaire. – corymathews

Déjà essayé boostrap et meta? –

Il y a trop de problèmes ici pour fournir une solution pour tous les navigateurs dans une seule réponse. Cependant, la clé du problème avec la disposition de vos listes déroulantes est quel élément parent de la liste déroulante DIV est positionné de manière relative. C'est actuellement l'élément LI quand, pour réaliser la mise en page que vous voulez, il devrait être l'élément UL.Ainsi, le début d'une solution pour Safari (et probablement d'autres navigateurs Webkit) serait quelque chose comme ceci:

Retirez cette ligne de votre Javascript:

subMenu.css("marginLeft", "-50px");
Ajouter/changement ces déclarations CSS:

ul#MM { position: relative; }

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

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

Source

2009-12-22 17:07:46

merci richard ça a bien fonctionné. Après avoir regardé plus dans votre réponse j'aurais dû revenir en arrière et lire la description pour la position: absolue. "Génère un élément positionné en absolu, positionné par rapport au premier élément parent qui a une position autre que statique La position de l'élément est spécifiée avec les propriétés" left "," top "," right "et" bottom "" http://www.w3schools.com/Css/pr_class_position.asp – corymathews

C'est un hack sale, mais vous pouvez coder en dur les propriétés left pour chaque div.submenu.

Mettez un ID sur l'élément parent de chaque menu déroulant, puis dans un style conditionnel IE, définissez la première icône déroulante #flyout1 div.submenu être left:-50px; la seconde à left:-90px; etc.

Je ne sais pas comment aborder ce dans Safari/Chrome, désolé.

Source

2009-12-22 16:05:48 ndorfin

Je pensais à faire cela mais j'espérais l'éviter. – corymathews

Répondre

Questions connexes