Question

我之前曾询问过如何开发iOS based side-swipe menu。现在，sidewipe菜单已成为标准用户界面组件，它们开始转移到移动Web。 Medium是我见过的第一个在移动网络上成功提取此类菜单的方法之一（如下图所示）。我的问题是：在网络上实现这样的事情的最有效方法是什么？

enter image description here

Answer 1

我不想成为那个人只是放弃一个链接，但这里有关于这个话题的非常好的写作：http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

它涵盖了一个带动画的基于网络的菜单，它涵盖了平滑动画菜单的最佳实践。这篇文章非常详细，很难总结其内容。希望它会有所帮助。

Answer 2

如果您不反对jQuery Mobile，这可能非常简单：

http://view.jquerymobile.com/1.3.0/docs/examples/panels/panel-swipe-open.php

Answer 3

以下是我接近它的方法（当然这只是动画的一个例子，我已经遗漏了其他一切）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body, html {margin:0;padding:0;}
#iphone {width:320px; height:480px; overflow:hidden; border:solid black thin; display:block;}
#menu {position:fixed; top:1;left:-250px; width:250px; height:480px; display:block; background-color:#868686;}
#content {position:absolute; width:320px; background-color:#cccccc; display:block;}
</style>
</head>

<body>
<div id="iphone">
<div id="menu">I am a menu <button onclick="hideMenu();">close</button></div>
<div id="content">I am the site content, click this <button onclick="showMenu();">menu</button></div>
</div>
</body>
<script>
var m=document.getElementById('menu');
var c=document.getElementById('content');
function showMenu(){
    if(m.offsetLeft<0){
        m.style.left=(m.offsetLeft+10)+'px';
        c.style.left=(c.offsetLeft+10)+'px';
        setTimeout(showMenu,16)
    }

}
function hideMenu(){
    if(m.offsetLeft>-250){
        m.style.left=(m.offsetLeft-10)+'px';
        c.style.left=(c.offsetLeft-10)+'px';
        setTimeout(hideMenu,16)
    }

}
</script>
</html>

开发基于Web的sidewipe菜单的最佳方法是什么？

3 个答案: