Javascript - Circular menu - Circulus demo

http://sarasoueidan.com/tools/circulus/

by katalin_2003

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<h1>Circular Menu Demo</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aspernatur laboriosam dignissimos cumque recusandae quis et error, hic, impedit, doloribus dicta fugit at sunt. Mollitia vitae quaerat nostrum omnis amet!</p>
<p>Lorem...

CSS

/*@import url(http://fonts.googleapis.com/css?family=Varela+Round|Comfortaa:400, 700, 300);*/
 body {
    padding: 50px;
    background-color: #41BFB0;
    color: white;
    line-height: 1.5;
    font-family: Comfortaa;
}
h1 {
    text-align: center;
}
svg {
    position: fixed;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 600px;
    border-radius: 125px 125px 0 0;
}
#menu {
    display: block;
    margin: 0 auto;
    overflow: hidden;
}
.item {
    visibility: hidden;
}
.item .sector {
    transition: all .1s linear;
    fill: #fff;
    stroke: #111;
}
.item:hover .sector {
    fill: #eee;
}
.menu-trigger {
    fill: #EA2A55;
    pointer-events: auto;
}
.menu-trigger:hover {
    cursor: pointer;
}

JavaScript

var svg = document.getElementById('menu'),
    items = svg.querySelectorAll('.item'),
    trigger = svg.getElementById('trigger'),
    label = trigger.querySelectorAll('#label')[0],
    open = false;

//first scale the elements down
TweenLite.set(items, {
    scale: 0,
    visibility: "visible"
});
svg.style.pointerEvents = "none";

//set up event handler
trigger.addEventListener('click', toggleMenu, false);

//toggle menu when trigger is clicked
function toggleMenu(event) {
    if (!event) var event = window.event;
    event.stopPropagation();
    open = !open;
    if (open) {
        TweenMax.staggerTo(items, 0.7, {
            scale: 1,
            ease: Elastic.easeOut
        }, 0.05);
        label.innerHTML = "-";
        svg.style.pointerEvents = "auto";
    } else {
        TweenMax.staggerTo(items, 0.3, {
            scale: 0,
            ease: Back.easeIn
        }, 0.05);
        label.innerHTML = "+";
        svg.style.pointerEvents = "none";
    }
}

svg.onclick = function (e) {
    e.stopPropagation();
};
//close the nav when document is clicked
document.onclick = function () {
    open = false;
    TweenMax.staggerTo(items, 0.3, {
        scale: 0,
        ease: Back.easeIn
    }, 0.05);
    label.innerHTML = "+";
    svg.style.pointerEvents = "none";
};