纯CSS标题菜单

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

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

查看演示下载资源下载积分： 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>

纯CSS标题菜单【原创】

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

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