一款可以展开伸缩的纯CSS标题菜单,点击菜单图标可展开菜单,再点击蓝色的叉号可以收缩菜单,菜单图标在点击的时候有一个变形动画,菜单的内容和图标均可以自由更换,喜欢的童鞋请收下吧。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791