Question

我怎样才能将此水平菜单变成垂直菜单，以便在将窗口缩放到特定宽度时，通过单击菜单垂直显示菜单来切换弹出窗口。

我试图使它隐藏起来，但是似乎不起作用

我的导航HTML代码：

<nav>

        <div id ="wrapper">

            <div class="logo" >

                <h2> Navbar </h2>


            </div>

            <ul>
                <li><a href="#"> Home </a></li>
                <li><a href="#"> About </a></li>
                <li><a href="#"> Pricings </a></li>
                <li><a href="#"> Blog </a></li>
                <li><a href="#" class="exclusive"> Contact </a></li>
            </ul>

            <div id="toggle">
                <div id="one" class="line"> </div>
                <div id="two" class="line"> </div>
                <div id="three" class="line"> </div>
            </div>



        </div>

    <!--    
        <div id="place">
                <ul id="resize">
                    <li><a href="#"> Home </a></li>
                    <li><a href="#"> About </a></li>
                    <li><a href="#"> Pricings </a></li>
                    <li><a href="#"> Blog </a></li>
                    <li><a href="#"> Contact </a></li>
                </ul>
            </div>
            -->
    </nav>

整个代码：https://jsfiddle.net/20ynL31t/1/

Answer 1

您应从width: 100%元素中删除li，如下所示：

#wrapper ul li {
    text-align: center;
    padding: 0px;
    margin: 0 5px;
}

Answer 2

我认为您需要菜单为全屏显示，这是链接：https://codepen.io/mk_dev/pen/pOqwpo

<input type="checkbox" id="op" autocomplete="off">

最简单的方法是使用一个复选框，选中该复选框可打开菜单并显示菜单链接。

Answer 3

尝试使用

#wrapper ul li {
display: block;
}

将水平菜单转换为垂直菜单

3 个答案: