圆形动画导航

Question

我试图重现这种效果：CODYHOUSE

但更简单的事情。

所以我试着开始吧。但是我没有设法从顶部左侧角落扩展我的圈子。而且我希望他能在没有滚动条的情况下覆盖我的所有页面： - / 这不是那么简单。之后，我希望我的内容出现。我也没办法做到这一点： - （

MY JSFIDDLE

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

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

});

Answer 1

主要与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');

});