JQuery超级菜单全宽菜单项

JQuery Mega Menu Full Width Menu Item

本文关键字：菜单项 菜单 JQuery      更新时间：2023-09-26

我是css和jquery的新手，对菜单项有问题。我有一个Jquery超级菜单，我想让律师档案菜单项是一行，而不是现在的两行。通常我会发布代码，但太多了。所以我要发布一个链接到实际的工作网站。

我尝试添加全宽，但没有成功

$(document).ready(function($){
    $('#mega-menu-tut').dcMegaMenu({
        rowItems: '1',
        speed: 'fast'
        fullWidth: true
  });
 });

我还尝试在此处修改css：

.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
     float: left; /* Float the sub-menus and give them a fixed width to from the mega menu    rows */
     width: 130px; 
     height: 165px;
     margin: 0 2px 7px 2px;
     border: 3px solid #ccc;
}

但这只是修改了实际的内部菜单。

这是活动站点：http://gdisinc.com/barker/default.php

请注意，如果您将鼠标悬停在律师档案上，它将显示两行。我如何才能使这一行与960像素的网站宽度相匹配。非常感谢。

PS:我使用了这个菜单系统：http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

您可以更改此样式上的填充

.dcjq-mega-menu ul.menu li a

至

padding:12px 20px;

中的元素具有基于其内容的宽度，因此减小导航项的字体大小也可以。使用Chrome的Web Inspector/Firefox的Firebug等可以很容易地找到此类问题的修复方法。

在联系我们标签后，最好不要使用小分隔符。你可以通过添加这样的：最后一个子类来实现这一点：

.dcjq-mega-menu ul.menu li:last-child a { background:none; }

问题是这里的CSS选择器可读性不强，以后可能会导致非常烦人的问题

.last-menu-item { background:none; }

同样，请记住：Internet Explorer<不支持最后一个孩子；9http://caniuse.com/#search=last-子

欢迎来到CSS的世界…：）

看起来您需要更改此处的"rowitems"选项：

$(document).ready(function($){
  $('#mega-menu-tut').dcMegaMenu({
    rowItems: '3',
    speed: 'fast'
  });
});

如果将其更改为"5"，则应在同一行中显示所有项目。看看例子：

http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/

除非您将菜单拆分为MegaMenu的单独实例，否则似乎没有办法为每个菜单项配置此效果。

相关文章：