时间戳

首页 > 解决方案 > 侧边栏开闭部分CSS效果

css - 侧边栏开闭部分CSS效果

问题描述

我试图对 css 做同样的效果来打开和关闭侧边栏，如下面的 gif 所示，但我没有得到它。

在此处输入图像描述

我试过了，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>

标签： csssidebar

解决方案

您的侧边栏元素具有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>

推荐阅读