只用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效果

最新文章

热门文章