圓角動畫導航

但是更簡單一些。

所以我嘗試這個開始。但是我沒有設法從左上角擴大我的圈子。我希望他能覆蓋我的所有頁面而不用滾動條： -/ 這並不簡單。之後，我希望我的內容出現。我沒能做到這一點太:-(

$('.toggle-menu').click(function (e) { 
    e.preventDefault(); 
    $('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); 

    $('.circle, #overlay-menu').toggleClass('Opacity'); 
    $('.circle').addClass('open'); 

});

來源

2015-09-29 Xroad

首先你的例子已經有了一個滾動條，因此覆蓋菜單而不增加滾動條並不是很棒的技巧，試圖設置位置高度在CSS中的寬度不會讓你在那裏。你必須得到觸發位置並從那裏開始你的轉換。你必須得到屏幕的高度和寬度，並使覆蓋層足夠大以覆蓋它。將覆蓋位置設置爲固定，以便不滾動。你有很多工作要做，以模擬這一點。或者您可以複製他的main.js javascript文件並對其進行修改以滿足您的需求。 –

有大多是用CSS，而不是JS代碼做的。請檢查一次以下小提琴。

updated fiddle

$('.toggle-menu').click(function (e) { 
e.preventDefault(); 
$('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); 

$('.circle, #overlay-menu').toggleClass('Opacity'); 
$('.circle').toggleClass('open'); 

});

來源

2015-09-29 22:05:05

我修改了你的代碼。這是完美的。謝謝。但我試圖在動畫和我的內容之間添加延遲。我添加了延遲，但沒有發生。 http://jsfiddle.net/Xroad/3pn2pkt6/19/ – Xroad

圓角動畫導航

回答

相關問題