accordion menu with nested flyouts

StackOverflow https://stackoverflow.com/questions/14649428

  •  06-03-2022
  •  | 
  •  

Question

I'm trying to figure out how to integrate an accordion type of menu and a flyout menu together. Ideally, I'd like to have a vertical menu showing manufacturers that, when clicked, acts as an accordion to show Product Series for that manufacturer. When an individual Product Series is clicked, a flyout menu pops out to the side to show individual products in that series.

Has anyone seen any existing code like this or better yet, can anyone show me how to achieve this effect? Thanks in advance.

<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...
Was it helpful?

Solution

This should be easy with JqueryUI.

Use an Accordion with a Menu inside.

Link to 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>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top