css - 在面板和经典水平布局之间切换菜单

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

你说得对。有一种方法可以使用 transition 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