2
"메가"드롭 다운 메뉴에서 작업 중입니다. 그러나 나는 그것으로 작은 트위스트가 필요하다는 것을 증명해야한다."메가"드롭 다운 메뉴
올바른 것으로 간주하려면 다음과 같이 나타나야하며 각각의 탭 드롭 다운은 동일한 정보를 포함하기 때문에 같은 위치에 표시해야합니다. 드롭 다운의 왼쪽은 큰 이미지의 왼쪽에서 시작해야합니다.
alt text http://egdata.com/Cory/mdd.jpg
그냥 메인 탭을 가리킬 때 모두 5 개 하위 영역이 표시됩니다 점에 유의한다. 그것은 단지 2 레벨 드롭 다운입니다.
현재 IE8, FF 및 Opera에서는 정확하지만 Chrome, IE7 및 IE6에서는 잘못되었습니다. 이 3 개의 "잘못된"브라우저는 모두 거의 동일하게 렌더링합니다.
도움을 주시면 감사하겠습니다. 나는 내가 놓치고있는 그 작은 무엇인가 꽤 확신한다.
빠른 일반 구조
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 & 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 & 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 & 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>
이 정말 다섯 수준 하위 메뉴 탐색인가? 그렇다면 신이 멈추는 동안 멈춰라. 나는 이것이 실제로 제비 뽑기 다라는 것을 알고있다. 그러나 5 - 수준은 광기 남자 다. UX는 끔찍합니다. 5 단계가 아니라면 사과드립니다. –
은 단지 2 레벨입니다. 5 레벨은 화를 낼 것입니다. 두 번째 레벨에는 5 개의 미니 섹션이 있지만 1 개의 레벨에는 추가 마우스 오버 또는 클릭이 필요하지 않습니다. – corymathews
이미 부스트랩 및 메타를 사용해 보셨습니까? –