javascript - 如何让我的垂直导航栏的文本在打开时保持在同一个位置？

所以我的元素中有一个垂直导航栏，我认为它几乎已经完成，但是当我单击“汉堡包”菜单(三行)时，导航栏内的文本在从关闭导航栏到打开导航栏的过渡期间以一种奇怪的方式移动.我希望它在导航栏打开时保持静止。此外，我正在使用 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()">&times;</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/

javascript - 如何让我的垂直导航栏的文本在打开时保持在同一个位置？

上一篇：html - 摆脱多余的空间

下一篇：css - 如何使用 css 更改 kendo UI angular 中开关的高度和宽度？