顶部导航图标的变形动画

一款顶部导航图标的变形动画，点击导航里的菜单图标，导航图标会有一个变形的动画效果，同时右侧的新图标菜单显示出来。

分类：导航菜单 > 图标导航难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需对接谷歌字体，并引入页面元素的样式文件，代码如下：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css'>
<link rel="stylesheet" href="css/style.css">

页面的body部分，需设置好div容器里的无序列表导航菜单内容，代码如下：

<div class="container">
  <div class="screen">
    <ul class="toolbar">
        <li id="toggle" class="toggle">
          <i class="material-icons arrow out">arrow_back</i>
          <i class="material-icons menu">menu</i>
        </li>
        <li class="primary-icons">
          <i class="material-icons add">add</i>
          <i class="material-icons search">search</i>
          <i class="material-icons room">room</i>
      </li>
      <li class="secondary-icons">
        <i class="material-icons download hide-icons">file_download</i>
        <i class="material-icons trash hide-icons">delete</i>
      </li>
    </ul>
  </div>
</div>

页面的底部，需远程调用jQuery库并引入必要的JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>