我正在实现找到的here侧边栏,但是需要它从右侧滑入并且我不确定如何反转x轴的方向。
我认为可能会起作用的
#sidebar-nav {
transform: translateX(calc(100%+244px));
&:target {
transform: translateX(100%);
}
}
但这会导致页面宽度额外增加244px。
[Codepen] https://codepen.io/seanfree/pen/EgQRwg
完整代码:
HTML
html, body {
width: 100%;
color: white;
font-family: "Roboto", sans-serif;
}
::-moz-selection {
background: transparent;
}
::selection {
background: transparent;
}
a {
color: white;
text-decoration: none;
}
#background {
position: fixed;
z-index: 0;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/hot-air-balloons.jpg");
background-size: cover;
background-position: center center;
opacity: 0.2;
}
#fab {
position: fixed;
z-index: 1;
right: 30px;
bottom: 30px;
height: 60px;
width: 60px;
border-radius: 50%;
background-color: #f55e22;
box-shadow: 0 2px 8px #3f3f3f;
text-align: center;
line-height: 60px;
font-size: 1.75em;
cursor: pointer;
}
#fab:active {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
#page-header {
position: fixed;
z-index: 1;
top: 0;
left: 0;
height: 60px;
width: 100vw;
background-color: #0a94ab;
box-shadow: 0 -3px 8px 5px #3f3f3f;
}
#page-header #hamburger {
position: relative;
display: block;
top: 15px;
left: 15px;
height: 30px;
width: 30px;
}
#page-header #hamburger .line {
position: absolute;
display: block;
left: 5px;
height: 2px;
background-color: white;
}
#page-header #hamburger .line:first-of-type {
-webkit-transform: translateY(8px);
transform: translateY(8px);
width: 20px;
}
#page-header #hamburger .line:nth-of-type(2) {
-webkit-transform: translateY(15px);
transform: translateY(15px);
width: 18px;
}
#page-header #hamburger .line:last-of-type {
-webkit-transform: translateY(22px);
transform: translateY(22px);
width: 16px;
}
#page-header #hamburger:active .line:first-of-type {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
#page-header #hamburger:active .line:last-of-type {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
#sidebar-nav {
position: absolute;
z-index: 3;
top: 0;
height: 100vh;
width: 400px;
background-color: #efefef;
box-shadow: 0 0 0 0 #3f3f3f;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
#sidebar-nav #sidebar-header {
position: relative;
height: 200px;
width: 100%;
background-color: #0a94ab;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/material-header.jpg");
background-size: cover;
}
#sidebar-nav #sidebar-header #codepen-link {
position: relative;
display: block;
top: 30px;
left: 30px;
height: 80px;
width: 80px;
z-index: 10;
border-radius: 50%;
box-sizing: border-box;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
background-position: center center;
background-size: cover;
opacity: 0.6;
transition: all 0.25s;
}
#sidebar-nav #sidebar-header #codepen-link:hover {
opacity: 1;
box-shadow: 0 2px 6px #0f0f0f;
}
#sidebar-nav #sidebar-header #profile-info {
position: relative;
top: 15px;
padding: 30px;
}
#sidebar-nav #sidebar-header #profile-info #profile-name {
font-size: 1.5em;
margin-bottom: 5px;
}
#sidebar-nav #sidebar-header #btn-more {
position: absolute;
top: 20px;
right: 20px;
padding: 5px;
cursor: pointer;
}
#sidebar-nav #sidebar-header #btn-more .dot {
display: block;
height: 4px;
width: 4px;
border-radius: 50%;
margin-bottom: 5px;
background-color: white;
}
#sidebar-nav #sidebar-nav-list {
position: relative;
background-color: #efefef;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item {
position: relative;
z-index: 4;
box-shadow: 0 2px 4px transparent;
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
transition: all 0.25s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
background-color: #efefef;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item a {
display: flex;
align-items: center;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 20px 0 20px 30px;
color: #3f3f3f;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item a .material-icons {
padding: 0 8px 2px 0;
color: #f55e22;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:hover {
z-index: 5;
background-color: white;
box-shadow: 0 2px 4px #6f6f6f;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(1) {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(3) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(4) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(5) {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(6) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(7) {
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(8) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#sidebar-nav:target {
-webkit-transform: translateX(0px);
transform: translateX(0px);
box-shadow: -4px 0 12px 6px #3f3f3f;
}
#sidebar-nav:target .sidebar-nav-item {
-webkit-animation: nav-item-fade-in 1s ease-in-out;
animation: nav-item-fade-in 1s ease-in-out;
}
#sidebar-nav:target + #nav-screen-overlay {
display: block;
pointer-events: auto;
opacity: 0.3;
}
#nav-screen-overlay {
position: fixed;
z-index: 2;
height: 100vh;
width: 100vw;
background-color: #0f0f0f;
opacity: 0;
cursor: default;
pointer-events: none;
transition: opacity 0.5s ease-in-out;
}
@-webkit-keyframes nav-item-fade-in {
to {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes nav-item-fade-in {
to {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
<div id="background"></div>
<div id="fab">+</div>
<header id="page-header"><a id="hamburger" href="#sidebar-nav" target="_self"><span class="line"></span><span class="line"></span><span class="line"></span></a></header>
<nav id="sidebar-nav">
<header id="sidebar-header"><a id="codepen-link" href="https://www.codepen.io/seanfree" target="_blank"></a>
<div id="profile-info">
<h3 id="profile-name">Sean Free</h3>
<h4 id="blurb">Rogue Webonaut</h4>
</div><a id="btn-more"><span class="dot"></span><span class="dot"></span><span class="dot"></span></a>
<ul id="sidebar-nav-list">
<li class="sidebar-nav-item" id="nav-item-home"><a href="#"><i class="material-icons">home</i>Home</a></li>
<li class="sidebar-nav-item" id="nav-item-social"><a href="#"><i class="material-icons">people</i>Social</a></li>
<li class="sidebar-nav-item" id="nav-item-mail"><a href="#"><i class="material-icons">mail</i>Mail</a></li>
<li class="sidebar-nav-item" id="nav-item-pictures"><a href="#"><i class="material-icons">photo_library</i>Pictures</a></li>
<li class="sidebar-nav-item" id="nav-item-music"><a href="#"><i class="material-icons">library_music</i>Music</a></li>
<li class="sidebar-nav-item" id="nav-item-files"><a href="#"><i class="material-icons">folder</i>Files</a></li>
<li class="sidebar-nav-item" id="nav-item-settings"><a href="#"><i class="material-icons">settings</i>Settings</a></li>
<li class="sidebar-nav-item" id="nav-item-close"><a href="#"><i class="material-icons">close</i>Close</a></li>
</ul>
</header>
</nav><a id="nav-screen-overlay" href="#" target="_self"></a>