我有一个在按下按钮时显示的菜单,它向我显示菜单选项,问题是它出现在我的页面主体上方,我希望每次单击按钮时都会将主体移动 1cm向下。
您也可以通过padding-bottom
在菜单中添加 1 厘米的空间来实现相同的效果。
这是菜单:
<header class="bg-dark-red py-1" id="menu_top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" id="menu_nav">
<h1>
<a class="navbar-brand" href="index.html">
<img src="images/aki_logo.jpg" width="250" style="border-radius: 10px;">
</a>
</h1>
<!--BOTON MENU-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="boton_menu">
<span class="navbar-toggler-icon"></span>
</button>
<!--_____________________-->
<input type="hidden" class="btn_navbar">
<!--ELEMENTOS DEL MENU-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-lg-4 mr-auto">
<li>
<input type="button" onclick="document.location.reload();" class="button_inicio" value="Inicio">
</li>
<li class="nav-item">
<a class="nav-link" href="#Acerca_de" data-ancla="Acerca_de">Quienes Somos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Planes" data-ancla="Planes">Planes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Servicios" data-ancla="Servicios">Servicios Adicionales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contacto" data-ancla="Contacto">Contacto</a>
</li>
</ul>
<!--<div class="header-right">
<a href="signin.html" class="signin mr-4">Sign in <i class="fas fa-sign-in-alt"></i></a>
<a href="register.html" class="contact">Get Started</a>
</div>-->
</div>
</nav>
</div>
</header>
这只是我添加到菜单按钮的动画。
<script type="text/javascript">
const btn = document.querySelector('.navbar-toggler')
btn.addEventListener('click', () => {
btn.classList.remove('animate')
setTimeout(() => btn.classList.add('animate'), 100)
})
</script>
我试图在点击事件中添加这一行。
document.getElementById('menu_top').style.paddingBottom = '1cm';
我也将其添加id
到标题中,但它不起作用。
我补充说,仅当屏幕分辨率小于 1024x600 像素时才会出现菜单按钮。它对我隐藏了我的菜单项。
如果分辨率更高,则只显示我的菜单元素,并对齐。并且按钮是隐藏的。
我给你一个例子来说明如何做到这一点,这样菜单就不会出现在页面的主体上。如果除此之外你想在显示它时添加一个空格,我不太明白,为此我添加了一行css。如果它不是您需要的,只需将其删除。干杯!
尝试添加这个 CSS: