JSFiddle - React, Tailwind, and code Playground

by yan dong

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://use.fontawesome.com/1ddffe7916.js"></script>
<link rel="stylesheet" href="https://rawgit.com/yandongCoder/circular-menu/master/dist/css/circular-menu.css">
<script src="https://rawgit.com/yandongCoder/circular-menu/master/dist/js/circular-menu.js"></script>
<div id="menu1" class="menu1">

</div>

CSS

.tips {
  font-size: 40px;
  color: #999;
  position: fixed;
  top: 50%;
  left: 30%;
}

.menu1 {
  left: 50%;
  top: 50%;
}

.my-icon {
  background: url("https://rawgit.com/yandongCoder/circular-menu/master/examples/circular-menu.png");
}

.icon1 {
  background-position: 0 0;
}

.icon2 {
  background-position: 0 -56px;
}

.icon3 {
  background-position: 0 -116px;
}

JavaScript

var menu = CMenu("#menu1")
  .config({
    horizontal: false,
    menus: [{
        title: "GitHub",
        icon: "fa fa-github",
        href: {
          url: "http://github.com",
          blank: true
        }
      }, {
        title: "GitLab",
        icon: ["fa fa-gitlab", '#4078c0'],
      }, {
        title: "subMenu",
        icon: "my-icon icon1",
        menus: [{
          title: 'subMenu1',
          icon: 'fa fa-firefox'
        }, {
          title: 'subMenu2',
          icon: 'fa fa-file'
        }]
      }
      //, {
      //  title: "subMenu",
      //  icon: "my-icon icon2"
      //}
    ]
  });


menu.show();