jQuery Mobile: Popup nested menu

This entry is part 60 of 73 in the series jQuery Mobile

A nested menu can be created by placing listviews into an accordion inside a popup.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Nested Menu App</h1>
    </div>

    <div data-role='content'>
        <a href='#popupNested' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b' data-transition='pop'>Choose a creature...</a>
        <div data-role='popup' id='popupNested' data-theme='none'>
            <div data-role='collapsibleset' data-theme='b' data-content-theme='a' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' style='margin:0; width:250px;'>
                <div data-role='collapsible' data-inset='false'>
                    <h2>Farm animals</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Chicken</a></li>
                        <li><a href='#' data-rel='dialog'>Cow</a></li>
                        <li><a href='#' data-rel='dialog'>Duck</a></li>
                        <li><a href='#' data-rel='dialog'>Sheep</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role='collapsible' data-inset='false'>
                    <h2>Pets</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Cat</a></li>
                        <li><a href='#' data-rel='dialog'>Dog</a></li>
                        <li><a href='#' data-rel='dialog'>Iguana</a></li>
                        <li><a href='#' data-rel='dialog'>Mouse</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role='collapsible' data-inset='false'>
                    <h2>Ocean Creatures</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Fish</a></li>
                        <li><a href='#' data-rel='dialog'>Octopus</a></li>
                        <li><a href='#' data-rel='dialog'>Shark</a></li>
                        <li><a href='#' data-rel='dialog'>Starfish</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role='collapsible' data-inset='false'>
                    <h2>Wild Animals</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Lion</a></li>
                        <li><a href='#' data-rel='dialog'>Monkey</a></li>
                        <li><a href='#' data-rel='dialog'>Tiger</a></li>
                        <li><a href='#' data-rel='dialog'>Zebra</a></li>
                    </ul>
                </div><!-- /collapsible -->
            </div><!-- /collapsible set -->
        </div><!-- /popup -->
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code
Series Navigation<< jQuery Mobile: A popup menu
jQuery Mobile: Popup dialog >>

Leave a comment

Leave a Reply