Как заставить JQuery UI меню или аналогичный, чтобы показывать элементы второго подменю по горизонтали

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

В 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 и т. д.).. тогда вы можете просто повторить вышеописанный процесс.. это просто вопрос применения указанных стилей к нужным уровням.

Answer 2

Вы можете использовать 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;
}