只用css3實現菜單的toggle效果

本文轉載自查看原文 2016-06-16 16:57 3166 CSS

一、原理:

使用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/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3實現旋轉的太極圖（二）：只用1個DIV Css3實現波浪效果2 用CSS3實現輪播效果 CSS3實現10種Loading效果 css3 實現打字機效果使用CSS3實現橢圓動畫效果 css3實現水球波紋效果 CSS3實現文字掃光效果 css3實現switch開關效果 css3實現半圓和圓效果