面板和经典水平布局之间的切换菜单

Question

我想让我的站点菜单切换到面板和经典的水平menu.My之间，目标是根据屏幕大小(桌面/移动)更改站点菜单.但这是另一个故事！

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

<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移动在标题和内容之后移动#pnl面板，这使我无法简单地应用：

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

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

所以我问你。我的解决方案是最好的吗？是否有一个纯css解决方案？

非常感谢。

Answer 1

你说得对。有一种方法可以通过转换CSS来实现这一点。我包括了一个Fiddle来向您展示，但它是由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