5

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdownを見つけました。自分のサイトに実装したいのですが、率直に言って方法がわかりません。

ドキュメントを読んだところ、次のようになっています。

しかし、私は何をすべきかわかりません。

このjQueryコードはタグ内のindex.htmlページに配置する必要がありますか?<script>

さらに、次のように使用する必要があることがわかりました。

$("#menu").menuAim({
    activate: $.noop,  // fired on row activation
    deactivate: $.noop,  // fired on row deactivation
});

しかし、どのクラスを使用する必要があるかをどのように知ることができますか?

私のメニューコードは次のとおりです。

 <h3 class="demo-panel-title">Menu</h3>
  <div class="row demo-row">
    <div class="span9">
      <div class="navbar navbar-inverse">
        <div class="navbar-inner">
          <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="nav-collapse collapse">
              <ul class="nav">
                <li>
                  <a href="#">
                    Menu Item
                    <span class="navbar-unread">1</span>
                  </a>
                </li>
                <li class="active">
                  <a href="#">
                    Messages
                    <span class="navbar-unread">1</span>
                  </a>
                  <ul>
                    <li><a href="#">Element One</a></li>
                    <li>
                      <a href="#">Sub menu</a>
                      <ul>
                        <li><a href="#">Element One</a></li>
                        <li><a href="#">Element Two</a></li>
                        <li><a href="#">Element Three</a></li>
                      </ul> <!-- /Sub menu -->
                    </li>
                    <li><a href="#">Element Three</a></li>
                    <li>
                      <a href="#">Sub menu</a>
                      <ul>
                        <li><a href="#">Element One</a></li>
                        <li><a href="#">Element Two</a></li>
                        <li><a href="#">Element Three</a></li>
                        <li><a href="#">Element One</a></li>
                        <li><a href="#">Element Two</a></li>
                        <li><a href="#">Element Three</a></li>
                      </ul> <!-- /Sub menu -->
                    </li>

                  </ul> <!-- /Sub menu -->
                </li>
                <li>
                  <a href="#">
                    About Us
                    <span class="navbar-unread">1</span>
                  </a>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>
4

3 に答える 3

8

これは、マークアップがネストされているときにマークアップを機能させることができなかったため、まとめた単なるデモ コードです。サブナビのアイテムを別のボックスに入れなければなりませんでした。

http://codepen.io/mikevoermans/pen/EtKxp

HTML

<ul id="main_nav">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>


        <div id="flyouts">

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                <li><a href="#">Sub Item 5</a></li>
                <li><a href="#">Sub Item 6</a></li>
                <li><a href="#">Sub Item 7</a></li>
                <li><a href="#">Sub Item 8</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                <li><a href="#">Sub Item 5</a></li>
                <li><a href="#">Sub Item 6</a></li>
                <li><a href="#">Sub Item 7</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
            </ul>

        </div>
        <!-- /#flyouts -->

JS

$("#main_nav").menuAim({
    activate: function(a){
        var idx = $(a).index();
        $('#flyouts ul').eq(idx).show();
    },  // fired on row activation
    deactivate: function(a){
        var idx = $(a).index();
        $('#flyouts ul').eq(idx).hide();

    }  // fired on row deactivation
});
于 2013-03-07T17:58:16.207 に答える
5

これは、mikevoermans が投稿したものよりもクリーンでセマンティックです (問題はありません)。

ネストを維持でき、余分な var を作成する必要はありません。さらに、アイテムの 1 つにサブナビゲーションがない場合はどうでしょうか。

それに応じてすべてを指定するだけです。Natgeo サイトで動作するようになりましたが、まだ公開されていないため、リンクできません。

HTML:

<nav id="main-nav">
<ul>
    <li class="parentnav">
        <a>Parent</a>
        <ul class="subnav">
            <li><a href="" title="">child</a></li>
            <li><a href="" title="">child</a></li>
        </ul>
    </li>
    </li>
        <a>Parent</a>
    </li>
    <li class="parentnav">
        <a>Parent</a>
        <ul class="subnav">
            <li><a href="" title="">child</a></li>
            <li><a href="" title="">child</a></li>
        </ul>
    </li>
</ul></nav>

JS:

$("#main-nav").menuAim({
    rowSelector: "li.parentnav",
    submenuDirection: "below",
    tolerance: 0,
    activate: function(a){
        $(a).children('.subnav').show();
    },
    deactivate: function(a){
        $(a).children('.subnav').hide();
    }
});

// 方向は、左、右、上、下のいずれかです。

// 寛容度が高い = 寛容度が低い..それは後ろ向きであり、先行ミスですが、それだけです 0 は寛容度が高いことを意味するため、少ないほど多くなります :/

于 2013-06-18T22:56:12.030 に答える
0

CSSメニューが現在どのクラスで機能しているかはわかりませんが、これを機能させるには、空のjQuery関数 $.noop をクラスで機能する関数に置き換えるだけです。次の行に沿った何かが機能するはずです（navクラスを使用）：

$(".nav").menuAim({
    activate: function(a){$(a).addClass("submenu-visible")},  
    deactivate: function(a){$(a).removeClass("submenu-visible")},  
});
于 2013-03-07T09:35:36.507 に答える