只用css3实现菜单的toggle效果
Posted 木西梧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了只用css3实现菜单的toggle效果相关的知识，希望对你有一定的参考价值。
一、原理:
使用label与input来实现，label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框。
如果我们需要让菜单默认显示,只需要将input的checked属性设为true即可。
因为用到了css3的：checked属性，因此只适用于IE9+浏览器。
label可以设置为display：block，从而可以实现在里面实现换行等块级元素的需求。
二、代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>只用css3实现menu的toggle效果</title> <style> .wrap{ width:400px; margin:50px auto 0; } label { cursor: pointer; font-size: 14px; padding:10px; border:1px solid #00A000; } #menu-toggle { display: none; /* hide the checkbox */ } #menu { display: none; list-style: none; width:200px; border:1px solid #00a0e9; } #menu li{ margin: 10px 0; } #menu li a{ text-decoration: none; } #menu li a:active{ color:#00a5e0; } /*这句最关键*/ #menu-toggle:checked + #menu { display: block; } </style> </head> <body> <div class="wrap"> <label for="menu-toggle"> 点击显示隐藏菜单 </label> <input type="checkbox" id="menu-toggle"/> <ul id="menu"> <li><a href="http://www.baidu.com">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> <p>适用于Chrome,FF,IE9+浏览器</p> </body> </html>
本文参考http://www.outofscope.com/css-only-menu-toggle-no-javascript-required/
以上是关于只用css3实现菜单的toggle效果的主要内容，如果未能解决你的问题，请参考以下文章