一款顶部导航图标的变形动画,点击导航里的菜单图标,导航图标会有一个变形的动画效果,同时右侧的新图标菜单显示出来。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791