代码之家  ›  专栏  ›  技术社区  ›  rafaelcb21

边栏开闭部分的CSS效果

sidebar css
  •  0
  • rafaelcb21  · 技术社区  · 5 年前

    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 回复  |  直到 5 年前
        1
  •  2
  •   Johannes    5 年前

    你的侧边栏元素有 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>
        2
  •  1
  •   Kosh    5 年前

    你可能会改变 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>
    推荐文章
    catandmouse  ·  如何在Wordpress中按“年”然后按“月”显示“归档”小部件布局(侧栏)?
    7 年前
    op1001  ·  容器高度颜色不填充-底部的页脚向上移动
    7 年前
    Julez  ·  引导程序侧栏上图标旁边的文本对齐方式
    7 年前
    Rafhael Carrión Limaymanta  ·  当屏幕达到660px时,如何隐藏边栏引导
    7 年前
    DrMTR  ·  如何在WooCommerce中从右向左移动边栏?
    7 年前
    StuffedPoblano  ·  reactjs侧菜单功能
    7 年前
    aaayumi  ·  状态更新时更改FontAwesomeIcon(React.JS)
    7 年前
    Aderbal Nunes  ·  显示侧栏Material Design Lite的自定义按钮
    8 年前
    slytrkmn  ·  调用中缺少参数标签“coder:”
    8 年前
    Wessel Visser  ·  将侧边栏粘贴到顶部?
    10 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号