使側邊欄線性折疊並避免垂直錯位

Question

我已經實現了一個側邊欄，折疊 function （ for minimizing the sidebar ）工作得很好，但是每當我再次單擊“折疊”以maximize側邊欄時，側邊欄中的元素在幾毫秒內未對齊，並且徽標文本出現在上方身體。 請看下面的圖片

我怎樣才能使它更平滑並避免錯位？ 它應該是線性的，沒有任何垂直變化。

我已經嘗試了很多東西，但我無法讓它發揮作用。

JS FIDDLE 現場演示

Answer 1

由於您基本上將側邊欄最小化為width: 0當屏幕寬度達到786px時，您可以讓徽標和整個側邊欄內容消失。 請參閱this this JS fiddle ，我在您的媒體查詢中添加了一些 css 樣式，以便在您的媒體查詢為真時不顯示徽標。

@media (max-width: 768px) {
  svg, #sidebarLinks{
    display: none;
  }
}

編輯：如果您想使用切換按鈕最小化和展開側邊欄並保留圖標，那么您應該將圖標與其標題/描述分開，並在單擊切換按鈕時僅隱藏標題/描述。 每次單擊時使用.style.property更改側邊欄width 。 無論如何，這里有一個關於這個相同功能的視頻教程。

Answer 2

超過一定寬度，您的圖標和文本必然會環繞或重疊。 這不是真正的錯位，而是默認行為。

您可以做的是在最小化/最大化側邊欄上減小文本的字體大小，寬度范圍為 0px 到 150px，將文本字體大小更改為更小。 您還可以使用 vmin、vmax 代替 px 或 rem 來表示字體大小。 此外，通過將 0 更改為.card class 中的特定值來限制側邊欄的最小寬度。

或者，您只能在折疊時顯示圖標並隱藏文本。