精仿MacOS的底部Dock菜单效果【原创

来源:https://www.sucaihuo.com/js/1956.html 2017-05-17 16:55浏览(1540) 收藏

一款精仿MacOS的底部Dock菜单效果的特效代码,鼠标悬停和点击都有响应的动画效果,最右侧的下载按钮点击会有弹出菜单,弧形的动画还漂亮,值得收藏学习。
精仿MacOS的底部Dock菜单效果
分类:导航菜单 > 二级菜单 难易:初级
查看演示 下载资源 下载积分: 60 积分

国际惯例,开头引用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');
}
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/1956.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2