侧边栏切换效果破坏了我的菜单项

Question

我正在为移动应用程序创建一个非常简单的sidenav。我关注了this example。

一切正常，除了当我关闭菜单时，如果您注意的话，我的菜单项<a>标签在边栏缩小到适当位置时正在“破坏”。如果您从上方看到示例代码，则它们的菜单项不会中断。

Here's my code.

function openNav() {
                document.getElementById("sidenav").style.width = "80%";
            }

            function closeNav() {
                document.getElementById("sidenav").style.width = "0";
            }

/*-- Top Navbar --*/
.top-navbar {
	width: 100%;
	height: 8%;
	background-color: #E4E4E4;
	font-size: 1.5em;
	padding-top: 2%;
}

.top-navbar span {
	margin-left: 4%;
	padding-top: 2%;
	color: #2c2c2c;
}

/*-- Sidebar --*/
.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #E4E4E4;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 1em;
	color: #2C2C2C;;
	display: block;
	transition: 0.3s;
}

.sidenav a:hover {
	color: #9F2241;
}

/*.sidenav a:before {
	content: "";
	display: block;
	background: url(../img/icono-retirar.svg) no-repeat;
	width: 20px;
	height: 20px;
	float: left;
	margin-left: 0 6px 0 0;
}
*/

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
	color: #2c2c2c;
}

<div id="sidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="#">Haz un retiro</a>
            <a href="#">Invita un amigo</a>
            <a href="#">Ayuda</a>
            <a href="#">Términos y condiciones</a>
            <a href="#">Cerrar sesión</a>
        </div>

        <div class="top-navbar">
            <span onclick="openNav()">&#9776;</span>
        </div>

Answer 1

在您的white-space:nowrap; CSS规则中添加.sidenav a。