jquery - jquery ui 菜单：是否可以使用几个作为 CSS 顶部栏导航的下拉和弹出实例？

Question

初学者。我不确定标题问题的措辞是否正确，但我会尝试解释我在寻找什么。我想创建一个非常基本的顶部栏导航，并为每个选择下拉/飞出使用 jquery ui 菜单。所以我认为这将是非常可能且相对简单的，但我想知道，如果它基于百分比，你将如何将每个菜单实例定位在顶部栏下？我对此很陌生，所以我不确定它是 jquery 还是 css 问题？我非常感谢任何和所有的帮助！

Answer 1

这就是我将如何去做。希望这会有所帮助，如果您需要其他任何东西，请告诉我。

HTML：

<div>
    <ul id="menu">
        <li>
            <a href="#">Nav Item 1</a>
            <ul class="subnav">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>

        <li>
        <a href="#">Nav Item 2</a>
        <ul class="subnav">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
        </li>
    <li>
        <a href="#">Nav Item 3</a>
        <ul class="subnav">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
        </li>
    </ul>
</div>

JAVASCRIPT：

$(document).ready(function(){
    $(".subnav").menu().hide();

    $("#menu>li").each(function(index, el){

        $(el).hover(function(){
            $(this).closest('li')
                .find('ul')
                .show()
                .animate({"opacity":1}, 250);
        },function(){
             $(this).closest('li')
                 .find('ul')
                 .animate({"opacity":0}, 250, function() {
                 $(this).hide();   
                 });
        });
    });
});

​ CSS：

ul{ 
list-style-type:none;
margin:0;
padding-right:1em;
overflow:hidden;
}

#menu>li{ 
    float:left; 
    background-color:whiteSmoke;
    width:30%;
}

.ui-menu{
    width:100%;
} /*100% since its nav item will be relative*/

#menu>li>ul{opacity:0}
​

演示：http: //jsfiddle.net/EQPVf/15/

Answer 2

这是我为 jQuery UI 版本 1.9.1 做的方式。从上到下。

包括：

<script src="jquery/jquery-latest-version.js"></script>
<script src="jquery/ui/jquery-ui.js"></script>
<script src="jquery/external/jquery.bgiframe-2.1.2.js"></script>
<script src="jquery/ui/jquery.ui.core.js"></script>
<script src="jquery/ui/jquery.ui.widget.js"></script>
<script src="jquery/ui/jquery.ui.menu.js"></script>

CSS：

#menu li { display:inline-block; width: auto; }
#menu li.sub { display:block; width: auto;}

jQuery：

// Menu
$(function() {
  $( "#menu" ).menu({
    select: function(event, ui) {
      var num = ui.item.index();
      switch(num) {
    case 0:
      Option1(); // dummy function to handle selection
      break;
    case 1:
      Option1Sub(); // make your own function to handle
          break;
        case 2:
          Option2(); // dummy function to handle selection
          break;
    case 3:
      BlaBla(); // make your own function to handle
      break;
      }
   }
});

HTML：

<ul id="menu" class="ui-menu">
  <li><a href="#" title="Option 1..."><b>Option 1</b></a></li>
    <li class="sub"><a href="#" title="Option 1 sub..."><b>Option 1 sub</b></a></li>
  <li><a href="#" title="Option 2..."><b>Option 2</b></a></li>
  <li><a href="#" title="Bla Bla..."><b>Bla Bla</b></a></li>
</ul>

itsSOezy .com .. jQuery 让它变得简单。