页面的head部分需要引入3个CSS样式文件，有2个是远程调用的，代码如下：

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link type="text/css" rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分由多个图标菜单组成，还有一个select来控制菜单的显示个数，部分代码如下：

<li class="radial-menu__menu-item">
  <div class="radial-menu__menu-link-bg"></div>
  <div class="radial-menu__menu-icon">
    <span class="oi" data-glyph="bold" title="Bold" aria-hidden="true"></span>
  </div>
  <div class="radial-menu__menu-content">
    <div class="radial-menu__menu-content-wrapper">
      <h6 class="radial-menu__menu-content-title">
        粗体
      </h6>
      <p class="radial-menu__menu-content-description">
        Make text bold
      </p>
    </div>
  </div>
  <a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>

<div class="menu-items-select">
  <label class="menu-items-select__label" for="menu-items-to-show">菜单显示个数</label>
  <select class="menu-items-select__select" name="menu-items-to-show" id="menu-items-to-show">
    <option value="3">3个</option>
    <option value="4">4个</option>
    <option value="5">5个</option>
    <option value="6">6个</option>
    <option value="7">7个</option>
    <option value="8">8个</option>
    <option value="9">9个</option>
    <option value="10" selected>10个</option>
    <option value="11">11个</option>
    <option value="12">12个</option>
    <option value="13">13个</option>
    <option value="14">14个</option>
    <option value="15">15个</option>
  </select>
</div>

页面的底部需要引入一个JS文件，用来响应菜单的各种事件，代码如下：

<script type="text/javascript" src="js/index.js"></script>