我想在点击时垂直显示菜单而不推送页面中的内容。有没有办法只使用CSS样式。我正在使用RWD和媒体查询来开发它。
答案 0 :(得分:0)
如果我理解正确,您可以尝试将导航菜单滑出,而不是在页面内容推送时。我已经创建了一个片段,向您展示可以通过绝对定位轻松完成。我确定还有其他方法,但这对我来说一直都很好。
$('#togglenav').on('click', function() {
if ($('#menu').hasClass('shrinkMenu')) {
$('#menu').removeClass('shrinkMenu');
} else {
$('#menu').addClass('shrinkMenu');
}
})

body {
width: 99%;
height: 100vh;
background-color: darkred;
display: block;
position: relative;
}
#content {
height: 90%;
width: 100%;
margin-top: 5%;
background-color: cornflowerblue;
display: block;
}
#togglenav {
display: block;
padding: 1%;
width: 5%;
position: absolute;
right: 1%;
top: 1%;
background-color: darkslategrey;
text-align: center;
border: 1px inset grey;
border-radius: 5px;
box-shadow: inset 0 0 5px black;
cursor: pointer;
}
#menu {
display: block;
width: 300px;
height: 300px;
background-color: navajowhite;
position: absolute;
transition: all .3s ease;
}
.shrinkMenu {
height: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<span id="togglenav">Click Me!</span>
<span id="menu" class="shrinkMenu"></span>
<span id="content"></span>
</body>
&#13;