CSS эффект открытия и закрытия части боковой панели - PullRequest
Новая
       21

CSS эффект открытия и закрытия части боковой панели

0 голосов
/ 27 января 2020

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

enter image description here

Я пытался с hover, но он не работает.

(Мой пример можно найти по следующему codepen )

(правка) -> Перемещено сюда во фрагмент: 

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: width 0.15s linear;
}

.sidebar:hover {
  width: 240px; 
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DashboardSwgoh</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 27 января 2020

Элемент боковой панели имеет position: absolute, поэтому вместо изменения width при наведении можно использовать параметр left как в обычном правиле, так и в правиле hover и настройке перехода для перемещения (также частично за кадром) весь элемент (не изменять его ширину): 

.sidebar {
  position: absolute;
  left: -200px;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: left 0.15s linear;
}

.sidebar:hover {
  left: 0px; 
}

Вот полный пример: 

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  left: -200px;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: left 0.15s linear;
}

.sidebar:hover {
  left: 0px; 
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}
  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>
1 голос
/ 27 января 2020

Существует большая производительность рендеринга причина, по которой НЕ анимация (переход) left свойство.

Поэтому я бы рекомендовал использовать transform: translateX() вместо: 

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s linear;
  transform: translateX(-200px)
}

.sidebar:hover {
  transform: translateX(0)
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DashboardSwgoh</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>
</body>
</html>
...