Question

为什么引导程序与汉堡菜单显示冲突？

汉堡菜单的“打开”和“关闭”按钮在左侧，但是当我添加自举CSS线时，汉堡关闭按钮会浮动到正确的位置！当我删除那行是好的。我该如何解决？

代码：

function openNavbar () {
	document.querySelector("#navbar").style.width="100%";
	document.querySelectorAll(".open")[0].style.opacity = 0;
}
function closeNavbar () {
	document.querySelector("#navbar").style.width="0";
	document.querySelectorAll(".open")[0].style.opacity = 1;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html,body{
	width: 100%;
	height: 100%;
	background: url("https://images.pexels.com/photos/1096658/pexels-photo-1096658.jpeg?auto=compress&cs=tinysrgb&h=650&w=940") center/cover no-repeat;
	font: bold 1rem Consolas;
}

.open, .close{
	display: inline-block;
	padding:30px 0 0 30px;
	cursor: pointer;
	font-size:2rem;
	color:#fff;
	text-decoration: none;
	transition: .5s;
}

.overlay{
	position: fixed;
	width: 0;
	top: 0;
	background-color: #333;
	opacity: .7;
	overflow-x: hidden;
	height: 100%;
	transition: .5s;
}

.overlay-content{
	text-align: center;
	position: relative;
	width: 100%;
	padding-top: 50px;
	margin-top: 30px;
}

.overlay-content a {
	font-size: 2rem;
	color:#fff;
	display: block;
	padding:10px;
	margin-bottom: 4px;
	text-decoration: none;
	transition: .3s;
	position: relative;

}
.overlay-content a:after{
	content: "";
	position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 3px;
    background:#fff;
    transition: .3s;
    display: block;

}
.overlay-content a:hover{
	color:#ff9f1a;
}

.overlay-content a:hover:after{
	width: 25%;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">


</head>
<body>

        <span class="open" onclick="openNavbar()">&#9776; Menu</span>
        <div id="navbar" class="overlay">
        <a href="javascript:void(0);" onclick="closeNavbar()" class="close">&#9932;</a>
        <div class="overlay-content">
        <a href="javascript:void(o);">Home</a>
        <a href="javascript:void(o);">Portfolio</a>
        <a href="javascript:void(o);">Services</a>
        <a href="javascript:void(o);">About</a>
        <a href="javascript:void(o);">Contact</a>
        </div>
        </div>



</body>

Answer 1

如果要在打开菜单时将关闭按钮保持在左侧，则必须设置float: none;来防止float: right;类帮助程序设置的默认close引导程序（更多信息here）。

因此，在您的a链接上，像这样应用style="float:none;"：

<a style="float:none;" href="javascript:void(0);" onclick="closeNavbar()" class="close">⛌</a>

或者您可以使用引导程序的float-none助手：

<a href="javascript:void(0);" onclick="closeNavbar()" class="close float-none">⛌</a>和关闭按钮将保留在左侧。

以下示例：

function openNavbar () {
	document.querySelector("#navbar").style.width="100%";
	document.querySelectorAll(".open")[0].style.opacity = 0;
}
function closeNavbar () {
	document.querySelector("#navbar").style.width="0";
	document.querySelectorAll(".open")[0].style.opacity = 1;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html,body{
	width: 100%;
	height: 100%;
	background: url("https://images.pexels.com/photos/1096658/pexels-photo-1096658.jpeg?auto=compress&cs=tinysrgb&h=650&w=940") center/cover no-repeat;
	font: bold 1rem Consolas;
}

.open, .close{
	display: inline-block;
	padding:30px 0 0 30px;
	cursor: pointer;
	font-size:2rem;
	color:#fff;
	text-decoration: none;
	transition: .5s;
}

.overlay{
	position: fixed;
	width: 0;
	top: 0;
	background-color: #333;
	opacity: .7;
	overflow-x: hidden;
	height: 100%;
	transition: .5s;
}

.overlay-content{
	text-align: center;
	position: relative;
	width: 100%;
	padding-top: 50px;
	margin-top: 30px;
}

.overlay-content a {
	font-size: 2rem;
	color:#fff;
	display: block;
	padding:10px;
	margin-bottom: 4px;
	text-decoration: none;
	transition: .3s;
	position: relative;

}
.overlay-content a:after{
	content: "";
	position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 3px;
    background:#fff;
    transition: .3s;
    display: block;

}
.overlay-content a:hover{
	color:#ff9f1a;
}

.overlay-content a:hover:after{
	width: 25%;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">


</head>
<body>

        <span class="open" onclick="openNavbar()">&#9776; Menu</span>
        <div id="navbar" class="overlay">
        <a style="float:none;" href="javascript:void(0);" onclick="closeNavbar()" class="close">&#9932;</a>
        <div class="overlay-content">
        <a href="javascript:void(o);">Home</a>
        <a href="javascript:void(o);">Portfolio</a>
        <a href="javascript:void(o);">Services</a>
        <a href="javascript:void(o);">About</a>
        <a href="javascript:void(o);">Contact</a>
        </div>
        </div>



</body>

引导程序冲突汉堡包菜单显示

1 个答案: