コピペで使えるCSSとJavascriptで円弧に沿った形の縦並びメニュー

作成したメニュー

タイトル等を入れる

htmlおよびCSS

<div class="mamCircleMenu">
  <div>
    <div>
      <svg viewBox="0 0 64 64">
        <path d="M0,2 A38,38 0,0,1 0,62 " style="fill:none;stroke:#DDD;stroke-width:2;stroke-linecap:round;"></path>
      </svg>
    </div>
    <div>
      <div><a href="">メニュー 1へ</a></div>
      <div><a href="">メニュー 2へ</a></div>
      <div><a href="">メニュー 3へ</a></div>
      <div><a href="">メニュー 4へ</a></div>
      <div><a href="">メニュー 5へ</a></div>
      <div><a href="">メニュー 6へ</a></div>
    </div>
  </div>
  <div>
    <h1>タイトル等を入れる</h1>
  </div>
</div>

<style>
@media screen and ( max-width:667px) {
  /* 667以下 */
  .mamCircleMenu{
    flex-wrap:wrap-reverse;
    height:12em;
  }
  .mamCircleMenu>div:nth-child(1){
    width:100%;
  }
  .mamCircleMenu>div:nth-child(2){
    width:100%;
  }
}
@media screen and (min-width:667px) {
  /* 667を超える */
  height:10em;
}
.mamCircleMenu{
  font-size:16px;
  background:#333;
  margin:0;
  padding-top:2em;
  padding-bottom:2em;
  padding-left:0em;
  padding-right:0em;
  position:relative;
  display:flex;
  width:100%;
}
.mamCircleMenu>div:nth-child(1){
  background:#333;
  position:relative;
  margin:0;
  padding:0;
  flex:1 0 200px;
}
.mamCircleMenu>div:nth-child(2){
  background:#333;
  flex:0 1 auto;
  padding-top:0.5em;
  padding-bottom:0.5em;
}
.mamCircleMenu>div:nth-child(2)>h1{
  color:#EEE;
  font-size:1.5em;
}
.mamCircleMenu>div:nth-child(1)>div:nth-child(1)>svg{
  /* ieのバグ対応 */
  width:10em;
  height:10em;
}
.mamCircleMenu>div:nth-child(1)>div:nth-child(2){
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  margin:0;
  padding:0;
  transform-origin:-5em 50%;
}
.mamCircleMenu>div:nth-child(1)>div:nth-child(2)>div{
  position:absolute;
  transform-origin:0 0.5em;
  color:#FFF;
}
.mamCircleMenu>div:nth-child(1)>div:nth-child(2)>div>a{
  color:#FFF;
  text-decoration:none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width:auto;
}
.mamCircleMenu>div:nth-child(1)>div:nth-child(2)>div>a:hover{
  color:#FFF;
  text-decoration:underline dotted #DDD;
  color:#DDD;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
<script>
  var mamCircleMenu,mamCircleMenuDeg,mamCircleMenuId;

  window.addEventListener("load",function(){
    mamCircleMenu=document.querySelector(".mamCircleMenu>div:nth-child(1)>div:nth-child(2)");
    let mamcs=mamCircleMenu.querySelectorAll("div");
    let ct=mamcs.length;
    let start_deg=26;//最大角度
    let degp=start_deg*2/(ct-1);
    let deg=start_deg;
    for(i=0;i<ct;i++){
      mamcs[i].style.left=(Math.cos(deg/180*Math.PI)*7.5-4.8)+"em";
      mamcs[i].style.top =(-Math.sin(deg/180*Math.PI)*7.5+4.4)+"em";
      mamcs[i].style.transform="rotate("+(-deg)+"deg)";
      deg-=degp;
    }
    mamCircleMenuDeg=-90;
    mamCircleMenuId=setInterval(function(){
      if(mamCircleMenuDeg<0){
        mamCircleMenuDeg+=1;
        if(mamCircleMenuDeg>0){mamCircleMenuDeg=0;}
        mamCircleMenu.style.transform="rotate("+mamCircleMenuDeg+"deg)";
      }else{
        clearInterval(mamCircleMenuId);
      }
    },10);
  });
</script>
縦並び・横並びメニューのサンプル一覧
