CSSとJavascriptで縦並びの円弧に沿った形のメニューを作る

CSSとJavascriptで円弧に沿った形の縦並びのメニューを作る


縦並び・横並びメニューのサンプル一覧

CSSとJavascriptで円弧に沿った形の縦並びのメニューを作る

HTMLとCSSとJavaScript

<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="UTF-8">
<style>
body{
  margin:0;
  padding:0;
  background:#666;
  color:#FFF;
  background:linear-gradient(90deg,#FFF 0%, #EEE 50%, #CCC 80%, #666 100%);
}
@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;
}
main{
  padding-bottom:3em;
  min-height:calc(100vh - 15em);
  color:#333;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  background:#333;
  color:#DDD;
  width:100%;
  text-align:center;
}
</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>
</head>
<body>
  <header 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>
  </header>
  <main>
    コンテンツ<br>
    <br>
    <br>
    <br>
    本文を入れます<br>
    <br>
    コンテンツ<br>
  </main>
  <footer>
    フッター
  </footer>
</body>
</html>


Mam's WebSite