4

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

在此处输入图像描述

4

3 回答 3

6

我讨厌成为那个人只是放弃一个链接，但这里有一篇关于这个主题的很好的文章：http: //coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-网站/

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

于 2013-02-22T17:53:21.320 回答
1

如果你不反对 jQuery Mobile，这可以很简单：

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

于 2013-02-22T17:51:29.907 回答
0

这是我将如何处理它（当然这只是动画的一个例子，我省略了其他所有内容）：

<!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>
于 2013-02-22T17:46:36.837 回答