-2

アコーディオンタイプのメニューとフライアウトメニューを統合する方法を見つけようとしています。理想的には、クリックするとそのメーカーの製品シリーズを表示するためのアコーディオンとして機能するメーカーを示す垂直メニューが必要です。個々の製品シリーズをクリックすると、フライアウトメニューが横にポップアップ表示され、そのシリーズの個々の製品が表示されます。

誰かがこのようなまたはより良い既存のコードを見たことがありますか、誰かがこの効果を達成する方法を教えてもらえますか？前もって感謝します。

<ul>
  <li>Manufacturer 1 (drops product lines in accordion)
    <ul>
      <li>Product Line 1
        <ul>
          <li>Product 1</li> (flyout menu for products)
          <li>Product 2</li>
         </ul>
       </li>
       <li>Product Line 2
         <ul>
           <li>Product 1</li>
           <li>Product 2</li>
         </ul>
       </li>
     </ul>
   </li>
   <li>Manufacturer 2
   etc...
4

1 に答える 1

0

これは JqueryUI を使えば簡単です。

中にメニューがあるアコーディオンを使用します。

JSFiddle へのリンク

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet"
    href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function() {
            $("#menu").menu();
            $("#accordion").accordion();
        });
    </script>
</head>

<body>
    <div id="accordion">
         <h3>Section 1</h3>

        <div>
            <ul id="menu">
                <li class="ui-state-disabled"><a href="#">Aberdeen</a>

                </li>
                <li><a href="#">Ada</a>

                </li>
                <li><a href="#">Adamsville</a>

                </li>
                <li><a href="#">Addyston</a>

                </li>
                <li> <a href="#">Delphi</a>

                    <ul>
                        <li class="ui-state-disabled"><a href="#">Ada</a>

                        </li>
                        <li><a href="#">Saarland</a>

                        </li>
                        <li><a href="#">Salzburg</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">Saarland</a>

                </li>
                <li> <a href="#">Salzburg</a>

                    <ul>
                        <li> <a href="#">Delphi</a>

                            <ul>
                                <li><a href="#">Ada</a>

                                </li>
                                <li><a href="#">Saarland</a>

                                </li>
                                <li><a href="#">Salzburg</a>

                                </li>
                            </ul>
                        </li>
                        <li> <a href="#">Delphi</a>

                            <ul>
                                <li><a href="#">Ada</a>

                                </li>
                                <li><a href="#">Saarland</a>

                                </li>
                                <li><a href="#">Salzburg</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Perch</a>

                        </li>
                    </ul>
                </li>
                <li class="ui-state-disabled"><a href="#">Amesville</a>

                </li>
            </ul>
        </div>
         <h3>Section 2</h3>

        <div>
            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
                faucibus urna.</p>
        </div>
    </div>
</body>

于 2013-02-01T15:32:07.217 に答える