0

初心者。タイトルの質問の表現が正しいかどうかはわかりませんが、探しているものを説明しようと思います。非常に基本的なトップ バー ナビゲーションを作成し、各選択ドロップダウン/フライアウトに jquery ui メニューを使用したいと思います。したがって、これは非常に可能であり、比較的簡単に実行できると思いますが、パーセンテージに基づいている場合、各メニューインスタンスをトップバーの下に配置するにはどうすればよいでしょうか? 私はこれに慣れていないので、それがjqueryなのかcssなのかよくわかりません。すべての助けに感謝します！

4

2 に答える 2

3

これが私がそれについて行く方法です。これがお役に立てば幸いです。他に何か必要な場合はお知らせください。

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>

ジャバスクリプト:

$(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/

于 2012-11-12T05:21:30.410 に答える
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 を使えば簡単です。

于 2012-11-30T16:32:47.850 に答える