如何使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.只是觉得我在干涉我无法理解的力量!我认为在jquery ui的菜单栏分支中添加菜单栏文件要容易得多.

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

在我的文档的头部,我把包含所有内容的jquery ui css文件(我现在在版本1.9.x上),然后是从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文件的副本,然后是从jquery ui的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捆绑在一起,但可能还有一些错误需要解决.例如,我在IE 7 Quirks模式下尝试过,定位很奇怪,但在Firefox,Safari和IE 8+中看起来很棒.

Answer 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;
}

Answer 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"}});

Answer 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;