How to make jQuery UI nav menu horizontal?

Question

I love the jQuery UI stuff!

I like the navigation menu, but I can\'t seem to get it horizontal. I\'ve got to be missing something that\'s a cinch.

Anyone kno

Answer 1

To get a horizontal nav bar with vertical dropdowns, use a combination of a table and unordered lists.

The level 1 items are represented by table cells, subsequent levels are represented by unordered lists.

The positioning of the child menus was a problem. The default is to have them appear directly alongside, but when on a top level item, that was obscuring the subsequent items in the horizontal nav bar. Having them appear below was ok for a single dropdown menu, but if there was a second level beneath, then that 2nd level would obscure the rest of the first. The solution is to have the menu open below and somewhat to the right, see the "position" option in the menu invocation.

<style type="text/css">
  #trJMenu td { white-space: nowrap; width: auto; }
  #trJMenu li { white-space: nowrap; width: auto; }
</style>


<script language="javascript" type="text/javascript">
  $(document).ready(function(){
    $("#trJMenu").menu( { position: { my: "left top", at: "center bottom" } } );          
  });
</script>


<table>
  <tr id='trJMenu'>
    <td>
      <a href='#'>Timesheets</a>
      <ul>
        <li><a href='#'>Labour</a></li>
        <li><a href='#'>Chargeout Report</a></li>
      </ul>
    </td>
    <td>
      <a href='#'>Activity Management</a>
      <ul>
        <li><a href='#'>Activities</a></li>
        <li><a href='#'>Proposals</a></li>
      </ul>
    </td>
  </tr>
</table>

Answer 2

This post has inspired me to try the jQuery ui menu.

http://jsfiddle.net/7Bvap/

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>


.ui-menu { 
    overflow: hidden;
}
.ui-menu .ui-menu {
    overflow: visible !important;
}
.ui-menu > li { 
    float: left;
    display: block;
    width: auto !important;
}
.ui-menu ul li {
    display:block;
    float:none;
}
.ui-menu ul li ul {
    left:120px !important;
    width:100%;
}
.ui-menu ul li ul li {
    width:auto;
}
.ui-menu ul li ul li a {
    float:left;
}
.ui-menu > li {
    margin: 5px 5px !important;
    padding: 0 0 !important;
}
.ui-menu > li > a { 
    float: left;
    display: block;
    clear: both;
    overflow: hidden;
}
.ui-menu .ui-menu-icon { 
    margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li { 
    float: left;
    display: block;
}


$( "#nav" ).menu({position: {at: "left bottom"}});

http://jsfiddle.net/vapD7/

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }

.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-state-disabled a { cursor: default; }
.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

$( "#nav" ).menu({position: {at: "left bottom"}});

Answer 3

Adding on to Mihalis Bagos answer. I have ended up doing the following:

<style>
.ui-menu{
   z-index: 1000;
}

#menubar-layout-container > .ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#menubar-layout-container > .ui-menu > .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}

.ui-menu .ui-menu-icon{
   display: none;
}
</style>

This makes the top level menu horizontal but leaves any sub menus vertical.

I had to remove the icons as this was messing up the layout

There also seems to be a problem with the sub menu positioning.

Answer 4

You can do this:

/* Clearfix for the menu */
.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

and also set:

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

Answer 5

I know this is an old thread but I was digging into the jQuery UI source code and built upon Rowan's answer which was closer to what I had been looking for. Only I needed the carrots as I felt it was important to have a visual indicator of possible submenus. From looking at the source code (both .js and .css) I came up with this that allows the carrot be visiable without messing with design (height) and also alowing menu to appear vertical below the parent item.

In the jquery-ui.js do a search to find $.widget( "ui.menu") and change postition to:

position: {
my: "center top",
at: "center bottom"
}

And in your css add:

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

#nav > .ui-menu > .ui-menu-item {
    display: inline-block;
    float: left;

    margin: 0;
    padding: 3px;

    width: auto;
}

.ui-menu .ui-menu-item a {
    padding: 0;
}

.ui-menu .ui-menu-icon{
    position: relative;
    left: 1px;
    top: 6px;
}

End Result will be a jQuery UI Menu horizontal with sub menus being displayed veriticaly below the parent menu item.