Question

我想要的是让我的网站菜单在面板和经典水平菜单之间切换。我的目标是根据屏幕尺寸（桌面/移动设备）更改网站菜单......但这是另一个故事！

我有以下工作解决方案（http://jsfiddle.net/998HD/2/）：

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Title</h1>
        <a href="#0" id="lnkpnl">Panel</a>
    </div>
    <div id="pnl" data-role="panel" data-display="overlay">
        <ul data-role="listview">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </div>
    <div data-role="content">Lorem ipsum</div>
</div>

CSS

.menu.ui-panel {
    position: relative;
    width: 100%;
    min-height: 0
}
.menu.ui-panel .ui-li {
    display: inline-block;
    margin: 0;
    border: 0
}

JS

$('#lnkpnl').click(function() {
    var menu = 1; // 0 = panel, 1 = horizontal
    if (menu) $('#pnl').addClass('menu').insertAfter('.ui-header');
    $('#pnl').panel('open')    
})

JQuery Mobile在标题和内容之后移动了#pnl面板，这使我无法简单地应用：

.menu.ui-panel {
    position: static
    /*... other props ...*/
}

并避免使用javascript代码中的第1行和第2行。

所以，我问你。我的解决方案是最好的吗？有没有纯粹的CSS解决方案？

非常感谢。

Answer 1

你是对的。有一种方法可以使用转换CSS来完成此操作。我包括一个小提琴给你看，但它是jquery辅助。再说一遍，这是一个非常轻松的JS调用，因此它不应该对您的应用程序进行调整。然后，你也不是。无论哪种方式你都很好。

-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;

希望它有所帮助 FIDDLE

在Panel和经典水平布局之间切换菜单

1 个答案: