Как сделать так, чтобы ссылки navbar не деформировались при закрытии, используя CSS? - PullRequest
Новая
       10

Как сделать так, чтобы ссылки navbar не деформировались при закрытии, используя CSS?

0 голосов
/ 26 апреля 2020

У меня проблема в том, что когда я закрываю боковую панель навигации, ссылки деформируются до размера панели навигации. Я хочу, чтобы ссылки (обведенные розовым цветом на изображении ниже) оставались одинаковыми по размеру и не деформировались. Есть ли способ сделать это с CSS? Спасибо!

Вот мой код: https://codepen.io/toshvelaga/pen/OJymXxO

Вот CSS для ссылок navbar и navbar: 

.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";
}

enter image description here

Ответы [ 2 ]

2 голосов
/ 26 апреля 2020

**** РЕДАКТИРОВАТЬ **** Лучший способ сделать это (согласно Энди) - просто использовать white-space: nowrap; Я думал, что JS регулировка ширины может испортить это, но я ошибся. Я бы изменил это на это. :)

Просто добавьте min-width: 300px; к своей боковой панели. CSS

Вот кодовое авторучка, которая работает. :)

Кодовая ручка

1 голос
/ 26 апреля 2020

Наиболее конкретный c способ сделать это - использовать 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>
...