Question

菜单有3个级别。第一级只有一个名为“全部显示”的项目。第二级包含产品类别。第三级包含子类别。没有更多的菜单级别。

子类别必须水平显示：

Show all
+-----------+
|Category1  |+-----------------------------------------------------------+
|Category2 >|| Subcategory21  Subcategory24  Subcategory27  Subcategory2A|
|Category3  || Subcategory22  Subcategory25  Subcategory28  Subcategory2B|
+-----------+| Subcategory23  Subcategory26  Subcategory28               |
             +-----------------------------------------------------------+

我尝试了jquery ui菜单小部件来实现这一点。子类别垂直显示。如何更改此项以便子类别水平显示？

jquery ui可以为此修补，还是有其他控制允许这样做。鼠标悬停时必须打开子菜单。 jquery-ui菜单允许使用鼠标悬停打开，但我还没有找到一种水平渲染第三级的方法。

在运行时从数据库读取数据。使用jquery，jquery ui，ASP.NET /Mono MVC2

更新

演示时间为http://jsfiddle.net/cNgG5/

<ul id="menu" style="width:110px">
    <li><a href="#">Category</a>

        <ul>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
        </ul>
    </li>
<script>    
$(function () {
    $("#menu").menu();
} );
</script>

将光标移动到类别，出现单列菜单。如何将其呈现为多列？

Answer 1

你可以使用CSS。例如，将所有子类别设为一个类，并设置float：left。当然，我需要更多的信息来帮助你。如果你可以用jsfiddle上传代码，那就更好了。

好的，我在这里发送的内容就像我可以为您的组水平菜单进行现场演示一样简单。你应该为每个组包含1 li并且每次实时输入div，并且只有css的帮助你才能做你想做的事。

jQuery UI horizontal grouped menu

<ul id="menu" style="width:110px">
    <li><a href="#">Category</a>

        <ul>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
        </ul>
    </li>
</ul>

css就是这样的：

#menu{width:400px;float:left;}
#menu  li ul li{
    width:100px;
    float:left;
    word-wrap: break-word;
}
#menu li ul li div{
    width:100px;
    float:left;
}

Answer 2

在jquery-ui-1.10.1.custom.ss（或者你在其下使用的任何等价物）中放了这个：

.ui-menu {
    width: 30em; /* or whatever width you want it to be */
}

和

.ui-menu-item {
    display: inline-block;
    width: 100% /* TAKE THIS OUT! */
}

<强>更新

抱歉..我没有做足够的测试..而是这样做（代码中提供的解释）http://jsfiddle.net/cNgG5/7/

/* this only applies to the first level submenu.. the 30em can be replaced with whatever width 
   you want the menu to appear in */
#menu>.ui-menu-item .ui-menu {
    width: 30em;
}
/* this only applies to the items in the first level submenu.. for them to 
stack up next to each other, we want to override the width: 100% given in 
.ui-menu .ui-menu-item, without affecting the first level menu
(that was the problem with my previous answer) */
#menu>.ui-menu-item .ui-menu .ui-menu-item {
    display: inline-block;  
    width: auto;
}

使用immediate child选择器

技巧。

注意：如果您的最终解决方案有多个级别的子菜单（即菜单 - >子菜单 - >子菜单等）..那么您可以重复上述过程..它只是将上述风格应用到正确的水平。

如何强制jquery ui菜单或类似菜单水平显示第二个子菜单项

2 个答案: