頁幻燈片

我試圖模仿或發現了露出這樣twitter bootstrap template導航菜單滑動頁面插件：如果您調整頁面大小，你會看到選項頁幻燈片

在標題行中滑動頁面。

我已經看過javascript代碼，但沒有看到這是如何完成的。

我還發現這個git項目爲pageslide，但它滑動整個頁面。

任何想法如何將這個引導頁面滑出菜單爲較小的分辨率設備？

2013-07-23 Paul

它基本上是頁面結構和一些css3轉換/樣式。

<div id="wrap"> 
    <div id="menu" role="navigation"></div> 
    <div id="main" role="main"></div> 
</div>

該頁面使用媒體查詢基於可用的屏幕房地產和應用樣式JS菜單的HTML元素設置樣式：

當打開（略）：

@media screen and (max-width: 950px) 
    .js-advanced.js-menu #wrap { 
     -webkit-transform: translate3d(280px, 0, 0); 
    }

當關閉時（縮寫）：

@media screen and (max-width: 950px) 
    .js-advanced #wrap { 
     -webkit-transition: -webkit-transform 500ms ease; 
     -webkit-transform: translate3d(0, 0, 0); 
    }

在這種情況下，整個#wrap元件是貝ng轉移了過來。

我已經創建了一個頁面的simple/stripped down version的要點，該頁面基本支持較新的和一些較舊的瀏覽器。我沒有添加媒體查詢支持。媒體查詢支持可以通過庫如respondjs爲較舊的瀏覽器添加。

來源

2013-07-23 23:41:10 dc5

@dcp感謝您的信息...現在開始做出更有意義的感覺 – Paul

這看起來對於舊版瀏覽器來說不是一個好的解決方案...我是否正確？ – Paul

正確 - 爲了支持舊版本的瀏覽器，您需要使用一個類來操作左/右/等，而不是使用轉換，如果動畫對於這些瀏覽器來說很重要，可以使用庫或者自己實現。您可能還需要根據退出的距離來檢測可用寬度/高度的變化，或者只是稱之爲足夠好。 – dc5

您可以嘗試使用最新的jquerymobile（1.3.0）中的面板小部件。也許這不是你想要的，但有選擇，所以你可以編程方式。 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/panel-fixed.html

來源

2013-07-23 23:28:48

回答

相關問題