如何使jQuery UI导航菜单水平？
我喜欢jQuery UI的东西！
我喜欢导航菜单，但我似乎无法得到它的水平。 我不得不错过一些简单的事情。
任何人都知道如何改变CSS？ 我试过这个，但它是一个较旧的版本，不起作用，因为不再有“清除”，以保持彼此顶部。
相关的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; } 谢谢您的帮助！
你可以这样做：
/* Clearfix for the menu */ .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; }
我很佩服所有这些将菜单转换成菜单栏的努力，因为我讨厌尝试破解CSS。 只是觉得我正在干涉我无法理解的力量！ 我认为在jquery ui的菜单栏中添加菜单栏文件要容易得多。
我从jquery ui下载站点下载了完整的jquery ui css捆绑文件
在我的文档的头部，我把jquery ui css文件包含了所有东西（我目前在1.9.x版本中），接着是从jquery ui的菜单栏分支下载的菜单栏小部件的特定CSS文件
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" /> <link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" />
不要忘了带有jQuery UI使用的所有小图标的images文件夹需要和jquery-ui.css文件在同一个文件夹中。
然后在最后的身体我有：
<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>
这是一个最新版本的jQuery的副本，其次是jQuery UI文件的副本，然后从jquery ui的菜单栏分支下载菜单栏模块
菜单栏CSS文件非常简短：
.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; }
但菜单栏的JavaScript文件是328行 – 太长，在这里引用。 有了它，你可以简单地调用菜单栏（），就像这个例子：
$("#menu").menubar({ autoExpand: true, menuIcon: true, buttons: true, select: select });
正如我所说，我很佩服所有试图将菜单对象变成水平条的尝试，但是我发现它们都缺乏水平菜单条的一些标准function。 我不知道为什么这个小部件还没有与jQuery UI捆绑在一起，但大概还是有一些问题需要解决。 例如，我在IE 7 Quirks Mode中试过，定位很奇怪，但是在Firefox，Safari和IE 8+中看起来不错。
这篇文章激发了我尝试jQuery ui菜单。
<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"}});
<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"}});
添加到Mihalis Bagos的答案。 我已经完成了以下工作：
<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>
这使得顶级菜单水平，但是使任何子菜单保持垂直。
我不得不删除图标，因为这是搞乱布局
子菜单定位似乎也有问题。
把鼠标hover在主菜单上的主题上，只要想一想jquery-ui菜单就是垂直下拉菜单。 这样，你有一个单独的jQuery UI菜单上的每个主题的主题。 水平主菜单只是浮动的一个集合：左侧divs包裹在mainmenu div中。 然后，您可以使用鼠标hover，并popup每个菜单。
$('.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(); } );
showSubmenufunction很简单 – 只是放置子菜单并显示它。
function showSubmenu(left,top,submenu){ var tPosX=left; var tPosY=top+28; $('#'+submenu).css({left:tPosX, top:tPosY,position:'absolute'}); $('#'+submenu).show(); }
然后，您需要确保子菜单在光标处于可见状态时可见，并在离开时消失（这应该在您的document.ready函数中）。
$('.submenu').hover( function(){ $(this).show(); }, function(){ $(this).hide(); } );
另外，不要忘记隐藏你的子菜单 – 在document.ready函数中
$(".submenu" ).hide();
在这里看到完整的代码
我是新来的stackoverflow，所以请好:)然而转向水平的jQuery ui菜单的问题，唯一的办法，我可以设法解决这个问题（指这个 ）是设置：
#nav li {width: auto; clear: none; float: left} #nav ul li {width: auto; clear: none; float:none}
我只用了3天的时间寻找一个jQuery UI和CSS解决scheme，我合并了一些我看到的代码，修正了一点，最后（沿着其他代码）我可以使它工作！
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(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(files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;
我知道这是一个古老的线程，但我正在深入jQuery UI源代码，build立在罗恩的答案，这更接近我一直在寻找。 只有我需要胡萝卜，因为我觉得重要的是有一个可能的子菜单的视觉指标。 从源代码（包括.js和.css）我想出了这个，使胡萝卜可见而不妨碍devise（高度），也让菜单垂直显示在父项下面。
在jquery-ui.js做一个searchfind$.widget( "ui.menu")并将$.widget( "ui.menu")更改为：
position: { my: "center top", at: "center bottom" }
并在您的CSS添加：
#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; }
最终结果将是一个水平的jQuery UI菜单，子菜单在父菜单项下显示veriticaly。
变化：
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
至：
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: auto; float:left; }
应该开始你。
我find的最好的select是一个名为jMenu的插件。
主要： http : //www.myjqueryplugins.com/jquery-plugin/jmenu
演示： http ： //demos.myjqueryplugins.com/jmenu/
GitHub： https ： //github.com/alpixel/jMenu
截图： 
要获得具有垂直下拉菜单的水平导航栏，请使用表格和无序列表的组合。
级别1项目由表格单元格表示，后续级别由无序列表表示。
儿童菜单的定位是一个问题。 默认情况下，让它们直接显示在一起，但是当位于顶级项目上时，会隐藏水平导航栏中的后续项目。 让他们出现在下面的单个下拉菜单是可以的，但是如果下面有第二层，那么第二层就会掩盖第一层的其余部分。 解决办法是让菜单在下面打开，稍微向右，请参阅菜单调用中的“位置”选项。
<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>
