How to make jQuery UI navigation menu horizontal?

Question

I like the jQuery user interface!

I like the navigation menu, but I can't seem horizontal. I have to miss something that forces.

Does anyone know how to change CSS? I tried this, but it is for an older version and does not work, since it is no longer "clear" to keep them on top of each other.

Matching CSS:

.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 { margin: 0; padding: 0; zoom: 1; width: 100%; } .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; } 

Thanks for the help!

Answer 1

You can do it:

 /* 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 2

I admire all this effort to convert menus to menus because I hate trying to crack CSS. It just seems to me that I am interfering in forces that I can never understand! I think it is much easier to add the menu files available in the jquery ui menu bar .

I downloaded the full jquery ui css file from the jquery ui download site

At the beginning of my document, I put the jquery ui css file containing everything (currently I'm on version 1.9.x), followed by a specific CSS file for the menu widget loaded from the jquery ui text branch

 <link type="text/css" href="css/jquery-ui.css" rel="stylesheet" /> <link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" /> 

Do not forget that the folder with the images with all the small icons used by the jQuery user interface must be in the same folder as the jquery-ui.css file.

Then at the end of the body I have:

 <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script> <script type="text/javascript" src="js/menubar/jquery.ui.menubar.js"></script> 

This is a copy of the updated jQuery version, followed by a copy of the jQuery user interface file, then a menu module downloaded from the jquery ui text branch

The CSS text file is updated short:

 .ui-menubar { list-style: none; margin: 0; padding-left: 0; } .ui-menubar-item { float: left; } .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } .ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; } 

but the JavaScript menu file - 328 lines - is too long to quote here. With it, you can simply call menubar (), as in this example:

 $("#menu").menubar({ autoExpand: true, menuIcon: true, buttons: true, select: select }); 

As I said, I admire all attempts to hack into a menu object to turn it into a horizontal bar, but I found that all of them lack the standard function of the horizontal menu bar. I'm not sure why this widget is not yet associated with the jQuery user interface, but apparently there are still some errors to smooth out. For example, I tried it in IE 7 Quirks Mode, and the positioning was weird, but it looks great in Firefox, Safari, and IE 8+.

Answer 3

This post 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 4

Adding the answer to Michalis Bagos. I 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 submenus upright.

I had to remove the icons as it ruined the layout

There is also a problem with the positioning of the submenu.

Answer 5

Just think of the jquery-ui menu as a dropdown list when you hover over a topic in your main menu horizon. So you have a separate jquery ui menu for each theme in the main menu. The horizonal main menu is just a collection of float: left divs wrapped in mainmenu div. Then you hover and hover over each menu.

 $('.mainmenuitem').hover( function(){ $(this).addClass('ui-state-focus'); $(this).addClass('ui-corner-all'); $(this).addClass('ui-state-hover'); $(this).addClass('ui-state-active'); $(this).addClass('mainmenuhighlighted'); // trigger submenu var position=$(this).offset(); posleft=position.left; postop=position.top; submenu=$(this).attr('submenu'); showSubmenu(posleft,postop,submenu); }, function(){ $(this).removeClass('ui-state-focus'); $(this).removeClass('ui-corner-all'); $(this).removeClass('ui-state-hover'); $(this).removeClass('ui-state-active'); $(this).removeClass('mainmenuhighlighted'); // remove submenu $('.submenu').hide(); } ); 

The showSubmenu function is simple - it simply positions the submenu and displays it.

 function showSubmenu(left,top,submenu){ var tPosX=left; var tPosY=top+28; $('#'+submenu).css({left:tPosX, top:tPosY,position:'absolute'}); $('#'+submenu).show(); } 

Then you need to make sure that the submenu is visible while the cursor is on it, and disappears when you leave (this should be in your document.ready function.

 $('.submenu').hover( function(){ $(this).show(); }, function(){ $(this).hide(); } ); 

Also, do not forget to hide your submenus to begin with - in the document.ready function

 $(".submenu" ).hide(); 

See full code here

http://jsfiddle.net/R4nyn/

Answer 6

I am new to stackoverflow, so please be beautiful :) however, referring to the jQuery ui horizontal menu problem, the only way to solve this problem (referring to this ) was to install:

 #nav li {width: auto; clear: none; float: left} #nav ul li {width: auto; clear: none; float:none} 

Answer 7

I only looked for jQuery UI and CSS solution for 3 days, I combined some code that I saw, fixed it a bit, and finally (using other codes), I could make it work!

http://jsfiddle.net/Moatilliatta/97m6ty1a/

 <ul id="nav" class="testnav"> <li><a class="clk" href="#">Item 1</a></li> <li><a class="clk" href="#">Item 2</a></li> <li><a class="clk" href="#">Item 3</a> <ul class="sub-menu"> <li><a href="#">Item 3-1</a> <ul class="sub-menu"> <li><a href="#">Item 3-11</a></li> <li><a href="#">Item 3-12</a> <ul> <li><a href="#">Item 3-111</a></li> <li><a href="#">Item 3-112</a> <ul> <li><a href="#">Item 3-1111</a></li> <li><a href="#">Item 3-1112</a></li> <li><a href="#">Item 3-1113</a> <ul> <li><a href="#">Item 3-11131</a></li> <li><a href="#">Item 3-11132</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 3-113</a></li> </ul> </li> <li><a href="#">Item 3-13</a></li> </ul> </li> <li><a href="#">Item 3-2</a> <ul> <li><a href="#."> Item 3-21 </a></li> <li><a href="#."> Item 3-22 </a></li> <li><a href="#."> Item 3-23 </a></li> </ul> </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 class="clk" href="#">Item 4</a> <ul class="sub-menu"> <li><a href="#">Item 4-1</a> <ul class="sub-menu"> <li><a href="#."> Item 4-11 </a></li> <li><a href="#."> Item 4-12 </a></li> <li><a href="#."> Item 4-13 </a> <ul> <li><a href="#."> Item 4-131 </a></li> <li><a href="#."> Item 4-132 </a></li> <li><a href="#."> Item 4-133 </a></li> </ul> </li> </ul> </li> <li><a href="#">Item 4-2</a></li> <li><a href="#">Item 4-3</a></li> </ul> </li> <li><a class="clk" href="#">Item 5</a></li> </ul> 

Javascript

 $(document).ready(function(){ var menu = "#nav"; var position = {my: "left top", at: "left bottom"}; $(menu).menu({ position: position, blur: function() { $(this).menu("option", "position", position); }, focus: function(e, ui) { if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) { $(this).menu("option", "position", {my: "left top", at: "right top"}); } } }); }); 

CSS

 .ui-menu {width: auto;}.ui-menu:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}.ui-menu .ui-menu-item {display: inline-block;margin: 0;padding: 0;width: auto;}#nav{text-align: center;font-size: 12px;}#nav li {display: inline-block;}#nav li a span.ui-icon-carat-1-e {float:right;position:static;margin-top:2px;width:16px;height:16px;background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px;}#nav li ul li {width: 120px;border-bottom: 1px solid #ccc;}#nav li ul {width: 120px; }.ui-menu .ui-menu-item li a span.ui-icon-carat-1-e {background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important; 

Answer 8

change:

 .ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; } 

at

 .ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: auto; float:left; } 

should start with you.

Answer 9

I know this is an old thread, but I delved into the jQuery UI source code and built on a Rowan answer that was closer to what I was looking for. I only need carrots, because I felt it was important to have a visual indicator of possible submenus. From the look at the source code (both .js and .css) I came up with this, which allows the carrots to be visible, not to mess with the design (height), and also leave the menu vertical under the parent element.

In jquery-ui.js do a search to find $.widget( "ui.menu") and change the postulation 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; } 

The end result will be a horizontal jQuery user interface menu with a submenu displayed reliably below the parent menu item.

Answer 10

The best option I found is a plugin called jMenu .

Home: http://www.myjqueryplugins.com/jquery-plugin/jmenu
Demo: http://demos.myjqueryplugins.com/jmenu/
GitHub: https://github.com/alpixel/jMenu

Screenshot:

Answer 11

To get a horizontal navigation bar with vertical drop-down lists, use a combination of a table and unordered lists.

Level 1 elements are represented by table cells; subsequent levels are represented by unordered lists.

Positioning child menus was a problem. The default value is to display them directly next to, but when on a top-level item that hid subsequent items in the horizontal navigation bar. If they appear below, everything is fine for one drop-down menu, but if there were a second level lower, then this 2nd level would overshadow the rest of the first. The solution is to open the menu below and to the right, see the "Position" parameter in the menu call.

 <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>