logo标签列表

如何使jQuery UI导航菜单水平显示？

cssjquery-uimenu
46

我喜欢jQuery UI！

我喜欢这个导航菜单，但似乎无法将其水平展现。我一定漏了什么很简单的东西。

有人知道如何更改CSS吗？我尝试过这个，但它是为旧版本而设计的，不再适用，因为没有“clear”将它们保持在最上层。

相关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; }

感谢你的帮助！

11个回答
28

我很欣赏将菜单转换为菜单栏的努力，因为我讨厌尝试hack CSS。这感觉就像在摆弄我永远无法理解的能力！我认为更容易的方法是添加可在jquery ui menubar分支找到的菜单栏文件。

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

在我的文档头部，我放置了包含所有内容的jquery ui css文件（我目前使用版本1.9.x），接着是从jquery ui menubar分支下载的特定CSS文件，用于menubar小部件。

<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 文件放在同一个文件夹中。

然后在 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文件的副本，然后是从jquery ui的menubar分支下载的menubar模块。

菜单栏的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中，但可能仍有一些bug需要解决。例如，我在IE 7 Quirks模式下尝试了它，定位很奇怪，但在Firefox、Safari和IE 8+中看起来很棒。

3
CSS黑客技巧只有在你没有待完成的项目时才是有趣的。 - Alan
我在尝试将菜单栏JS与标准jQuery UI集成时浪费了数小时，现在您的帖子让一切都正常工作了。谢谢！ - Marc Rochkind
这个可以工作，尽管我在 select: select 上遇到了一个错误 - Uncaught ReferenceError: select is not defined。 - Yuck
4
菜单栏分支的网址https://github.com/jquery/jquery-ui/tree/menubar 无法访问。有没有其他的替代网址？ - dips
1
jQuery UI团队目前不再开发/支持菜单栏小部件：http://wiki.jqueryui.com/w/page/38666403/Menubar - Steven
1
@Steven，jQuery UI套件已经死了吗？ - johnny
23

你可以这样做：

/* 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中意外地限制了宽度。感谢您的帮助！ - SQLiteNoob
4
这使得列表横向排列，但悬停的按钮并没有变成垂直排列。是否有一种方法可以定位悬停链接？这是我的示例http://jsfiddle.net/HSHEC/3/。 - tdelaney18
1
我认为这比这更复杂。这并不完全适用于水平菜单栏的所有标准功能。请参见下面的答案，了解有关下载jQuery UI menubar小部件的建议（尚未与官方jQuery UI下载捆绑在一起）。 - DavidHyogo
16

这篇文章让我受到启发，尝试使用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"}});
5

我花了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。 - Standage
4

想象一下，当你悬停在主要水平菜单上的一个主题时，jquery-ui菜单就像垂直下拉菜单。这样，您可以为主菜单上的每个主题使用单独的jquery ui菜单。水平主菜单只是包含float：left div的集合，包装在mainmenu div中。然后，您使用hover in和hover out来弹出每个菜单。

$('.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/

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

我是stackoverflow的新手，请多关照 :) 然而，就水平jQuery ui菜单问题而言，我能够解决问题的唯一方法（参考这里）就是设置：

#nav li {width: auto; clear: none; float: left}
#nav ul li {width: auto; clear: none; float:none}
4
没问题，我会尽力做到最好的翻译。 - jondinham
3
添加一下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>

这将使顶级菜单变为水平，但保留任何子菜单垂直。

我必须删除图标，因为它会影响布局。

子菜单的位置似乎也存在问题。

谢谢。所有子菜单都水平排列有点奇怪。这个改进帮了很多。 - Roger Allen
2
我知道这是一个旧的主题，但我正在深入研究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水平菜单，子菜单在父菜单项下垂直显示。
2

变更：

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

to:

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

应该能够让您开始。

1
2
你能提供一些超出仅链接的内容吗？你回答中唯一有用的部分是“名为jMenu的插件”。 - Teepeemm
你的链接都是404。 - SQLiteNoob
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接