Question

我想用这个侧边栏创建一个导航菜单。

它应该有链接，但ul元素

上没有显示div列表

我想只使用CSS来做这件事。

纯CSS是必需的，因为我没有任何脚本语言知识

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>SideBar</title>
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons
            "/>
            <style type="text/css">
                /*
                 #button {
                 display: block;
                 text-decoration: none;
                 margin-top: 20px;
                 margin-left: 50px;
                 color: white;
                 width: 20px;
                 height:20px;
                 font-size: 30px;
                 transition: width 0.5s;
                 background-color: black;
                 text-align: center;
                 padding-bottom: 30px;
                 box-sizing: border-box;
                 }*/

                #button {
                    margin-top: 20px;
                    margin-left: 50px;
                    font-size: 30px;
                    cursor: hand;
                }

                #sidebar {
                    position: absolute;
                    background-color: black;
                    left: 0px;
                    top: 0px;
                    width: 0px;
                    height: 100%;
                    transition: width 0.5s;
                    opacity: 0.7;
                }

                #screen {
                    position: fixed;
                    background-color: tan;
                    height: 100%;
                    width: 100%;
                    left: 0px;
                    top: 0px;
                }

                #button:hover + #sidebar {
                    width: 200px;
                }

                #sidebar:hover {
                    width: 200px;
                }

            </style>
        </head>

        <body>

            <div id="screen">

                <i class="material-icons" id="button">menu</i>

                <div id="sidebar">
                    <ul>
                        <li><a href="#1">Nav 1</a></li>
                        <li><a href="#2">Nav 2</a></li>
                        <li><a href="#3">Nav 3</a></li>
                    </ul>
                </div>

                <hr />
                <div>
                    Hello
                </div>
            </div>

        </body>
    </html>

Answer 1

因为在您的CSS中#sidebar{ width: 0px;}，ul中的div无法包含在left内，而是使用width值而不是#button { margin-top: 20px; margin-left: 50px; font-size: 30px; cursor: hand; } #sidebar { position: absolute; background-color: black; left: -200px; top: 0px; width: 200px; height: 100%; transition: width 0.5s; opacity: 0.7; padding-top:50px; -webkit-transition: left 1s; transition: left 1s; } #sidebar ul { list-style-type:none; } #screen { position: fixed; background-color: tan; height: 100%; width: 100%; left: 0px; top: 0px; } #sidebar:hover, #button:hover + #sidebar { left: 0; -webkit-transition: left 1s; transition: left 1s; } {{ 3}}

<div id="screen"><i class="material-icons" id="button">menu</i>

    <div id="sidebar">
        <ul>
            <li><a href="#1">Nav 1</a></li>
            <li><a href="#2">Nav 2</a></li>
            <li><a href="#3">Nav 3</a></li>
        </ul>
    </div>
    <hr />
    <div>Hello</div>
</div>

transition: left 1s;

注意：已添加-webkit-以进行滑入页面的转换，并使用{{1}}添加以支持问题

菜单列表不会按预期显示在div中

1 个答案: