CSS Проблема выравнивания на панели навигации - PullRequest
Новая
       0

CSS Проблема выравнивания на панели навигации

0 голосов
/ 17 февраля 2020

В настоящее время я создаю панель навигации, которая расширяется и сворачивается независимо от того, находится мышь над или вне навигационной панели. Моя проблема заключается в том, что при развертывании панели навигации мои значки выравниваются по центру, но я sh должен располагать их именно там, где они находятся до развертывания панели навигации. Я выровнял их по центру, потому что значки не одного размера и выглядят «не на своем месте» без него, когда сворачивается панель навигации. 

let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
  //document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

.expand {
  transform: rotate(180deg);
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
  text-align: center;
}

#links li {
  padding: 18px;
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading" style="display:none;">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

И ссылка JSFiddle: https://jsfiddle.net/h86zf4d3/

Я попытался выпустить мои значки влево как Вы можете видеть из закомментированного кода JS, однако, по некоторым причинам, это избавляет от отображения блока для элементов списка.

Ответы [ 4 ]

0 голосов
/ 17 февраля 2020

Я просто добавил float: left к CSS для #links, и мне это хорошо смотрится.

Они по-прежнему выровнены по центру в свернутой версии, потому что я не удалил линия прямо над ней, которая говорит text-align: center;. Однако они больше не меняют положение при открытии меню.

См. Фрагмент ниже: 

let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
};
sidenav.onmouseout = function() {
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

.expand {
  transform: rotate(180deg);
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
  text-align: center;
  float: left;
}

#links li {
  padding: 18px;
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading" style="display:none;">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>
0 голосов
/ 17 февраля 2020

почему бы просто не разместить их слева? 

#links li{
  text-align:left;
}
0 голосов
/ 17 февраля 2020

Чтобы все заработало, измените #links{text-align:left}. И ваша проблема с размером иконки - класс fa-fw. все значки будут одинакового размера. 

Check the snippest below:


let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
  //document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

.expand {
  transform: rotate(180deg);
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
  text-align: left;
}

#links li {
  padding: 18px;
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Navigation Bar</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
  </head>

  <body>
    <div id="sidenav">
      <div id="sidenav-brand">
        <div id="sidenav-heading" style="display:none;">
          <h2>Expanded</h2>
        </div>
        <div id="sidenav-expand">
          <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
        </div>
      </div>

      <div id="sidenav-links">
        <ul id="links">
          <li>
            <i class="fas fa-fw fa-id-card fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-graduation-cap fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-briefcase fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-smile-beam fa-2x"></i>
          </li>
        </ul>
      </div>
    </div>
  </body>

</html>
0 голосов
/ 17 февраля 2020

Просто удалите правило text-align: center для элемента #links. Также я отредактировал ваш css, добавив некоторые :hover правила, чтобы избежать использования javascript: 

#sidenav {
  height: 100%;
  min-width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav:hover {
  width: 280px;
}

#sidenav:hover #expand-icon {
  transform: rotate(180deg);
}

#sidenav:hover #sidenav-heading {
  display: inline-block;
}

#sidenav #sidenav-heading {
  display: none;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
}

#links li {
  padding: 18px 20px;
  /* <-- Add some padding*/
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...