头像

纯CSS标题菜单【原创

来源:https://www.sucaihuo.com/js/2453.html 18***38 2017-07-17 23:51浏览(2425) 收藏

一款可以展开伸缩的纯CSS标题菜单,点击菜单图标可展开菜单,再点击蓝色的叉号可以收缩菜单,菜单图标在点击的时候有一个变形动画,菜单的内容和图标均可以自由更换,喜欢的童鞋请收下吧。
纯CSS标题菜单
分类:导航菜单 > 图标导航 难易:初级

程序员,你不是一个人;网站开发QQ群:642228541,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 13

手机扫码访问:

下载资源 下载积分: 20 积分

页面的head部分,仅需引入一个CSS样式文件即可,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,这里使用了一个HTML5的标签nav,代码如下:

<nav class="nav">
  <input type="checkbox" class="nav__cb" id="menu-cb"/>
  <div class="nav__content">
    <ul class="nav__items">
      <li class="nav__item"> <span class="nav__item-text">🏡 主页 </span> </li>
      <li class="nav__item"> <span class="nav__item-text">🎁 服务 </span> </li>
      <li class="nav__item"> <span class="nav__item-text">🎯 关于 </span> </li>
      <li class="nav__item"> <span class="nav__item-text">☎ 联系 </span> </li>
    </ul>
  </div>
  <label class="nav__btn" for="menu-cb"></label>
</nav>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2453.html
最新交易
评论1
头像

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

1 2