• 只用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/

  • 相关阅读:
    初始Dubbo
    ProcessBuilder执行本地命令
    Deep Learning的基本思想
    机器学习(Machine Learning)
    Group By和Order By的总结
    Oracle sqlldr命令
    redis的简单操作
    Java程序中做字符串拼接时可以使用的MessageFormat.format
    Bean的作用域
    DI延伸
  • 原文地址:https://www.cnblogs.com/sapho/p/5591546.html
Copyright © 2020-2023  润新知