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

问题描述 投票：0回答：3

所以我的项目上有一个垂直导航栏，我认为它几乎已经完成，但是当我单击“汉堡”菜单（三行）时，导航栏内的文本在从关闭导航栏到打开导航栏的过渡过程中会以一种怪异的方式移动。我希望它在导航栏打开时保持静止。另外，我正在使用Bootstrap，希望能提供任何帮助，但如果它可以适合任何设备（响应性），我将不胜感激！

<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: 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;
}


    </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.width = "250px"; 
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

</script>


</body>
</html>
javascript html css twitter-bootstrap
3个回答
0
投票

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

0
投票

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

0
投票

像这样更改它：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.