如何使jQuery UI导航菜单水平？

Question

我喜欢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; } 

感谢您的帮助！

Answer 1

你可以这样做：

/* 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; 
} 

Answer 2

改变：

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

应该启动你。

Answer 3

我是新来的StackOverflow，所以请好:) 但是转向水平jQuery UI的菜单，我可以想办法解决（指的this）问题的唯一途径的问题是设置：

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

Answer 4

添加到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> 

这使得顶层菜单水平，但保留了所有的子菜单垂直。

，我不得不删除的图标，因为这是搞乱布局

也似乎有与子菜单中的定位问题。

Answer 5

我知道这是一个古老的线程，但我正在深入研究jQuery UI源代码并建立在Rowan的答案上，其中 更接近我一直在寻找的。只有我需要胡萝卜，因为我觉得有一个可能的子菜单的视觉指示器 很重要。通过查看源代码（包括.js和.css），我想到了这一点，可以让胡萝卜变得可见而不会妨碍设计（高度），并且还会让菜单在父项下面垂直显示。

在jQuery的ui.js做搜索，找到$.widget("ui.menu")和更改postition到：

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。

Answer 6

我很欣赏所有这些将菜单转换为菜单栏的努力，因为我讨厌尝试破解CSS。它只是感觉我正在插手我无法理解的力量！我认为在menubar branch of jquery ui上添加菜单栏文件要容易得多。

我下载捆绑文件的完整的jQuery UI CSS从jquery ui download site

在我的文档的头，我把它包含的一切（我在版本1.9.x的的时刻），随后的jQuery UI的CSS文件通过从menubar branch of jquery ui

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

下载的菜单栏小工具不要忘了图像与jQuery的用户界面使用的所有的小图标文件夹中的特定CSS文件需要在同一文件夹中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的文件的副本，然后将菜单栏模块从下载在menubar branch of 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 
}); 

正如我所说的，我很佩服所有破解菜单对象把它变成一个单杠的尝试，但我发现他们都缺乏水平菜单栏的一些标准功能。我不确定为什么这个小部件没有与jQuery UI捆绑在一起，但大概仍然存在一些问题。例如，我在IE 7 Quirks Mode中试过，定位很奇怪，但在Firefox，Safari和IE 8+中看起来很棒。

Answer 7

要获得带有垂直下拉的水平导航栏，请使用表格和无序列表的组合。

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

Answer 8

这篇文章激励我尝试jQuery ui菜单。

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 9

试想想，作为是verticle下拉菜单，当你将鼠标悬停在某个主题的主卧式菜单上的jQuery的UI菜单。这样，你的主菜单上的每个主题都有一个单独的jQuery UI菜单。水平主菜单仅仅是一个float：左侧divs包裹在mainmenu div中的集合。然后，您可以使用悬停并悬停弹出每个菜单。

$('.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(); 
    } 
    ); 

showSubmenu功能很简单 - 它只是放置子菜单并显示它。

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(); 

看到完整的代码在这里

http://jsfiddle.net/R4nyn/

Answer 10

我发现的最佳选择是一个名为jMenu的插件。

主营：http://www.myjqueryplugins.com/jquery-plugin/jmenu
演示：
GitHub上：https://github.com/alpixel/jMenu

截图：

Answer 11

我刚刚3天找一个jQuery UI和CSS的解决方案，我合并一些代码，我看到了，修正了一点，最后（沿着其他代码）我可以使它工作！

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;