App Nested Menu

by jQuery Mobile 1.4.5

by Andy Wang

HTML

<div>
    <ul data-role="listview" id="panel_Menu" data-inset="false" data-theme="a">
        <li data-icon="arrow-r"><a name="panel_Menu_Link" href="#" data-ajax="false">Layer-I</a>
        </li>
        <li data-role="collapsible" data-icon="arrow-r" data-corners="false">
            	<h2>Layer-I Nasted</h2>

            <ul data-role="listview" data-inset="false" data-theme="a">
                <li data-icon="arrow-r"><a class="nested_Menu" name="panel_Menu_Link" href="#" data-ajax="false">Layer-II A</a>
                </li>
                <li data-icon="arrow-r"><a class="nested_Menu" name="panel_Menu_Link" href="#" data-ajax="false">Layer-II B</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

/*巢狀選單相關CSS設定*/
.nested_Menu{	background:URL(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHUlEQVQYlWNgQANnzpz5jy6GAQajImLBYHQ7NkUAHvgh30NkSN0AAAAASUVORK5CYII=) repeat;
}
			
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
	margin: 0;
}
.ui-li-static.ui-collapsible {
	padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
	border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
	border-bottom-width: 0;
}
/*巢狀選單內的Icon顏色*/
#panel_Menu [name='panel_Menu_Link']:after {
	background-color: #0ABAB5 ; /*Tiffany Blue*/
}