0

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

子类别必须水平显示：

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

我尝试了 jquery ui menu menu 小部件来实现这一点。子类别垂直显示。如何更改它以使子类别水平显示？

可以为此修补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>

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

4

2 回答 2

1

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

好的，我在这里尽可能简单地为您的组水平菜单提供现场演示。您应该为每个组包含 1 li，并为每个实时输入 div，并且仅借助 css 就可以做您想做的事情。

jQuery UI 水平分组菜单

<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;
}
于 2013-03-02T21:19:44.477 回答
1

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

技巧：使用直接子选择器。

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

于 2013-03-03T07:29:43.697 回答