Анимация бокового меню при наведении курсора

Я хочу, чтобы по умолчанию отображались только значки, и при наведении курсора сдвиньте боковое меню в текущее состояние, которое вы видите в jsfiddle.

заранее спасибо

https://jsfiddle.net/aq9Laaew/228/

<div id="sidebar">
    <div class="sidebar-wrapper">
        <div class="profile-menu d-flex flex-column flex-grow">
            <div class="sidebar-item">
                <a class="d-flex" href="/">
                    <i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
                    <span>Home</span>
                </a>
            </div>
            <div class="sidebar-item">
                <a class="d-flex" href="/profile">
                    <i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
                    <span>Profile</span>
                </a>
            </div>
            <div class="sidebar-item">
                <a class="d-flex" href="/profile/messages">
                    <i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
                    <span>Messages</span>
                </a>
            </div>
        </div>
    </div>
</div>

не понятно, что ты говоришь

Muhammad Usman 11.04.2018 13:30

Я хочу, чтобы в боковом меню отображались только значки, подобные этому jsfiddle.net/aq9Laaew/250, и при наведении курсора отображался исходный jsfiddle, который я опубликовал

Asaf Aviv 11.04.2018 13:35

обе скрипки одинаковые

Muhammad Usman 11.04.2018 13:37

можешь проверить еще раз, пожалуйста?

Asaf Aviv 11.04.2018 13:38
1
4
86
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете сделать это, изменив значения навигационной панели при наведении следующим образом:

    #sidebar {
        letter-spacing: 0.1em;
        font-weight: 500;
        border-right: 1px solid #797979;
        padding-top: 50px;
        position: fixed;
        z-index: 1000;
        width: 65px;
        height: 100vh;
        background: #2c2c2c;
        transition:1s;
    }
    #sidebar:hover{
      width: 259px;
    }
    #sidebar:hover .sidebar-item span{
      opacity:1;
    }
    .sidebar-item {
        padding: 10px 20px;
        border-left: 5px solid transparent;
    }
    .sidebar-item span{
      opacity:0;
      transition:1s;
    }
    .sidebar-active {
        border-left: 5px solid #b1a0ff;
        color: #b1a0ff;
        background: #474747;
    }
    .sidebar-item a {
        align-items: center;
    }
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <div id="sidebar">
        <div class="sidebar-wrapper">
            <div class="profile-menu d-flex flex-column flex-grow">
                <div class="sidebar-item">
                    <a class="d-flex" href="/">
                        <i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
                        <span>Home</span>
                    </a>
                </div>
                <div class="sidebar-item">
                    <a class="d-flex" href="/profile">
                        <i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
                        <span>Profile</span>
                    </a>
                </div>
                <div class="sidebar-item">
                    <a class="d-flex" href="/profile/messages">
                        <i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
                        <span>Messages</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

именно то, что я хотел, ты

Asaf Aviv 11.04.2018 13:40

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

Он анимирует метку при наведении курсора, используя относительное положение и переход CSS. Это связано с некоторыми изменениями в HTML.

https://jsfiddle.net/Chipmo/111dd0sj/1/

#sidebar {
  letter-spacing: 0.1em;
  font-weight: 500;
  border-right: 1px solid #797979;
  padding-top: 50px;
  position: fixed;
  z-index: 1000;
  width: 259px;
  height: 100vh;
  background: #2c2c2c;
}

.sidebar-item {
  padding-top: 20px;
}

.sidebar-item a {
  align-items: center;
}

.sidebar-item i {}

.sidebar-left-cover {
  background: #2c2c2c;
  width: 40px;
  height: 100%;
  z-index: 2;
  padding-left: 20px;
}

.sidebar-item .sidebar-label {
  position: relative;
  right: 100px;
  transition: right 0.5s;
  z-index: 1;
}

.sidebar-item:hover .sidebar-label {
  right: -5px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
  <div class="sidebar-wrapper">
    <div class="profile-menu d-flex flex-column flex-grow">
      <div class="sidebar-item">
        <a class="d-flex" href="/">
          <div class="sidebar-left-cover">

            <i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
          <span class="sidebar-label">Home</span>
        </a>
      </div>
      <div class="sidebar-item">
        <a class="d-flex" href="/profile">
          <div class="sidebar-left-cover">

            <i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
          </div>
          <span class="sidebar-label">Profile</span>
        </a>
      </div>
      <div class="sidebar-item">
        <a class="d-flex" href="/profile/messages">
          <div class="sidebar-left-cover">

            <i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
          <span class="sidebar-label">Messages</span>
        </a>
      </div>
    </div>
  </div>
</div>

Другие вопросы по теме