JQuery UI: Horizontal Menu

Question

I wonder how to change the layout of a JQuery UI menu from vertical to horizontal.

I have tried this but it only worked for main links on the menu bar but not the ones on the submenu.

I mean the items under 'Delphi' kept on displaying horizontally instead of dropping down vertically as these are sub items of Delphi:

<style>   
    .ui-menu:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    } 

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

                <nav>
                    <ul id="ui-menu" class="ui-menu">
                        <li><a href="#">Link one</a></li>
                        <li><a href="#">Link two</a></li>
                        <li><a href="#">Link three</a></li>
                        <li><a href="#">Link four</a></li>
                        <li>
                            <a href="#">Delphi</a>
                            <ul>
                                <li><a href="#">Ada</a></li>
                                <li><a href="#">Saarland</a></li>
                                <li><a href="#">Salzburg</a></li>
                            </ul>
                        </li>

                    </ul>
                </nav>


    $(function () {
        $("#ui-menu").menu();
    });

Edit

This is a screenshot of what I have achieved so far, and what still needs to be done:

enter image description here

Please let me know what I'm doing wrong.

Many thanks.

CRABOLO · Answer 1 · 2014-02-08T23:27:47.743

0

Working Example http://jsfiddle.net/5a75Z/1/

.ui-menu li {
    float: left;
    padding: 0 6px;
    list-style: none;
}

I removed all your css styles, and then just added the 3 styles above, and it works horizontally now with just the float: left, and I just added the padding and list style just because.

EDIT:

and then to get the submenu to display vertically just add this

ul ul {
    width: 100px;
    position: relative;
    left: -50px;
}

http://jsfiddle.net/5a75Z/2/

Adjust accordingly

EDIT:

Horizontally is like this __ __ __
Vertically is like this
|
|
|

Working Example for vertically http://jsfiddle.net/5a75Z/3/

ul ul { 
    position: relative;
    width: 300px;
    padding-left: 50px;
}

li { list-style: none; }

ul ul li {
    float: left;
    padding: 0 5px;
    list-style: none;
    position: relative;
    top: -20px;
}

edited Feb 08 '14 at 23:27

answered Feb 08 '14 at 23:06

CRABOLO

8,605
39
41
68

this turned everything vertical again. What I'm after is a horizontal menu bar, with one item on the horizontal menu bar (Delphi) displaying its items of: (Ada, Saarland and Salzburg) vertically. Any other ideas please? – t_plusplus Feb 08 '14 at 23:14
thanks for all your help, I have edited the question and added a screenshot of how I'd like to be displayed. It kinda half-works; EXCEPT that when hoovering Delphi, its items display horizontally (next to each other), rather than vertically (on top of each other). Delphi should generate a dropdown list and non of the above worked so far. Thanks. – t_plusplus Feb 08 '14 at 23:37

score -1 · Accepted Answer · answered Feb 09 '14 at 12:27

-1

I've found this CSS NAV Generator which would solve the problem (kind of ..):

http://cssmenumaker.com/builder/1444006

answered Feb 09 '14 at 12:27

t_plusplus

4,079
5
45
60

JQuery UI: Horizontal Menu

2 Answers2