jquery - "Mega"下拉菜单-6ren

jquery - "Mega"下拉菜单

转载作者：行者123 更新时间：2023-11-28 11:51:14

我正在制作一个“大型”下拉菜单。但是，我需要对其进行一点改动，这被证明是一项任务。

要被认为是正确的，它应该如下所示并且每个选项卡下拉列表都需要显示在同一位置，因为它们每个都包含相似的信息。下拉列表的左侧应从大图像的左侧开始。

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 <brian@cherne.net> */
(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>

最佳答案

这里的问题太多了，无法在一个答案中提供适用于所有浏览器的解决方案。

但是，您的下拉菜单布局问题的关键在于下拉菜单 DIV 的哪个父元素相对定位。当前是 LI 元素，要实现您想要的布局，它应该是 UL 元素。因此，Safari(可能还有其他 Webkit 浏览器)的解决方案的开始是这样的:

将这一行从你的Javascript:
subMenu.css("marginLeft", "-50px");
添加/更改这些 CSS 声明:
ul#MM { position:relative； }
ul#MM li.mega { 位置:静态； }
ul#MM li.mega div.subMenu { left: 0;顶部:2em； }

关于jquery - "Mega"下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1947131/

文章推荐： javascript - 如何确定 $(this) 是否在点击事件的数组中

文章推荐： JavaScript:选中复选框时更改 href 值

encryption - Mega 的加密如何用于共享？
我有一些关于找到一种方法来实现可以与多个收件人共享的任意数据的加密的问题。 Mega似乎正是这样做的。据我所知，它会在将数据上传到 Web 服务器之前对其进行加密。仍然可以与他人共享该文件。加密是如何
jQuery Mega 菜单闪烁问题
我想知道是否有人能够阐明我遇到的问题...... 我在以下网站中使用了 jQuery Mega Menu 脚本: http://www.furnituremind.co.uk/ 我从以下站点找到了脚本
jquery - "Mega"下拉菜单
我正在制作一个“大型”下拉菜单。但是，我需要对其进行一点改动，这被证明是一项任务。要被认为是正确的，它应该如下所示并且每个选项卡下拉列表都需要显示在同一位置，因为它们每个都包含相似的信息。下拉列表的
jQuery Mega 下拉菜单插件
我正在使用 jQuery Mega Drop Down Menu 插件，我无法开始工作的一件简单的事情是我需要导航文本在菜单中居中。我删除了所有的“float:left;”声明，但导航文本仍在左侧。
CSS3 Mega 菜单和打印控件？
我是 css 的新手，但我有一个 css3 大型菜单，我注意到当我去打印页面时，它想要打印出大型菜单中的所有 Material 以及页面上的所有 Material 。如果您想自己测试，请转到此处 ht
python - 从电脑读取wav文件到arduino mega
我必须读取wav文件(我决定用python来做)并将字节从文件写入串行端口。这是我的 python 代码(进行了一些更改以修复字节传输/接收) import serial, time ser = se
javascript - Mega 如何在不需要许可的情况下将文件保存到硬盘驱动器
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
javascript - Mega 如何下载文件？
当您从 MEGA 服务下载文件时，会出现一个显示下载进度条的网页。在该栏达到 100% 后，您的浏览器将通知用户将文件保存到选定的文件夹中。我知道 Mega 使用 HTML5 文件系统 API 来执行
numbers - Kilo/Mega/Tera字节的表示形式
我对不同字节单位的表示有些困惑。整个1字节= 8位被接受。但是，在很多资料中我都看到了 1 kiloByte = 2^10 bytes = 1024 bytes 和 1 kiloByte = 10
python - 使用 Mega 模块命令的预期字符串或缓冲区
执行 mega.login(email,password) 时出现以下错误 Traceback (most recent call last): File "", line 1, in Fi
c++ - 在PROGMEM中添加更多数据会中断Arduino Mega 2560上的SPI传输
我正在做一个涉及Arduino Mega(2560)和Waveshare ePaper显示器的小项目(或我认为是这样)。我已经使它与库(epd7in5)一起正常工作，并将两个图像添加到PROGMEM
c# - 如何在WPF中实现 "Mega Menus"？
我正在尝试使用 WPF 实现“Mega Menu”样式的菜单。要查看网页设计中的大型菜单示例，请参阅 here . 到目前为止，我已经尝试通过使用 TextBlocks 作为最高级别的菜单来创建类似的
jquery - Bootstrap Mega 菜单定位错误
目前我正在使用 Bootstrap 3 和 Mega Menu 构建网站。一切都很好，除了一个不愉快的时刻——我的 super 菜单定位错误。它不是在 .container 内部打开，而是忽略容器并在
css - Mega Drop Down 周围的边框
我正在构建一个仅使用 CSS 的下拉列表。我需要在周围有一个连续的边框在主导航列表以及嵌套的中这是悬停时出现的子菜单。目前我正试图通过定位来消除子菜单和顶部导航栏相交的顶部边框。下面使用
css - 需要 Mega 菜单栏
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 8 年前。 Improve
c++ - Arduino Mega 上的奇怪计算
看看这个非常基本的 Arduino 程序: long pos = 90 * 1023/360; Serial.println(pos); 本应显示255，却显示73，不明白为什么。此程序在 Ardu
jquery - Bootstrap Mega 菜单无法离线工作
我正在尝试在 Bootstrap 中创建一个 Mega 菜单。我在 Bootsnipp 上找到了一个 super 菜单 https://bootsnipp.com/snippets/featured/
html - Mega DropDown 菜单位置问题
我正在尝试创建一个大型下拉菜单，就像来自以下链接的菜单一样:http://i48.tinypic.com/2ln97ip.png 我已经创建了这个 fiddle ，但是由于第二个 ul 的定位和边界不
c# - Git mega 压缩所有具有相同消息和作者的顺序提交
我有一个 application它监视文件系统(TeamCity 配置目录)，以了解对 XML 配置文件的更改。当检测到更改时，它会提交给 Git(使用 libgit2sharp )。 Git“提交者
javascript - Bootstrap3 Mega 菜单更改下拉宽度
我想知道如何更改 bootstrap mega 菜单下拉大小以适合 bootstrap 容器宽度。我在下面附上了一张图片，以便更好地理解我想做什么。 Boostrap Mega Menu HTML代

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - "Mega"下拉菜单