纯CSS展开收缩的图标导航

来源:https://www.sucaihuo.com/js/2578.html 2017-07-29 22:48浏览(3904) 收藏

一款纯CSS展开收缩的图标导航,点击菜单图标可以展开导航,再次点击菜单图标则自动收缩,图标可以自由增加、替换或删除,喜欢的童鞋请收下吧。
纯CSS展开收缩的图标导航
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需远程调用font-awesome图标字体库,并引入本地CSS样式文件,代码如下:

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,多个button按钮放入一个div容器里即可,代码如下:

<div class="wrapper">
  <div class="menu">
    <input type="checkbox">
    <button class="fa fa-pencil"></button>
    <button class="fa fa-refresh"></button>
    <button class="fa fa-trash"></button>
    <button class="fa fa-bars"></button>
  </div>
</div>
评论0
头像

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

1 2