nav round

by jpeter06

HTML

<nav>
<div class="menucircle">
</div>

  <ul>
      <li><a routerLink="rie" routerLinkActive="active">Rie</a></li>
      <li><a routerLink="che" routerLinkActive="active">Che</a></li>
      <li><a routerLink="" routerLinkActive="active">Home</a></li>
  </ul>
</nav>
<svg height="100px" width="100px">
  <defs>
    <clipPath clipPathUnits="objectBoundingBox" id="sector">
      <path fill="red" stroke="#111" stroke-width="1" class="sector" d="M0.5,0.5 l0.5,0 A0.5,0.5 0 0,0 0.75,.066987298 z"></path>
    </clipPath>
  </defs>
  <use xlink:href="#sector" x="5" y="5" />
</svg>

CSS

html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
nav{
  position:absolute;
  z-index:200;
  right: 110px;
  top:110px;
  clip-path:circle(Max(12vw,12vh) at right);
  transition: 0.2s ease-out;
  font-size: Max(2vw,2vh);
}

nav div.menucircle {
  position: absolute;
  display:block;
  top:0px;
  right:0px;
  width:Max(5vw, 5vh);
  height:Max(5vw, 5vh);
  background:rgb(121, 121, 121, 0.3);
  clip-path: circle(Max(2vw,2vh) at right top);
}

nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li{
  top:calc(0px - Max(4vw,4vh));
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  right:0px;
  position: absolute;
  transform-origin: 100% 50% 0;
    transition: transform 0.3s ease-out 0.1s;
}

nav ul li a{
  /*clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: url(#sector);*/
  display: flex;
  align-items: center;
  padding-left: Max(6vw,6vh);
  justify-content: left;
    width: Max(10vw,10vh);
    height: Max(8.5vw, 8.5vh);
    cursor: pointer;
    background-color: rgb(121, 121, 121, 0.3);
    text-decoration: none !important;
    color: #eee;
}
nav ul li:nth-child(1) {  transform: rotate(110deg);}
nav ul li:nth-child(2) {  transform: rotate(60deg);}
nav ul li:nth-child(3) {  transform: rotate(30deg);}
nav:hover ul li:nth-child(1) {  transform: rotate(-15deg);}
nav:hover ul li:nth-child(2) {  transform: rotate(-45deg);}
nav:hover ul li:nth-child(3) {  transform: rotate(-75deg);}

nav:hover ul li a {
  background-color: rgb(121, 121, 121, 0.3);
}

nav:hover ul li a:hover{
  background-color: rgba(120,120,120,, 0.3);
}