How to force jquery ui menu or similar to show second submenu items horizontally

Question

Menu has 3 levels. First level has only single item called "Show all". Second level contains product categories. Third level contains subcategories. There are no more menu levels.

Subcategories must displayed horizontally:

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

I tried jquery ui menu menu widget to implement this. Subcategory is displayed vertically. How to change this so that subcategories are displayed horizontally?

Can jquery ui patched for this or is there some other control which allows this. Submenus must opened on mouse hover. jquery-ui menu allows to open using mouse hover but I havent found a way to render third level horizontally.

Data is read from database at runtime. jquery, jquery ui, ASP.NET/Mono MVC2 are used

Update

Demo is at 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>

Move cursor to Category and single column menu appears. How to render it to multiple columns ?

MIIB · Answer 1 · 2013-03-03T08:44:31.817

1

You could use CSS. For example give all your subcategories a class and set float:left. Ofcourse i need more information to help you better. If you could upload your code in jsfiddle it would be better.

Okay i deliver here as simple as i can a live demo for your group horizontal menu. You should contain 1 li for each group and enter div for each real time, and with the help of only css you can do what you want.

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>

And the css would be like this:

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

edited Mar 03 '13 at 08:44

answered Mar 02 '13 at 21:19

MIIB

1,849
10
21

Thnak you. I created sample in http://jsfiddle.net/cNgG5/ . If mouse is hover category, sumbemu must appear horizontally in multiple columns but it appear vertically in single column. How to fix this ? – Andrus Mar 02 '13 at 21:45
Thank you. If submenu text is wider, columns will overlap as shown in http://jsfiddle.net/c7DUb/1/ . Changing 100px is style to wider removes multiple columns at all. How to fix this ? How to render submenu to 3 or 4 columns? – Andrus Mar 03 '13 at 08:22
You know the numbers where an example. You should do it on your site and check what to do. I ask this question from you and the question is if one of the menu items has more than 2000 characters, what we can do? There's no way. So simply you should use short titles for your menu and put it on your site. Because it could not be general. You can set your width to 1000px and each li to 250 px so you can have subcategories. – MIIB Mar 03 '13 at 08:32
1

You could take a look at this: http://jsfiddle.net/c7DUb/2/. The last solution to use is word-wrap: break-word; But i recommend that you use short text for your items – MIIB Mar 03 '13 at 08:43

abbood · Accepted Answer · 2013-03-03T10:53:05.127

in jquery-ui-1.10.1.custom.ss (or whatever equivalent you're using under it) put this:

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

and

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

update:

sorry.. i didn't do enough testing.. do this instead (explanation provided within code) 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;
}

trick: using immediate child selectors.

note: if your final solution has more than one level of submenu (ie menue->submenu->submenu etc).. then you can just repeat the above process.. it's just a matter of applying the above styles to the right levels.

Thank you. I tried modified version of this in http://jsfiddle.net/cNgG5/2/ This causes also first menu level, C3, C4 to appear in same level. How to fix this so that first does not change, only subcategories are at multiple columns? — Andrus, Mar 03 '13 at 07:44

How to force jquery ui menu or similar to show second submenu items horizontally

2 Answers2