Question

我需要处理网站的移动版本，并且还需要设计支持子菜单的导航菜单。我做了一些事情，但没有做到这一点如何将其转换为一个很好的导航菜单，同时支持子菜单。

或者我们能够支持子菜单的最佳Nav是什么。

我正在使用以下最新库

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script> 

<div data-role="page" id="pageone">
    <div data-role="header">
         <h1>Welcome To My Homepage</h1>

        <div data-role="collapsible-set">
            <ul>
                <li><a href="#" data-icon="home">Home</a>
                </li>
                <li><a href="#" data-icon="arrow-r">Page Two</a>
                </li>
                <ul>
                    <li><a href="#" data-icon="arrow-r">Sub Page Page Two</a></li>
                    <li><a href="#" data-icon="search">Sub Page b </a></li>
                </ul>
                <li><a href="#" data-icon="search">Search</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content">
        <p>My Content..</p>
    </div>
    <div data-role="footer">
         <h1>My Footer</h1>

    </div>
</div>

Answer 1

您可以尝试嵌套的可折叠集，因为用户可以选择他们想要的菜单项而无需重定向到另一个页面。所以在第二页子页面隐藏在可折叠内。我不建议嵌套列表视图，因为当您单击最顶层的菜单项时它会重定向。然后用户需要点击后退按钮或其他东西。但是使用嵌套的收藏品可以节省空间。并且用户可以节省时间而无需返回以查看子菜单是什么。

这里有一个可折叠的例子。

http://demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/listviews/

jQuery Mobile可折叠菜单

1 个答案: