国际惯例，开头引用css样式和jquery库，style.css是页面样式控制，其余两个css文件为字体样式控制。

<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/MaterialIcons.css">
<link type="text/css" rel="stylesheet" href="css/Ubuntu.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

按钮和菜单的内容也是很容易写的，<i>标签是图标，下面的<div>是鼠标悬停时的提示内容，代码如下：

<div class="icons">
  <div class="icon" tabindex="1"><i class="material-icons">apps</i>
    <div class="title">应用</div>
  </div>
  <div class="icon" tabindex="1"><i class="material-icons">folder_open</i>
    <div class="title">资源</div>
  </div>
  <div class="icon" tabindex="1"><i class="material-icons">settings_brightness</i>
    <div class="title">亮度</div>
  </div>
  <div class="icon" tabindex="1"><i class="material-icons">settings_voice</i>
    <div class="title">声音</div>
  </div>
  <div class="icon" tabindex="1"><i class="material-icons">settings</i>
    <div class="title">设置</div>
  </div>
  <div class="icon" tabindex="1"><i class="material-icons">tune</i>
    <div class="title">滑动</div>
  </div>
  <div class="icon" id="downloads" tabindex="1"><i class="material-icons open">open_in_browser</i><i class="material-icons close">system_update_alt</i>
    <div class="title">下载</div>
    <div class="downloads">
      <div class="download">
        <div class="text">财富聚宝盆.dmg</div>
        <div class="icon"><i class="material-icons">description</i></div>
      </div>
      <div class="download">
        <div class="text">高雅人生路.dmg</div>
        <div class="icon"><i class="material-icons">description</i></div>
      </div>
      <div class="download">
        <div class="text">平安幸福行.dmg</div>
        <div class="icon"><i class="material-icons">description</i></div>
      </div>
      <div class="download">
        <div class="text">健康长相伴.zip</div>
        <div class="icon"><i class="material-icons">unarchive</i></div>
      </div>
      <div class="download">
        <div class="text">开心每一天.jpg</div>
        <div class="icon"><i class="material-icons">insert_photo</i></div>
      </div>
      <div class="download">
        <div class="text">开创美好新生活</div>
        <div class="icon"><i class="material-icons">open_in_new</i></div>
      </div>
    </div>
  </div>
</div>

最后通过javascript事件来控制最右侧的下载按钮的弹出和收缩，代码如下：

setTimeout(function() {
    document.getElementById('downloads').classList.add('demo')
}, 1000)
document.body.addEventListener('click', function() {
    document.getElementById('downloads').classList.remove('demo')
});

说明事项：

字体是调用的谷歌字体库，这里我已经下载好了，并转换了多种格式，参考样式代码：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('MaterialIcons'), local('MaterialIcons-Regular'), url('fonts/MaterialIcons.eot');
  src: local('MaterialIcons'), local('MaterialIcons-Regular'), url('fonts/MaterialIcons.eot?#iefix') format('embedded-opentype'),
       url('fonts/MaterialIcons.woff') format('woff'),
       url('fonts/MaterialIcons.woff2') format('woff2'),
       url('fonts/MaterialIcons.ttf') format('truetype'),
       url('fonts/MaterialIcons.svg#MaterialIcons') format('svg');
}