因此,我的项目上有一个垂直导航栏,我认为它几乎已经完成,但是当我单击“汉堡”菜单(三行)时,导航栏内的文本在从关闭导航栏到打开导航栏的过渡过程中会以一种怪异的方式移动。我希望它在导航栏打开时保持静止。
另外,我正在使用Bootstrap,希望能为您提供任何帮助,但如果它可以适合任何设备(响应),我将为您提供更多帮助!
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.nav div {
height: 4px; /*4px*/
background-color: white;
margin : 5px 0;/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;/*30px*/
display: block;
margin : 1em 0 0 1em;
}
.one {
width: 30px;/*30px*/
}
.two {
width: 25px;/*25px*/
}
.three {
width: 20px;/*20px*/
}
.nav:hover div{
width: 30px;/*30px*/
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition : 0.1s;/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul{
display: block;
}
.scroll {
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class ="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;" >
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable ="false">
<div class="one" style="background-color: black;" draggable ="false"></div>
<div class="two" style="background-color: black;" draggable ="false"></div>
<div class="three" style="background-color: black;" draggable ="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<ul class = "mainNav">
<li><a href="#active" draggable ="false">Home</a></li>
<div >
<li><a href="#" draggable ="false">Catalog</a>
<div class="scroll">
<div class ="tops">
<ul><a href="#" style="font-size: 20px" draggable ="false">Tops</a>
<li><a href="#" style="font-size: 14px" draggable ="false">Tees + Tanks</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Graphic Tees</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Shirts</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Polos</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Hoodies + Sweatshirts</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Sweaters + Cardigans</a></li>
</ul>
</div>
<div class="bottoms">
<ul><a href="#" style="font-size: 20px" draggable ="false">Bottoms</a>
<li><a href="#" style="font-size: 14px" draggable ="false">Jeans</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Shorts</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Pants</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Joggers</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Overrall</a></li>
</ul>
</div>
<div class="S&A">
<ul><a href="#" style="font-size: 20px" draggable ="false">Shoes and accessories</a>
<li><a href="#" style="font-size: 14px" draggable ="false">Shoes</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Sunglasses & Readers</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Jewelry</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Watches</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Socks & Underwear</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Hats & Beanies</a></li>
<li><a href="#" style="font-size: 14px" draggable ="false">Bags & Backpacks</a></li>
</ul>
</div>
<ul><a href="#" style="font-size: 20px" draggable ="false">Sales</a></ul>
</div>
</li>
</div>
<li><a href="#" draggable ="false">About</a></li>
<li><a href="#" draggable ="false">Contact</a></li>
</div>
</ul>
</div>
</div>
</body>
</html>
最佳答案
像这样更改它:
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
<script>
function openNav() {
document.getElementById("mySidenav").style.left ="0";
}
function closeNav() {
document.getElementById("mySidenav").style.left ="-250";
}
</script>
您正在将文本字体设置为静态数字时更改宽度。因此,当您更改宽度时,html会尝试将相同长度的文本设置为不同的宽度,并且与此无关。因此,无需更改宽度。只需创建一个静态“框”,然后将其放在左侧,这样就不会看到它,并在单击按钮后将其带到右边。
关于javascript - 垂直导航栏的文本打开时如何保持在同一位置?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58499569/