此文章只讲述鼠标悬停触发侧边栏
一、右侧侧边栏
html:
<div id="side-menu">
<div id="side-menu-inner">
this is menu content
</div>
</div>
css:
#side-menu {
background-color: lightgrey;
display: block;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
width: 250px;
transition: transform 200ms ease-in;
transform: translateX(calc(-24px + 100%));
}
#side-menu:hover {
transform: translateX(0px);
}
#side-menu-inner {
display: block;
height: 100%;
width: calc(-24px + 100%);
transform: translateX(24px);
background-color: red;
}
效果如下:
二、左侧侧边栏
html:
<div id="side-menu">
<div id="side-menu-inner">
this is menu content
</div>
</div>
css:
#side-menu {
background-color: lightgrey;
display: block;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 250px;
transition: transform 200ms ease-in;
transform: translateX(calc(-100% + 24px));
}
#side-menu:hover {
transform: translateX(0px);
}
#side-menu-inner {
display: block;
height: 100%;
width: calc(100% - 24px);
background-color: red;
}
效果如下: