在移動視圖中將所有內容向右移動

-1

如何將所有內容向右移動以在左側爲菜單留出空間？我想要做的是在移動視圖上有一個類似http://mashable.com/的菜單。您可以調整窗口大小並嘗試查看我在說什麼。感謝這樣做是讓你的內容包裹在一個主DIV要應用CSS3過渡您在移動視圖中將所有內容向右移動

馬呂斯

來源

2014-07-04 Marius S

我們怎麼可能幫忙？你使用框架？你知道響應式設計嗎？媒體查詢？ – MrUpsidown

當然，我知道。我使用bootstrap，所有的編程都是在jquery（集成的1.11.1）中完成的。 –

的一種方式。

例如：

<div id="contentWrap"> ... content ... </div>

CSS：

#contentWrap{ 
    position: absolute; 
    top:0; 
    width:100%; 
    height:100%; 
    transition: all 0.4s ease-out; 
    transform: translate(0%, 0); 
} 

#contentWrap.open{ 
    transform: translate(80%, 0); 
}

現在你可以綁定在輸入/輸出的內容通過刪除或添加的「開」類移動元件上的點擊事件處理到'#contentWrap'div

來源

2014-07-04 10:48:38 Erik

所以我所要做的就是這樣嗎？對於我的mashable.com示例，我應該用50％替換80％，就是這樣嗎？這和Jquery的2行？ –

當然，您還必須在頁面上顯示菜單，並且要麼：使其以與內容相同的方式移動（使用div和css過渡）或使用z-index使其位於內容的後面，並僅移動內容DIV。 – Erik

我將使用z-index。非常感謝！ –

嘗試使用Menufication這會激活菜單並推送內容

來源

2014-07-04 10:52:15 Sweetz

在移動視圖中將所有內容向右移動

回答

相關問題