如何使垂直導航欄的文本在打開時保持在同一位置？
[英]How do I make my vertical navbar's text stay at the same place when it opens?
問題描述
所以我的項目上有一個垂直導航欄，我認為它幾乎完成了，但是當我點擊“漢堡包”菜單（三行）時，導航欄中的文本在從關閉導航欄到打開導航欄的轉換過程中以一種奇怪的方式移動。 我希望它在導航欄打開時保持靜止。 此外，我正在使用 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
看起來您遇到的問題是因為寬度逐漸增加。
這意味着隨着它的增長，文本會在較長的鏈接名稱上超過 2 行。 請參見下圖中的示例：
有幾種方法可以解決這個問題，但我認為最簡單的方法是添加一個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
解決方案2
0 2019-10-22 08:24:15
您需要設置左側 position 而不是寬度，以消除閃爍的文本問題。 請參考下面的演示。
工作演示代碼
<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
像這樣改變它：
.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>
當您的文本字體設置為 static 數字時，您正在更改寬度。 因此，當您更改寬度時，html 正在嘗試將相同長度的文本設置為不同的寬度，這與它無關。 所以不要改變寬度。 只需創建一個 static “盒子”，將其放在左側，這樣就不會被看到，然后在單擊按鈕后將其帶到右側。
如何讓我的箭頭文本保持在fullpage.js上的正確位置？
[英]How do I get my arrow text to stay in the right place on fullpage.js?
當查看器滾動時，如何使網站的導航欄位於頂部？
[英]How do I make the navigation bar of my site stay at the top when the viewer scrolls?
我試圖在用戶向下滾動時修復我的導航欄，但是當我向下滾動時它不會停留
[英]I'm trying to make my navbar fixed when the user scrolls down, but when I scroll down it doesn't stay
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.