Bootstrap 4 - 全屏移动导航栏 [英] Bootstrap 4 - Fullscreen mobile navbar
问题描述
我想弄清楚如何在移动设备尺寸上制作全屏菜单(导航栏)，我的意思是当你按下汉堡菜单"时，导航栏(带有项目)应该占据所有视口.
我只是在写:
#navbarText{高度:100vh；}但是引导动画不像默认动画那样流畅，正如您在此处看到的(通常动画会逐渐增加 div 大小，反之亦然):
代码如下:
/*---标准汉堡菜单(3个独立元素)---*/.navbar-toggler {边界:无；背景:透明！重要；}.navbar-toggler:hover {背景:透明！重要；}.navbar-toggler .icon-bar {高度:2px；宽度:22px；边框半径:1px；显示:块；背景颜色:#B6B6B6；-webkit-transition:全部为 0.2s；过渡:全0.2s；}.navbar-toggler .icon-bar+.icon-bar {边距顶部:4px；}/*---动画菜单(创建X)---*/.navbar-toggler.x .icon-bar:nth-of-type(1) {-webkit-transform: translateX(3px)rotate(45deg);/* Safari 3-8 &铬 4-35 &歌剧 15-22 */-ms-transform: translateX(3px)rotate(45deg);/* IE 9 */-moz-transform: translateX(3px)rotate(45deg);/* 火狐 3-15 */-o-transform: translateX(3px)rotate(45deg);/* 歌剧 10-14 */变换:平移X(3px)旋转(45度)；-webkit-transform-origin: 10% 10%;-ms-transform-origin: 10% 10%;-moz-transform-origin: 10% 10%;-o-transform-origin: 10% 10%;变换原点:10% 10%；}.navbar-toggler.x .icon-bar:nth-of-type(2) {不透明度:0；过滤器:alpha(不透明度=0)；/* 对于 IE8 及更早版本 */-moz-不透明度:0；/* 较旧的 Firefox 1 */}.navbar-toggler.x .icon-bar:nth-of-type(3) {-webkit-transform: translateX(3px)rotate(-45deg);-ms-transform: translateX(3px)rotate(-45deg);-moz-transform: translateX(3px)rotate(-45deg);-o-transform: translateX(3px)rotate(-45deg);变换:平移X(3px)旋转(-45度)；-webkit-transform-origin: 10% 90%;-ms-transform-origin: 10% 90%;-moz-transform-origin: 10% 90%;-o-transform-origin: 10% 90%;变换原点:10% 90%；}.navbar-toggler.x.collapsed .icon-bar:nth-of-type(1) {-webkit-transform:旋转(0)；-ms-transform:旋转(0)；-moz 变换:旋转(0)；-o-变换:旋转(0)；变换:旋转(0)；}.navbar-toggler.x.collapsed .icon-bar:nth-of-type(2) {不透明度:1；过滤器:alpha(不透明度=100)；-moz-不透明度:1；}.navbar-toggler.x.collapsed .icon-bar:nth-of-type(3) {-webkit-transform:旋转(0)；-ms-transform:旋转(0)；-moz 变换:旋转(0)；-o-变换:旋转(0)；变换:旋转(0)；}/*---使导航栏(移动)的元素居中---*/.navbar-brand {字体大小:1rem；}/*---自定义AnimateCSS移动菜单项---*/.nav-item {-webkit-animation-duration: 0.8s;/* 铬 3-42 &Safari 4-8 &歌剧 15-29 */-moz-animation-duration: 0.8s;/* 火狐 5-15 */-o-animation-duration: 0.8s;/* 歌剧 12-14 */动画持续时间:0.8s；}@media only screen and (max-width: 991px) {#navbarText {高度:100vh！重要；}}@media only screen and (min-device-width: 992px) {.动画{/*CSS过渡*/-o-transition-property:无！重要；-moz-transition-property:无！重要；-ms-transition-property:无！重要；-webkit-transition-property:无！重要；过渡属性:无！重要；/*CSS变换*/-o-transform: 无 !important;-moz-transform:无！重要；-ms-transform:无！重要；-webkit-transform:无！重要；转换:无！重要；/*CSS动画*/-webkit-animation:无！重要；-moz-animation:无！重要；-o-动画:无！重要；-ms-animation:无！重要；动画:无！重要；}#navbarText {高度:自动；}}<头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><!-- TODO 在此处添加清单 --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="stylesheet" type="text/css" href="style.css"><!-- HTML5 shim 和 Respond.js 用于 IE8 对 HTML5 元素和媒体查询的支持 --><!-- 警告:如果您通过 file://查看页面，Respond.js 将不起作用 --><!--[如果是 IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><身体><nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark"><div class="d-flex align-items-center justify-content-between w-100"><button class="navbar-toggler navbar-toggler-left x 折叠" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="切换导航"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand mx-auto ml-lg-5" href="#"><img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="标志"></a><div class="collapse navbar-collapse mr-lg-5" id="navbarText"><ul class="navbar-nav ml-auto"><li class="nav-item active mx-2 animationfadeInDown"><a class="nav-link" href="#">HOME<span class="sr-only">(current)</span></a><li class="nav-item mx-2 动画淡入淡出"><a class="nav-link" href="#">PROJECTS</a><li class="nav-item mx-2 动画淡入淡出"><a class="nav-link" href="#">关于</a><li class="nav-item mx-2 动画淡入淡出"><a class="nav-link" href="#">CONTACT</a>
</nav><div><p>测试</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>ffff</p></html>
你知道修复它的方法吗??
如果你想编辑/测试代码，我也会留下一个链接到 Codeply
我查看了 Bootstrap JS 文件，我发现要实现这种效果，您只需要更改几行，更具体地说，是在何处定义折叠"功能(或多或少在第 1100 行).变化是:
Object.defineProperty(this._element, 'scrollHeight', {可写:真实，值:$(window).height()-$(".navbar").outerHeight()});置于 this._element 变量的赋值状态之后.有了这个，我们定义了 '.navbar-collapse' div 的最大尺寸，这就是为什么我们还要减去 $(".navbar").outerHeight() 值(它被引用的值)初始时刻，所以当菜单仍然隐藏时，因此我们减去 .navbar-brand div 的高度和最终父级的填充/边距).
我们需要这样做，因为'scrollHeight'属性(以及其他属性)默认是不可修改的，所以我们需要指定它.
最后的变化是删除了该行
_this._element.style[dimension] = '';我们这样做，因为否则当元素具有 'show' 属性时(它完成了动画)它不会占据整个屏幕，基本上是因为这一行删除了我们的自定义高度.
通过这些少量更改，我们实现了想要的结果，此解决方案的唯一缺点是我们失去了使用 CDN 处理此文件的能力，因为我们需要下载并更改它.
要清楚，这应该是更改后的文件:
<代码> ...var 折叠 = 函数 () {功能折叠(元素，配置){...this._element = 元素；//改变(1)Object.defineProperty(this._element, 'scrollHeight', {可写:真实，值:$(window).height()-$(".navbar").outerHeight()});this._config = this._getConfig(config);...}..._proto.show = 函数显示(){var complete = function complete() {.../* 更改 (2) - 删除_this._element.style[尺寸] = '';*/...};};...}...I'm trying to figure out how I can do a fullscreen menu (navbar) on mobile size, with this I mean that when you press on the 'hamburger-menu' the navbar (with the items) should occupy all the viewport.
I achieved this just writing:
#navbarText{
height: 100vh;
}
But the bootstrap animation isn't smooth like the default one, as you can see here (normally the animation increase the div size gradually and vice-versa when you close it):
Here the code:
/*---Standar Hamburger Menu (3 separate elements)---*/
.navbar-toggler {
border: none;
background: transparent !important;
}
.navbar-toggler:hover {
background: transparent !important;
}
.navbar-toggler .icon-bar {
height: 2px;
width: 22px;
border-radius: 1px;
display: block;
background-color: #B6B6B6;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.navbar-toggler .icon-bar+.icon-bar {
margin-top: 4px;
}
/*---Animation menu (create X)---*/
.navbar-toggler.x .icon-bar:nth-of-type(1) {
-webkit-transform: translateX(3px) rotate(45deg);
/* Safari 3-8 & Chrome 4-35 & Opera 15-22 */
-ms-transform: translateX(3px) rotate(45deg);
/* IE 9 */
-moz-transform: translateX(3px) rotate(45deg);
/* Firefox 3-15 */
-o-transform: translateX(3px) rotate(45deg);
/* Opera 10-14 */
transform: translateX(3px) rotate(45deg);
-webkit-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
-moz-transform-origin: 10% 10%;
-o-transform-origin: 10% 10%;
transform-origin: 10% 10%;
}
.navbar-toggler.x .icon-bar:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
/* For IE8 and earlier */
-moz-opacity: 0;
/* Older Firefox 1 */
}
.navbar-toggler.x .icon-bar:nth-of-type(3) {
-webkit-transform: translateX(3px) rotate(-45deg);
-ms-transform: translateX(3px) rotate(-45deg);
-moz-transform: translateX(3px)rotate(-45deg);
-o-transform: translateX(3px) rotate(-45deg);
transform: translateX(3px) rotate(-45deg);
-webkit-transform-origin: 10% 90%;
-ms-transform-origin: 10% 90%;
-moz-transform-origin: 10% 90%;
-o-transform-origin: 10% 90%;
transform-origin: 10% 90%;
}
.navbar-toggler.x.collapsed .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.navbar-toggler.x.collapsed .icon-bar:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
}
.navbar-toggler.x.collapsed .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/*---To center elements of the navbar (mobile)---*/
.navbar-brand {
font-size: 1rem;
}
/*---Custom AnimateCSS mobile menu items---*/
.nav-item {
-webkit-animation-duration: 0.8s;
/* Chrome 3-42 & Safari 4-8 & Opera 15-29 */
-moz-animation-duration: 0.8s;
/* Firefox 5-15 */
-o-animation-duration: 0.8s;
/* Opera 12-14 */
animation-duration: 0.8s;
}
@media only screen and (max-width: 991px) {
#navbarText {
height: 100vh !important;
}
}
@media only screen and (min-device-width: 992px) {
.animated {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
#navbarText {
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOME</title>
<!-- TODO add manifest here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
<div class="d-flex align-items-center justify-content-between w-100">
<button class="navbar-toggler navbar-toggler-left x collapsed" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand mx-auto ml-lg-5" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="Logo">
</a>
</div>
<div class="collapse navbar-collapse mr-lg-5" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active mx-2 animated fadeInDown">
<a class="nav-link" href="#">HOME<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mx-2 animated fadeInDown">
<a class="nav-link" href="#">PROJECTS</a>
</li>
<li class="nav-item mx-2 animated fadeInDown">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item mx-2 animated fadeInDown">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div>
<p>Test</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>ffff</p>
</body>
</html>
Do you know a way to fix it??
If you want to edit/test the code I also leave a link to Codeply
I looked at the Bootstrap JS file and I find out that to achieve this effect you just need to change a few lines, to be more specific, where it's defined the 'Collapse' function (more or less at the 1100th line). The changes are:
Object.defineProperty(this._element, 'scrollHeight', {
writable: true,
value: $(window).height()-$(".navbar").outerHeight()
});
Placed after the assignment state of the this._element variable. With this we are defining the maximum size of the '.navbar-collapse' div, and that's why we are also subtract $(".navbar").outerHeight() value (the value it's referred at the initial moment, so when the menu still hidden, so with this we subtract the .navbar-brand div's height and the eventual parent's padding/margin).
We need to do in this way, because the 'scrollHeight' property (and also the others) isn't modifiable by default so we need to specify it.
The last change is to remove the line
_this._element.style[dimension] = '';
We do so, because otherwise when the element has the 'show' attribute (it has finished the animation) it won't occupy all the screen, basically since this line remove our custom height.
With these few changes we achieve the wanted result, the only cons of this solution is that we lose the capability of using the CDN for this file, because we need to download it and change it.
To be clear, this should be the file after the changes:
...
var Collapse = function () {
function Collapse(element, config) {
...
this._element = element;
//CHANGE (1)
Object.defineProperty(this._element, 'scrollHeight', {
writable: true,
value: $(window).height()-$(".navbar").outerHeight()
});
this._config = this._getConfig(config);
...
}
...
_proto.show = function show() {
var complete = function complete() {
...
/* CHANGE (2) - Remove
_this._element.style[dimension] = ''; */
...
};
};
...
}
...
这篇关于Bootstrap 4 - 全屏移动导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
