纯CSS实现点击按钮切换菜单显示与隐藏

本篇博客的css技巧用到了以下几个关键知识点与开源项目:

  • label标签的for属性可以定位到指定的input元素
  • CSS的+选择器与~选择器的使用
  • Font Awesome 4.7.0版本
    具体代码可访问:我的git仓库
* {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background-color: #e7f3fe;
            user-select: none;
        }

        label {
            z-index: 1;
            display: block;
            position: absolute;
            width: 40px;
            height: 40px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.35s linear;
            cursor:pointer;
        }

        ul.slidebar {
            position: relative;
            background-color: transparent;
            width: 600px;
            height: 40px;
            display: flex;
            list-style: none;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            border-radius: 5px;
            transform: scaleX(0);
            transition: all 0.35s linear;
            box-shadow: 0 0 5px #075fab;
        }


        ul.slidebar li {
            max-width: 125px;
            border-radius: 5px;
            text-align: center;
            flex: 1 0 100px;
            color: #075fab;
        }

        ul.slidebar li:hover {
            box-shadow: inset 0 0 5px #0a87f5,
                inset 0 0 15px #85c3fa,
                inset 0 0 25px #b6dbfc;
        }

        div.button {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            z-index: 99;
            background-color: #097adc;
            width: 40px;
            height: 40px;
            transform: rotate(0turn);
            transform-origin: center center;
            transition: all 0.35s linear;
        }

        div.button i {
            margin: auto;
            font-size: 35px;
            color: #f5f5f5;
        }

        #check:checked+label {
            left:74%;
        }
        #check:checked+label i:before {
            content:'\f00d';
        }
        #check:checked+label>div.button{
            transform:translate(750%,-50%);
        }
        #check:checked+label>div.button {
            transform: rotate(0.25turn);
        }

        #check:checked~ul.slidebar {
            transform: scaleX(1);
        }

        input[type=checkbox] {
            display: none;
        }
<body>
    <input type="checkbox" id="check"></input>
    <label for="check">
        <div class="button"><i class="fa fa-bars"></i></div>
    </label>
    <ul class="slidebar">
        <li>服务</li>
        <li>卫生</li>
        <li>预约</li>
        <li>信息</li>
        <li>疫情</li>
    </ul>
</body>

你可能感兴趣的:(学习笔记,CSS)