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

Question

提问by SQLiteNoob

I love the jQuery UI stuff!

我喜欢 jQuery UI 的东西！

I like the navigation menu, but I can't seem to get it horizontal. I've got to be missing something that's a cinch.

我喜欢导航菜单，但我似乎无法将其水平放置。我必须错过一些小事。

Anyone know how to change the CSS? I tried this but it is for an older version and doesn't work, since there is no longer "clear" to keep them on top of each other.

有人知道如何更改CSS吗？我试过这个，但它适用于较旧的版本并且不起作用，因为不再“明确”将它们保持在彼此之上。

Relevant CSS:

采纳答案by Mihalis Bagos

You can do this:

你可以这样做：

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

and also set:

并设置：

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

Answer 2

回答by DavidHyogo

I admire all these efforts to convert a menu to a menubar because I detest trying to hack CSS. It just feels like I'm meddling with powers I can't possibly ever understand! I think it's much easier to add the menubar files available at the menubar branch of jquery ui.

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

I downloaded the full jquery ui css bundled file from the jquery ui download site

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

In the head of my document I put the jquery ui css file that contains everything (I'm on version 1.9.x at the moment) followed by the specific CSS file for the menubar widget downloaded from the menubar branch of jquery ui

在我的文档的头部，我放置了包含所有内容的 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" />

Don't forget the images folder with all the little icons used by jQuery UI needs to be in the same folder as the jquery-ui.css file.

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

Then at the end the body I have:

然后最后我的身体：

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

That's a copy of an up-to-date version of jQuery, followed by a copy of the jQuery UI file, then the menubar module downloaded from the menubar branch of jquery ui

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

The menubar CSS file is refreshingly short:

菜单栏 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; }

but the menubar JavaScript file is 328 lines - too long to quote here. With it, you can simply call menubar() like this example:

但菜单栏 JavaScript 文件有 328 行——太长了，无法在此引用。有了它，你可以像这个例子一样简单地调用 menubar() ：

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

As I said, I admire all the attempts to hack the menu object to turn it into a horizontal bar, but I found all of them lacked some standard feature of a horizontal menu bar. I'm not sure why this widget is not bundled with jQuery UI yet, but presumably there are still some bugs to iron out. For instance, I tried it in IE 7 Quirks Mode and the positioning was strange, but it looks great in Firefox, Safari and IE 8+.

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

Answer 3

回答by Hari K T

This post has inspired me to try the jQuery ui menu.

这篇文章激发了我尝试 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

回答by Moatilliatta

I just been for 3 days looking for a jquery UI and CSS solution, I merge some code I saw, fix a little, and finally (along the other codes) I could make it work!

我花了 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;

Answer 5

回答by Anthony

Just think about the jquery-ui menu as being the verticle dropdown when you hover over a topic on your main horizonal menu. That way, you have a separate jquery ui menu for each topic on your main menu. The horizonal main menu is just a collection of float:left divs wrapped in a mainmenu div. You then use the hover in and hover out to pop up each menu.

当您将鼠标悬停在主水平菜单上的某个主题上时，只需将 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();
    }
    );

The showSubmenu function is simple - it just positions the submenu and shows it.

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

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

You then need to make sure the submenu is visible while your cursor is on it and disappears when you leave (this should be in your document.ready function.

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

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

Also don't forget to hide your submenus to start with - in the document.ready function

也不要忘记隐藏你的子菜单 - 在 document.ready 函数中

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

See the full code here

在此处查看完整代码

http://jsfiddle.net/R4nyn/

Answer 6

回答by Rowan

Adding on to Mihalis Bagos answer. I have ended up doing the following:

添加到 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>

This makes the top level menu horizontal but leaves any sub menus vertical.

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

I had to remove the icons as this was messing up the layout

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

There also seems to be a problem with the sub menu positioning.

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

Answer 7

回答by Eda

I'm new to stackoverflow, so please be nice :) however turning to the problem of horizontal jQuery ui menu, the only way I could manage to resolve the problem (refering to this) was to set:

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

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

Answer 8

回答by defaultNINJA

I know this is an old thread but I was digging into the jQuery UI source code and built upon Rowan's answer which was closer to what I had been looking for. Only I needed the carrots as I felt it was important to have a visual indicator of possible submenus. From looking at the source code (both .js and .css) I came up with this that allows the carrot be visiable without messing with design (height) and also alowing menu to appear vertical below the parent item.

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

In the jquery-ui.js do a search to find $.widget( "ui.menu")and change postition to:

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

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

And in your css add:

并在您的 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;
}

End Result will be a jQuery UI Menu horizontal with sub menus being displayed veriticaly below the parent menu item.

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

Answer 9

回答by Matt Newman

changing:

改变：

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

should start you off.

应该让你开始。

Answer 10

回答by cat5dev

The best option I found is a plugin called jMenu.

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

Main: http://www.myjqueryplugins.com/jquery-plugin/jmenu
Demo: http://demos.myjqueryplugins.com/jmenu/
GitHub: https://github.com/alpixel/jMenu

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

Screenshot:
demo menu

截屏：
演示菜单

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

提问by SQLiteNoob

采纳答案by Mihalis Bagos

回答by DavidHyogo

回答by Hari K T

回答by Moatilliatta

回答by Anthony

回答by Rowan

回答by Eda

回答by defaultNINJA

回答by Matt Newman

回答by cat5dev

相关推荐

最近更新

标签

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

提问by SQLiteNoob

采纳答案by Mihalis Bagos

回答by DavidHyogo

回答by Hari K T

回答by Moatilliatta

回答by Anthony

回答by Rowan

回答by Eda

回答by defaultNINJA

回答by Matt Newman

回答by cat5dev

相关推荐

CSS 删除元素的继承属性（框大小）

CSS 获取背景图像以显示在空白 div 元素中

css - 边框上有边距的圆圈

CSS Div 拉伸 100% 页面高度

相关推荐

最近更新

标签