javascript - 如何使移动设备的导航栏菜单占据我设备屏幕的 100%
问题描述
我希望你能帮助我,我正在做一个响应速度非常快的登陆页面,并且完美地适应移动设备。在移动设备的情况下,我想让导航菜单覆盖整个屏幕。但我无法实现它。我希望当在移动设备中看到页面并单击切换按钮时,选项菜单会出现覆盖整个屏幕,如下所示:
在上图中,该菜单在显示时覆盖了整个屏幕,包括宽度和高度。
在我没有发生的网页上,当我单击切换按钮以显示菜单时,它是这样的:
正如你所看到的,菜单只覆盖了屏幕的一半,我希望它虽然选项很少,但它仍然覆盖了屏幕的所有大小。我怎么能做到这一点?使用 CSS,也许还有 JavaScript。
这是我的 HTML 代码:
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<!-- navigation section -->
<section class="navbar navbar-fixed-top custom-navbar bg-trans" role="navigation" id="navbar_menu">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="nav-brand" href="index.php"><img src="images/nivaLogo.png" alt="logo" title="Nivamedia" id="main_logo"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="list_options">
<li><a href="index.php" class="smoothScroll itemLi">HOME</a></li>
<li class="dropdown">
<a class="dropdown-toggle itemLi" data-toggle="dropdown">LEISTUNGEN</a>
<ul class="dropdown-menu" id="dropdown-main" style="background-color: white; color: black;">
<li><a href="webdesign.php" class="itemUlLi">Webdesign & Entwicklung</a></li>
<li><a href="corporate-design.php" class="itemUlLi">Corporate Design</a></li>
<li><a href="online-marketing.php" class="itemUlLi">Online Marketing</a></li>
<li><a href="lieferdienst.php" class="itemUlLi">Lieferdienst Webshop</a></li>
</ul>
</li>
<li><a href="projekte.php" class="smoothScroll itemLi">PROJEKTE</a></li>
<li><a href="#about" class="smoothScroll itemLi">AGENTUR</a></li>
<li><a href="kontakt.php" class="smoothScroll itemLi">KONTAKT</a></li>
</ul>
</div>
</div>
</section>
</body>
这是我的 CSS 媒体查询
@media (max-width: 767px) and (min-width: 320px)
{
.just_text
{
margin-left: 2px !important;
margin-right: 20px !important;
}
.title_left
{
text-align: center !important;
}
#main_logo
{
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 25px !important;
}
#navbar_menu
{
border-bottom: 0;
background: transparent; /*0 0*/;
}
/* #navbar_container
{
width: -webkit-fill-available !important;
height: -webkit-fill-available !important;
}
*/
#dropdown-main
{
background-color: white !important;
background: white !important;
padding-right: 0px !important;
}
.itemUlLi
{
color: black !important;
font-size: 18px !important;
}
#list_options
{
margin-top: 0px !important;
padding-top: 0px !important;
padding-bottom: 20px !important;
}
.itemLi
{
font-size: 20px !important;
}
.list_options_Li
{
padding-bottom: 30px !important;
}
.dropdown_li
{
padding-top: 15px !important;
}
#list_options
{
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
#services_title div.section-title
{
padding-right: 11px !important;
padding-left: 11px !important;
}
#icon_mobile
{
display: inline-block !important;
}
#dropdown-main
{
padding-right: 0px !important;
margin-right: 0px !important;
padding-top: 15px !important;
width: 100% !important;
padding-left: 30px !important;
}
.navbar-toggle
{
margin-top: 20px !important;
margin-right: 25px !important;
}
.collapse.in
{
background-color: white !important;
position: relative !important;
top: 0 !important;
padding-left: 20px !important;
}
.collapse.in ul
{
background-color: white !important;
}
.collapse.in ul li a
{
color: black !important;
}
.off
{
display: none !important;
}
.display_line
{
display: block !important;
color: blue !important;
font-weight: bold !important;
width: 20% !important;
margin-left: 16px !important;
margin-right: 0px !important;
margin-top: 0% !important;
margin-bottom: 0% !important;
border-top: 2px solid blue !important;
text-align: left !important;
}
#menu_collapse
{ height: 100vh !important; }
} /* end of media queries */
我正在使用引导程序进行设计。
解决方案
如果height: 100vh
不适合你,你也许可以得到它
min-height: 100vh
推荐阅读
- python - 如何访问 JSON 响应的元素
- javascript - 在reactjs中渲染一个数组
- python - How to append elements to a list in python
- javascript - 如何以编程方式将 ionic 4 中的目录从 LTR 更改为 RTL
- android - Android Studio Gradle 离线
- python - Spark Executors 故障/所有 executors 没有同时执行
- r - 列名显示不正确
- mule - Mule Dataweave:如何将 HTTP 响应(JSON)动态映射到 XML 输出
- hyperledger-fabric - Hyperledger 错误:尝试启动业务网络时出错。错误:没有来自任何对等方的有效响应
- imagemagick - Ghostscript 不会在 pgm 文件的标题中写入分辨率