Позиционирование текста заголовка панели навигации - PullRequest
Новая
       0

Позиционирование текста заголовка панели навигации

1 голос
/ 18 февраля 2020

У меня есть панель навигации, которая будет расширяться, когда мышь находится над ней. Чтобы отобразить текст заголовка после его раскрытия (в данный момент отображаются значки), я использовал display: none для тега заголовка, который затем переключается на display: inline-block, когда на панели навигации активно событие :hover. Однако после расширения панели навигации текст рендерится в две строки, прежде чем позиционировать себя в ту, которую я хочу. Я хочу избавиться от этого и сделать так, чтобы текст отображался одной строкой только при расширении панели навигации. Мой код: 

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

  <body>
    <div id="sidenav">
      <div id="sidenav-brand">
        <div id="sidenav-heading">
          <h2>Expanded Test</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>


body {
}

/* Make the width full-size then use javascript to minimise so content fits */
#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: width 0.5s;
}

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

#sidenav-heading {
  display: none;
}

#sidenav-heading h2 {
  margin: 0;
  color: white;
}

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

#expand-icon {
  transition: transform 0.5s;
}

#sidenav:hover {
  width: 280px;
}

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

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

#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;
}

.fas {
  vertical-align: middle;
}

Пожалуйста, проверьте эту скрипку для того, что я имею в виду, когда расширяется панель навигации: https://jsfiddle.net/4pk25oLh/

PS Эффект, который я хочу, это так же, как когда вы избавляетесь от пробела в тексте заголовка (впрочем, мне понадобится пробел). Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

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

Вместо использования свойства display вы можете создать для этого классную анимацию затухания.
Сначала добавьте white-space: nowrap к <h2>, чтобы текст не переносился.
Затем вы используете такие свойства как видимость, непрозрачность, максимальная ширина и переход для создания эффекта. 

body {
}

/* Make the width full-size then use javascript to minimise so content fits */
#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: width 0.5s;
}

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

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

#sidenav-heading h2 {
  margin: 0;
  color: white;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  transition: 0.16s;
  visibility: hidden;
}

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

#expand-icon {
  transition: transform 0.5s;
}

#sidenav:hover {
  width: 280px;
}

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

#sidenav:hover #sidenav-heading h2 {
  opacity: 1;
  max-width: 100vw;
  visibility: visible;
  transition: 0.4s 0.5s;
}

#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;
}

.fas {
  vertical-align: middle;
}
0 голосов
/ 18 февраля 2020

Пожалуйста, обновите ниже CSS селекторов в вашем файле стиля или CSS: 

             body {
                  }

            /* Make the width full-size then use javascript to minimise so content fits */
            #sidenav {
              height: 100%;
              width: 75px;
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
              background-color: #1e1e2d;
              overflow-x: hidden;
              color: grey;
              transition: width 0.5s;
            }

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

            #sidenav-heading {
              display: inline-block;
              position: absolute;
              width: 240px;
              left: 20px;
              transition: opacity 0.3s;
              -webkit-transition: opacity 0.3s;
              opacity: 0;
            }

            #sidenav-heading h2 {
              margin: 0;
              color: white;
            }

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

            #expand-icon {
              transition: transform 0.5s;
            }

            #sidenav:hover {
              width: 280px;
            }

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

            #sidenav:hover #sidenav-heading {
              opacity: 1;
            }

            #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;
            }

            .fas {
              vertical-align: middle;
            }
<link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script
      src="https://kit.fontawesome.com/6cc49d804e.js"
      crossorigin="anonymous"
    ></script>
<div id="sidenav">
      <div id="sidenav-brand">
        <div id="sidenav-heading">
          <h2>Expanded Test</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>
0 голосов
/ 18 февраля 2020

Я думаю white-space: nowrap; может помочь. 

 #sidenav-heading h2 {
      margin: 0;
      color: white;
      white-space: nowrap;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...