4

以前、 iOSベースのサイドスワイプメニューの開発について質問しました。サイドスワイプメニューが標準のユーザーインターフェイスコンポーネントになった今、それらはモバイルWebに移行し始めています。Mediumは、モバイルWebでこのタイプのメニューを正常にプルするのを私が最初に見たものの1つです（下の写真）。私の質問は、このようなものをWebに実装する最も効果的な方法は何ですか？

ここに画像の説明を入力してください

4

3 に答える 3

6

私はその人になってリンクをドロップするのは嫌いですが、このトピックについては非常に良い記事があります： http: //coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-sensitive- Webサイト/

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 に答える