플로팅 메뉴 (시간차 메뉴 나오기)

HTML

<nav id="nav">
  <input id="toggle" type="checkbox" class="plus"><label for="toggle" class="toggle"><span></span></label>
  <div class="links">
    <a href="#main" data-title="Main"><i class="uil uil-home"></i></a>
    <a href="#about" data-title="About"><i class="uil uil-trees"></i></a>
    <a href="#ccd" data-title="CCD"><i class="uil uil-monitor-heart-rate"></i></a>
    <a href="#service" data-title="Service"><i class="uil uil-users-alt"></i></a>
    <a href="#ngr" data-title="NGR"><i class="uil uil-gold"></i></a>
    <a href="#gallery" data-title="Gallery"><i class="uil uil-images"></i></a>
    <a href="#contact" data-title="Contact"><i class="uil uil-envelope-alt"></i></a>
  </div>
</nav>

CSS

nav{position:fixed; right:200px; bottom:150px; z-index:100;}
nav .plus{display:none;}
nav .toggle {position:absolute; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.7); cursor:pointer; z-index:10;}
nav .toggle span {top:calc(50% - 1px); left:calc(50% - 11px); z-index:10;}
nav .toggle span:before {content:""; transform:translateY(-7px);}
nav .toggle span:after {content:""; transform:translateY(7px);}
nav .toggle span, nav .toggle span:before, nav .toggle span:after {position:absolute; width:22px; height:2px; border-radius: 10px; background-color:#07012c; transition:.5s;}
nav .plus:checked + .toggle span {width:0; transition:.4s;}
nav .plus:checked + .toggle span:before {transform:rotate(45deg);}
nav .plus:checked + .toggle span:after {transform:rotate(-45deg);}
nav .links a{display:flex; justify-content:center; align-items:center; position:absolute; width:50px; height:50px; margin:5px; font-size:20px; color:#07012c; border-radius:50%; background:rgba(255,255,255,.7); cursor:pointer; opacity:0; transition:all .3s ease-in-out 0s;}
nav .links a:before{content:attr(data-title); position:inherit; top:50%; right:60px; margin-top:-8px; font:16px/16px 'Montserrat'; letter-spacing:0; color:#ccc; opacity:0; transition:all .4s ease-in-out 0s;}
nav .plus:checked + .toggle + .links a {opacity:1;}
nav .plus:checked + .toggle + .links a:nth-child(1){-webkit-transform:translate(0,-425px); transform:translate(0,-425px); transition-duration:.7s;}
nav .plus:checked + .toggle + .links a:nth-child(2){-webkit-transform:translate(0,-365px); transform:translate(0,-365px); transition-duration:.6s;}
nav .plus:checked + .toggle + .links a:nth-child(3){-webkit-transform:translate(0,-305px); transform:translate(0,-305px); transition-duration:.5s;}
nav .plus:checked + .toggle + .links a:nth-child(4){-webkit-transform:translate(0,-245px); transform:translate(0,-245px); transition-duration:.4s;}
nav .plus:checked + .toggle + .links a:nth-child(5){-webkit-transform:translate(0,-185px); transform:translate(0,-185px); transition-duration:.3s;}
nav .plus:checked + .toggle + .links a:nth-child(6){-webkit-transform:translate(0,-125px); transform:translate(0,-125px);	transition-duration:.2s;}
nav .plus:checked + .toggle + .links a:nth-child(7){-webkit-transform:translate(0,-65px);	transform:translate(0,-65px);	transition-duration:.1s;}
nav .plus:checked + .toggle + .links a:before{opacity:1; -webkit-transform:translate(-5px,0);	transform:translate(-5px,0);}
nav .plus:checked + .toggle + .links a:nth-child(1):before{transition-duration:2.2s;}
nav .plus:checked + .toggle + .links a:nth-child(2):before{transition-duration:2s;}
nav .plus:checked + .toggle + .links a:nth-child(3):before{transition-duration:1.8s;}
nav .plus:checked + .toggle + .links a:nth-child(4):before{transition-duration:1.6s;}
nav .plus:checked + .toggle + .links a:nth-child(5):before{transition-duration:1.4s;}
nav .plus:checked + .toggle + .links a:nth-child(6):before{transition-duration:1.2s;}
nav .plus:checked + .toggle + .links a:nth-child(7):before{transition-duration:1s;}