一款纯CSS下拉导航菜单三级导航特效,点击菜单会显示多个二级菜单,其中有箭头的则表示有三级菜单,可继续点击展开,展开之后需要手动点击收缩恢复到最初状态,喜欢的童鞋请收下吧。
页面的head部分,仅需引入一个CSS样式文件即可,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,设置好页面各元素的容器,可根据不同菜单级别进行增加,代码如下:
<main ontouchstart='true' role='main'>
<nav role='menu'>
<input aria-controls='nav' aria-haspopup='true' aria-labelledby='menu' id='link-top' role='button' tabindex='1' type='checkbox'>
<label class='down' for='link-top' id='menu' role='none' tabindex='-1'>吸引力法则</label>
<ul aria-labelledby='menu' id='nav' role='menu'>
<li role='none'>
<input aria-controls='nest' aria-haspopup='true' aria-labelledby='shop' id='link-shop' role='menuitem' tabindex='2' type='checkbox'>
<label class='right' for='link-shop' id='shop' role='none' tabindex='-1'>健康</label>
<ul aria-labelledby='shop' id='nest' role='menu'>
<li role='none'>
<a role='menuitem' tabindex='3'>运动</a>
</li>
<li role='none'>
<a role='menuitem' tabindex='3'>营养</a>
</li>
<li role='none'>
<a role='menuitem' tabindex='3'>睡眠</a>
</li>
<li role='none'>
<a role='menuitem' tabindex='3'>水分</a>
</li>
<li role='none'>
<a role='menuitem' tabindex='3'>放松</a>
</li>
</ul>
</li>
<li role='none'>
<a role='menuitem' tabindex='4'>快乐</a>
</li>
<li role='none'>
<a role='menuitem' tabindex='4'>财富</a>
</li>
<li role='none'>
<a role='menuitem' tabindex='4'>自由</a>
</li>
</ul>
</nav>
</main>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791