css - 如何使 jQuery UI 导航菜单水平？

Question

我喜欢 jQuery UI 的东西!

我喜欢导航菜单，但我似乎无法将其水平放置。我一定是错过了一些小东西。

有人知道如何更改 CSS 吗？我试过这个，但它适用于旧版本并且不起作用，因为不再“清晰”地让它们彼此重叠。

相关 CSS:

.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }

.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-state-disabled a { cursor: default; }

感谢您的帮助!

Answer 1

我钦佩所有这些将菜单转换为菜单栏的努力，因为我讨厌尝试破解 CSS。感觉就像我在干涉我永远无法理解的力量!我认为添加可用的菜单栏文件要容易得多 menubar branch of jquery ui .

我从 jquery ui download site 下载了完整的 jquery ui css 捆绑文件。

在我的文档的开头，我放置了包含所有内容的 jquery ui css 文件(我目前使用的是 1.9.x 版)，然后是从 menubar branch of jquery ui 下载的菜单栏小部件的特定 CSS 文件。

<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" />

不要忘记包含 jQuery UI 使用的所有小图标的图像文件夹需要与 jquery-ui.css 文件位于同一文件夹中。

最后是我的 body :

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="js/menubar/jquery.ui.menubar.js"></script>

这是最新版本的 jQuery 的副本，然后是 jQuery UI 文件的副本，然后是从 menubar branch of jquery ui 下载的菜单栏模块。

菜单栏 CSS 文件非常短:

.ui-menubar { list-style: none; margin: 0; padding-left: 0; }
.ui-menubar-item { float: left; }
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }

但是菜单栏 JavaScript 文件有 328 行 - 在这里引用太长了。有了它，您可以像这个例子一样简单地调用 menubar() :

$("#menu").menubar({
    autoExpand: true,
    menuIcon: true,
    buttons: true,
    select: select
});

正如我所说，我很欣赏所有破解菜单对象以将其变成水平栏的尝试，但我发现它们都缺少水平菜单栏的某些标准功能。我不确定为什么这个小部件还没有与 jQuery UI 捆绑在一起，但大概还有一些错误需要解决。例如，我在 IE 7 Quirks Mode 中尝试过，定位很奇怪，但在 Firefox、Safari 和 IE 8+ 中看起来不错。