如何使用 CSS 使导航栏链接在关闭时不变形？

Question

我有一个问题，当我关闭侧边导航栏时，链接会变形为导航栏的大小。我希望链接（在下图中以粉红色圈出）保持相同大小而不变形。有没有办法用 CSS 做到这一点？谢谢！

这是我的代码笔：https://codepen.io/toshvelaga/pen/OJymXxO

这是导航栏和导航栏链接的 CSS：

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 1.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: #818181;
  display: block;
  text-decoration: none;
  margin-left: 1rem;
}

这里是改变导航栏宽度的JS：

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
}

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

Answer 1

****编辑**** 更好的方法（根据安迪）是只使用 white-space: nowrap; 我认为 JS 调整宽度会弄乱它，但我错了。我会改成那个。 :)

只需将 min-width: 300px; 添加到您的 .side-bar CSS

这是有效的代码笔。 :)

The codepen

Answer 2

最具体的方法是在链接上使用 white-space: nowrap。这是首选，因此您无需使用 300px.

等硬编码数字

.sidenav a {
  white-space: nowrap;
}

演示

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
}

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

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 1.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: #818181;
  display: block;
  text-decoration: none;
  margin-left: 1rem;
  white-space: nowrap;
}

.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: 120px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About the Site</a>
  <a href="#">Service Terms</a>
  <a href="#">All Our Clients</a>
  <a href="#">Contact Us for More Information</a>
</div>

<h2>How do I make the sidenav links not decrease in size when the sidenav closes?</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

如何使用 CSS 使导航栏链接在关闭时不变形？

How do I make navbar links not warp on close using CSS?

html

css

navbar