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

时间：2019-10-22 07:58:27

标签： javascript html css twitter-bootstrap

所以我的项目上有一个垂直导航栏，我想它几乎已经完成，但是当我单击“汉堡”菜单（三行）时，导航栏内的文本在从关闭导航栏到打开导航栏的过渡过程中会以一种奇怪的方式移动。我希望它在导航栏打开时保持静止。 另外，我正在使用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>

3 个答案:

答案 0 :(得分：0)

您似乎遇到的问题是宽度逐渐增加。

这意味着随着文本的增长，您的较长链接名称上的文本会分成2行。请参见下图中的示例：

enter image description here

有几种方法可以解决此问题，但我认为最简单的方法是将min-width: 200px;添加到.sidenav a选择器中，如下所示：

.sidenav a {
  padding: 8px 0px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.1s;
  min-width: 200px;
}

有关示例，请参见此JS Fiddle

答案 1 :(得分：0)

您需要设置左侧位置而不是宽度，以消除闪烁的文本问题。 请参考下面的演示。

工作演示代码

<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>

<style>
  /* Code du Navbar à 3 lignes*/
  
  .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: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -250px;
    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;
  }
</style>

<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>


  <script>
    function openNav() {
      document.getElementById("mySidenav").style.left = "0px";
    }

    function closeNav() {
      document.getElementById("mySidenav").style.left = "-250px";
    }
  </script>


</body>

</html>

答案 2 :(得分：0)

像这样更改它：

    .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会尝试将相同长度的文本设置为不同的宽度，并且与此无关。因此，而不是更改宽度。只需创建一个静态“框”，然后将其放在左侧，这样就不会看到它，并在单击按钮后将其移到右侧。

相关问题
最新问题