如何使垂直导航栏的文本在打开时保持在同一位置？
[英]How do I make my vertical navbar's text stay at the same place when it opens?
问题描述
So I have a vertical navbar on my project and I think it's almost finalized but when I click on the "hamburger" menu (three lines) the text inside the navbar move in a weird way during the transition from close to open navbar.
所以我的项目上有一个垂直导航栏，我认为它几乎完成了，但是当我点击“汉堡包”菜单（三行）时，导航栏中的文本在从关闭导航栏到打开导航栏的转换过程中以一种奇怪的方式移动。 I would like it to stay still while the navbar opens.我希望它在导航栏打开时保持静止。 Also I'm using Bootstrap and I would appreciate any help but even more if it can fit any device (responsive) !此外，我正在使用 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>
3 个解决方案
解决方案1
0 2019-10-22 08:22:04
It looks like the issue you're having is because the width is gradually increased.看起来您遇到的问题是因为宽度逐渐增加。
This means that as it grows, the text goes broken over 2 lines on your longer link names.这意味着随着它的增长，文本会在较长的链接名称上超过 2 行。 See example in the image below:请参见下图中的示例：
There would be a few ways to fix this but I think the simplest would be to add a min-width: 200px;有几种方法可以解决这个问题，但我认为最简单的方法是添加一个min-width: 200px; to your .sidenav a selector like so:给你的.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; }
See this JS Fiddle for an example有关示例，请参见此 JS Fiddle
解决方案2
0 2019-10-22 08:24:15
Instead of width you need to set the left position to remove the flickering text issue.您需要设置左侧 position 而不是宽度，以消除闪烁的文本问题。 Please refer to the below demo.请参考下面的演示。
Working Demo Code工作演示代码
<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()">×:</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>
解决方案3
0 2019-10-22 08:26:23
change it like this:像这样改变它：
.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>
you are changing the width while your text font is set to a static number.当您的文本字体设置为 static 数字时，您正在更改宽度。 so while you are changing the width the html is trying to set the text of same length to a different width, and there is nothing to do with it.因此，当您更改宽度时，html 正在尝试将相同长度的文本设置为不同的宽度，这与它无关。 So instead of changing the width.所以不要改变宽度。 just create a static "box", put it to the left so it wouldn't be seen, and bring it right after clicking on a button.只需创建一个 static “盒子”，将其放在左侧，这样就不会被看到，然后在单击按钮后将其带到右侧。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何创建导航栏，单击该导航栏会在同一页面上将其打开？ - How do I creat a navbar that when clicked it opens on the same page?
如何让我的箭头文本保持在fullpage.js上的正确位置？ - How do I get my arrow text to stay in the right place on fullpage.js?
如何使滑块控件保持在同一位置 - How can i make my slider controls stay at the same position
当查看器滚动时，如何使网站的导航栏位于顶部？ - How do I make the navigation bar of my site stay at the top when the viewer scrolls?
如何让我的粘性导航栏保持在 Chakra-UI 的最前面 - How can I make my sticky navbar stay at the front in Chakra-UI
刷新页面后如何使我的导航栏保持活动状态？ - how to make my navbar stay active after refresh page?
我试图在用户向下滚动时修复我的导航栏，但是当我向下滚动时它不会停留 - I'm trying to make my navbar fixed when the user scrolls down, but when I scroll down it doesn't stay
调整窗口大小后如何使我的网站停留 - How can I make my website stay when window is resized
切换页面时如何保持灯光模式？ - how do i make light mode stay when switching pages?
在React中滚动时，如何使导航栏突出显示？ - How do I make my navbar highlight as I scroll in React?
相关标签