如何使 jQuery UI 导航菜单水平？答案

【问题标题】：How to make jQuery UI nav menu horizontal?如何使 jQuery UI 导航菜单水平？
【发布时间】：2012-10-08 07:17:44
【问题描述】：

我喜欢 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; }

感谢您的帮助！

【问题讨论】：

标签： css jquery-ui menu

【解决方案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 使用的所有小图标的 images 文件夹需要与 jquery-ui.css 文件位于同一文件夹中。

最后是我的身体：

<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+ 下看起来很棒。

【讨论】：

+1 CSS hacking 只有在你没有要完成的项目时才有趣
为了让菜单栏 JS 与标准 jQuery UI 集成而搞砸了好几个小时，现在你的帖子已经开始工作了。谢谢！
菜单栏分支 url github.com/jquery/jquery-ui/tree/menubar 不起作用。有没有替代的网址。
jQuery UI 团队暂时不开发/支持菜单栏小部件：wiki.jqueryui.com/w/page/38666403/Menubar
@Steven jQuery UI 套件死了吗？

【解决方案2】：

你可以这样做：

/* Clearfix for the menu */
.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

还有设置：

.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}

【讨论】：

这似乎有效！我不小心限制了 html 的宽度。感谢您的帮助！
这使列表对我来说是水平的，但没有使悬停的按钮垂直。有没有办法定位悬停的链接？这是我的例子jsfiddle.net/HSHEC/3
我认为它比这更复杂。这不适用于水平菜单栏的所有标准功能。有关下载 jQuery UI 菜单栏小部件（尚未与官方 jQuery UI 下载捆绑）的建议，请参阅下面的答案

【解决方案3】：

这篇文章启发了我尝试 jQuery ui 菜单。

http://jsfiddle.net/7Bvap/

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>


.ui-menu { 
    overflow: hidden;
}
.ui-menu .ui-menu {
    overflow: visible !important;
}
.ui-menu > li { 
    float: left;
    display: block;
    width: auto !important;
}
.ui-menu ul li {
    display:block;
    float:none;
}
.ui-menu ul li ul {
    left:120px !important;
    width:100%;
}
.ui-menu ul li ul li {
    width:auto;
}
.ui-menu ul li ul li a {
    float:left;
}
.ui-menu > li {
    margin: 5px 5px !important;
    padding: 0 0 !important;
}
.ui-menu > li > a { 
    float: left;
    display: block;
    clear: both;
    overflow: hidden;
}
.ui-menu .ui-menu-icon { 
    margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li { 
    float: left;
    display: block;
}


$( "#nav" ).menu({position: {at: "left bottom"}});

http://jsfiddle.net/vapD7/

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

.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 {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}
.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; }
.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

$( "#nav" ).menu({position: {at: "left bottom"}});

【讨论】：

【解决方案4】：

我花了 3 天时间寻找 jquery UI 和 CSS 解决方案，我合并了一些我看到的代码，修复了一点，最后（连同其他代码）我可以让它工作！

http://jsfiddle.net/Moatilliatta/97m6ty1a/

<ul id="nav" class="testnav">
    <li><a class="clk" href="#">Item 1</a></li>
    <li><a class="clk" href="#">Item 2</a></li>
    <li><a class="clk" href="#">Item 3</a>
        <ul class="sub-menu">
            <li><a href="#">Item 3-1</a>
                <ul class="sub-menu">
                    <li><a href="#">Item 3-11</a></li>
                    <li><a href="#">Item 3-12</a>
                        <ul>
                            <li><a href="#">Item 3-111</a></li>                         
                            <li><a href="#">Item 3-112</a>
                                <ul>
                                    <li><a href="#">Item 3-1111</a></li>                            
                                    <li><a href="#">Item 3-1112</a></li>                            
                                    <li><a href="#">Item 3-1113</a>
                                        <ul>
                                            <li><a href="#">Item 3-11131</a></li>                           
                                            <li><a href="#">Item 3-11132</a></li>                           
                                        </ul>
                                    </li>                           
                                </ul>
                            </li>
                            <li><a href="#">Item 3-113</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Item 3-13</a></li>
                </ul>
            </li>
            <li><a href="#">Item 3-2</a>
                <ul>
                    <li><a href="#."> Item 3-21 </a></li>
                    <li><a href="#."> Item 3-22 </a></li>
                    <li><a href="#."> Item 3-23 </a></li>
                </ul>   
            </li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a class="clk" href="#">Item 4</a>
        <ul class="sub-menu">
            <li><a href="#">Item 4-1</a>
                <ul class="sub-menu">
                    <li><a href="#."> Item 4-11 </a></li>
                    <li><a href="#."> Item 4-12 </a></li>
                    <li><a href="#."> Item 4-13 </a>
                        <ul>
                            <li><a href="#."> Item 4-131 </a></li>
                            <li><a href="#."> Item 4-132 </a></li>
                            <li><a href="#."> Item 4-133 </a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Item 4-2</a></li>
            <li><a href="#">Item 4-3</a></li>
        </ul>
    </li>
    <li><a class="clk" href="#">Item 5</a></li>
</ul>

javascript

$(document).ready(function(){

var menu = "#nav";
var position = {my: "left top", at: "left bottom"};

$(menu).menu({

    position: position,
    blur: function() {
        $(this).menu("option", "position", position);
        },
    focus: function(e, ui) {

        if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) {
            $(this).menu("option", "position", {my: "left top", at: "right top"});
            }
    }
});     });

CSS

.ui-menu {width: auto;}.ui-menu:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}.ui-menu .ui-menu-item {display: inline-block;margin: 0;padding: 0;width: auto;}#nav{text-align: center;font-size: 12px;}#nav li {display: inline-block;}#nav li a span.ui-icon-carat-1-e {float:right;position:static;margin-top:2px;width:16px;height:16px;background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px;}#nav li ul li {width: 120px;border-bottom: 1px solid #ccc;}#nav li ul {width: 120px; }.ui-menu .ui-menu-item li a span.ui-icon-carat-1-e {background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;

【讨论】：

到目前为止列出的所有这些的最佳解决方案。谢谢@Moatilliatta

【解决方案5】：

当您将鼠标悬停在主水平菜单上的主题上时，只需将 jquery-ui 菜单视为垂直下拉菜单。这样，主菜单上的每个主题都有一个单独的 jquery ui 菜单。水平主菜单只是封装在主菜单 div 中的 float:left div 的集合。然后，您使用悬停和悬停来弹出每个菜单。

$('.mainmenuitem').hover(
    function(){ 
        $(this).addClass('ui-state-focus');
        $(this).addClass('ui-corner-all');
        $(this).addClass('ui-state-hover');
        $(this).addClass('ui-state-active');
        $(this).addClass('mainmenuhighlighted');
        // trigger submenu
        var position=$(this).offset();
        posleft=position.left;
        postop=position.top;
        submenu=$(this).attr('submenu');
        showSubmenu(posleft,postop,submenu);    
    },
    function(){ 
        $(this).removeClass('ui-state-focus');
        $(this).removeClass('ui-corner-all');
        $(this).removeClass('ui-state-hover');
        $(this).removeClass('ui-state-active');
        $(this).removeClass('mainmenuhighlighted');
        // remove submenu
        $('.submenu').hide();
    }
    );

showSubmenu 函数很简单 - 它只是定位子菜单并显示它。

function showSubmenu(left,top,submenu){
    var tPosX=left;
    var tPosY=top+28;
    $('#'+submenu).css({left:tPosX, top:tPosY,position:'absolute'});
    $('#'+submenu).show();
}

然后，您需要确保子菜单在光标位于其上时可见，并在您离开时消失（这应该在您的 document.ready 函数中。

$('.submenu').hover(
            function(){ 
                $(this).show();
            },
            function(){ 
                $(this).hide();
            }
            );

别忘了隐藏你的子菜单开始 - 在 document.ready 函数中

$(".submenu" ).hide();

在这里查看完整代码

http://jsfiddle.net/R4nyn/

【讨论】：

小提琴不起作用（未显示子菜单）。 Showsubmenu 调用被包裹在小提琴中的setTimeout 中。如果我直接打电话给Showsubmenu，那就可以了。
它也可以在 IE7 中工作......干得好......直接调用 showSubmenu(posleft, postop, submenu);,从计时器中删除方法......它会工作......

【解决方案6】：

添加到 Mihalis Bagos 的答案。我最终做了以下事情：

<style>
.ui-menu{
   z-index: 1000;
}

#menubar-layout-container > .ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#menubar-layout-container > .ui-menu > .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}

.ui-menu .ui-menu-icon{
   display: none;
}
</style>

这会使顶级菜单水平，但使所有子菜单保持垂直。

我不得不删除图标，因为这弄乱了布局

子菜单定位似乎也有问题。

【讨论】：

谢谢。让所有子菜单水平放置有点奇怪。这帮了大忙。

【解决方案7】：

我是 stackoverflow 的新手，所以请善待 :) 但是转向水平 jQuery ui 菜单的问题，我可以设法解决问题的唯一方法（参考this）是设置：

#nav li {width: auto; clear: none; float: left}
#nav ul li {width: auto; clear: none; float:none}

【讨论】：

所以请客气 :) LOLLLLLLLL

【解决方案8】：

我知道这是一个旧线程，但我正在深入研究 jQuery UI 源代码并建立在 Rowan 的答案之上更接近我一直在寻找的东西。只有我需要胡萝卜，因为我觉得有一个视觉指示器很重要可能的子菜单。通过查看源代码（.js 和 .css），我想出了这个可以让胡萝卜成为可见而不会影响设计（高度），并且还允许菜单垂直显示在父项下方。

在 jquery-ui.js 中搜索找到$.widget( "ui.menu") 并将位置更改为：

position: {
my: "center top",
at: "center bottom"
}

并在你的 css 中添加：

#nav > .ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#nav > .ui-menu > .ui-menu-item {
    display: inline-block;
    float: left;

    margin: 0;
    padding: 3px;

    width: auto;
}

.ui-menu .ui-menu-item a {
    padding: 0;
}

.ui-menu .ui-menu-icon{
    position: relative;
    left: 1px;
    top: 6px;
}

最终结果将是一个水平的 jQuery UI 菜单，子菜单垂直显示在父菜单项下方。

【讨论】：

【解决方案9】：

改变：

.ui-menu .ui-menu-item { 
    margin: 0; 
    padding: 0; 
    zoom: 1; 
    width: 100%; 
}

到：

.ui-menu .ui-menu-item { 
    margin: 0; 
    padding: 0; 
    zoom: 1; 
    width: auto; 
    float:left; 
 }

应该让你开始。

【讨论】：

【解决方案10】：

我发现最好的选择是一个名为 jMenu 的插件。

主要：http://www.myjqueryplugins.com/jquery-plugin/jmenu
演示：http://demos.myjqueryplugins.com/jmenu/
GitHub：https://github.com/alpixel/jMenu

截图：

【讨论】：

除了一些链接之外，您还能包含更多内容吗？您的答案中唯一有用的部分是“名为 jMenu 的插件”。
你的链接都是404

【解决方案11】：

要获得带有垂直下拉菜单的水平导航栏，请结合使用表格和无序列表。

第 1 级项目由表格单元格表示，后续级别由无序列表表示。

子菜单的定位是个问题。默认设置是让它们直接出现在旁边，但是当在顶级项目上时，这会掩盖水平导航栏中的后续项目。让它们出现在下面对于单个下拉菜单来说是可以的，但如果下面有第二层，那么第二层会掩盖第一层的其余部分。解决方案是让菜单在下方打开并稍微向右，请参阅菜单调用中的“位置”选项。

<style type="text/css">
  #trJMenu td { white-space: nowrap; width: auto; }
  #trJMenu li { white-space: nowrap; width: auto; }
</style>


<script language="javascript" type="text/javascript">
  $(document).ready(function(){
    $("#trJMenu").menu( { position: { my: "left top", at: "center bottom" } } );          
  });
</script>


<table>
  <tr id='trJMenu'>
    <td>
      <a href='#'>Timesheets</a>
      <ul>
        <li><a href='#'>Labour</a></li>
        <li><a href='#'>Chargeout Report</a></li>
      </ul>
    </td>
    <td>
      <a href='#'>Activity Management</a>
      <ul>
        <li><a href='#'>Activities</a></li>
        <li><a href='#'>Proposals</a></li>
      </ul>
    </td>
  </tr>
</table>

【讨论】：