javascript - 将移动菜单拉伸到全屏高度
问题描述
目前我有这个移动菜单
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
.link {
text-decoration: none;
}
body {
margin: 0;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItemContainer:not(:first-child) {
margin-left: 30px;
}
.navbarItemContainer {
background: #1e222a;
}
.navbarLink {
font-weight: bold;
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
@media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
@media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#navbarItems .navbarItemContainer:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItemContainer:not(:last-child) {
border-bottom: 1px solid #676767;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#logoLink {
display: inline-block;
}
.navbarItem {
width: 100%;
text-align: center;
}
#navbarItems.activeNavbar {
display: block;
}
.navbarLink {
width: 100%;
height: 100%;
display: inline-block;
padding: 30px 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItemContainer">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Hat-Mario-icon.png">
</a>
</div>
</div>
<div class="navbarItemContainer">
<div class="navbarItem">
<a class="link navbarLink" href="#sectionTwo">
Link 2
</a>
</div>
</div>
<div class="navbarItemContainer">
<div class="navbarItem">
<a class="link navbarLink" href="#sectionThree">
Link 3
</a>
</div>
</div>
</div>
</div>
我想将移动菜单拉伸到全宽。所以我必须根据链接的数量计算每个链接的高度。
给定 100% 的屏幕高度和 n 个链接的数量,我认为每个链接的高度是
100% / n - (menubarHeight / n)
如何设置我的 CSS 以使每个链接都采用这个高度?我只想将页面高度除以链接数量。
您可以在此页面上查看所需的移动菜单示例
在我@media(max-width: 1100px)
的底部,我想我必须在这里更改填充
.navbarLink {
width: 100%;
height: 100%;
display: inline-block;
padding: 30px 0;
}
如何设置全高菜单?
解决方案
试试下面的 jQuery 脚本,它将修复您的导航并允许您拥有多个不同高度的导航链接。我试图让代码自我解释。如果你不明白,请告诉我
function fixTheMobileNavigation() {
var $links = $('.navbarItemContainer'),
linksContainerFixedHeight = $(window).height() - $('#btnMenuContainer').height(),
linksLength = $links.length,
linkNecesseryHeight = (linksContainerFixedHeight / linksLength) - (linksLength - 1);
$('.link.navbarLink').css('padding', 0)
$links.each(function(i, item) {
var paddingTobBottom = ((linkNecesseryHeight - $(item).find(':last').height()) / 2) + "px 0px"
$(item).css('padding', paddingTobBottom)
})
}
if($(window).width() < 500) fixTheMobileNavigation()
推荐阅读
- reactjs - 如何配置 webpack-4 以生成多个块用于代码拆分?
- matlab - 如何将多张图像合并为一张并保存在matlab上?
- android - 使用 Kotlin 在 android 中初始化视图的编码标准
- javascript - 如何使用 Mysql 在 Node JS 中创建函数搜索?
- android - RecyclerView - 插入新项目时向下滚动
- authentication - 使用 Postman 进行 AAD B2C 授权的 Web Api 测试失败
- c# - 如何确保两个请求在不同时间发送?
- c# - 将值添加到列表 Linq 中的列表
- sql - 为什么我们不能使用减号关键字而不是减号
- java - 在openjdk中,安全策略没有生效