什麼是開發基於Web的側掃菜單的最佳方式？

我以前問過關於開發iOS based side-swipe menu。現在側掃菜單已經成爲標準的用戶界面組件，它們開始轉移到移動網絡。 Medium是我見過的第一個在移動網站上成功推出這種類型的菜單（如下圖所示）。我的問題是：在網絡上實現類似這種事情的最有效方式是什麼？什麼是開發基於Web的側掃菜單的最佳方式？

enter image description here

來源

2013-02-22 Nick ONeill

不知道爲什麼人們會投票結束而沒有評論這是否是重複的？ – 2013-02-22 17:28:56

您可以將屏幕外div動畫到視圖中嗎？ – 2013-02-22 17:29:28

我認爲downvotes是因爲你提出了一個開放式的「......最有效......」的問題，引發了爭議 – 2013-02-22 17:30:10

我討厭自己是那樣的人，只是落個鏈接，但有一個很好的令狀在這裏討論這個話題：http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

它涵蓋了一個基於網頁的動畫菜單，它涵蓋了平滑動畫菜單的最佳實踐。文章非常詳細，難以總結其內容。希望這會有所幫助。

來源

2013-02-22 17:53:21 hradac

這是迄今爲止我見過的最好的一個......謝謝！ – 2013-02-22 18:02:05

@NickONeill謝謝，這是我在這個主題上發現的最好的文章之一，涵蓋了特定於移動開發的問題。 – hradac 2013-02-24 19:52:44

這是我會怎麼處理它（當然這僅僅是動畫的一個例子，我已經離開了一切）：

<!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-22 17:46:36

這種方法的一個缺點是使用絕對定位。是否有可能改變一個元素的位置而不固定或絕對？ – 2013-02-22 17:53:29

如果你不反對jQuery Mobile的，這可以很簡單：

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

來源

2013-02-22 17:51:29 danielrsmith

什麼是開發基於Web的側掃菜單的最佳方式？

回答

相關問題