我有一个推送菜单,通过在主内容容器上添加左边距来移动主内容容器.我希望能够有一个行为与https://music.amazon.co.uk/artists/B001DTRO4M/queen相同的背景图像.
到目前为止,这就是我在代码笔中要做的:
https://codepen.io/Maynards/pen/qBVLqLL
<div class="secondaryMenu">
<div class="secondaryMenuItem">
<div>Secondary Menu 1</div>
</div>
<div class="secondaryMenuItem active overlay">
<div>Secondary Menu 2</div>
</div>
<div class="secondaryMenuItem active">
<div>Secondary Menu 3</div>
</div>
</div>
<div class="primaryMenu">
<ul class="primaryMenuItems">
<li class="primaryMenuItem">
<div class="primaryMenuItemSelector">
<div>1</div>
<div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
</div>
</li>
<li class="primaryMenuItem">
<div class="primaryMenuItemSelector">
<div>2</div>
<div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
</div>
</li>
<li class="primaryMenuItem">
<div class="primaryMenuItemSelector">
<div>3</div>
<div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
</div>
</li>
</ul>
</div>
<div class="mainContent">
<div class"background">
<div class="backgroundImage" style="background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/51/Test_grid_2000x2000.png");"></div>
<div class="backgroundGradient"></div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
:root {
--maxNav-width: 288px;
--primaryNav-width: 56px; /* change to 288px to make full width */
--secondaryNav-width: 232px;
--secondaryNav-positionX: 0px; /* change to -232px to hide secondary menu */
}
body {
padding: 0;
margin: 0;
}
.mainContent {
margin-left: min(var(--maxNav-width), calc(var(--primaryNav-width) + var(--secondaryNav-width) + var(--secondaryNav-positionX)));
transition: margin-left 0.5s;
}
.content {
width: 100%;
padding: 64px 48px;
max-width: 1440px;
}
.primaryMenu {
height: 100%;
width: var(--primaryNav-width);
position: fixed;
top: 0px;
left 0px;
background-color: #333333;
overflow-x: hidden;
white-space: nowrap;
transition: width 0.5s;
}
.primaryMenuItems {
color: #FFFFFF;
padding: 0;
margin: 0;
list-style-type: none;
margin-left: 16px;
margin-top: 16px;
}
.primaryMenuItems > li {
margin-bottom: 16px;
}
.primaryMenuItemSelector {
display: flex;
}
.primaryMenuItemExtra {
margin-left: 36px;
}
.secondaryMenu {
width: var(--secondaryNav-width);
height: 100%;
position: fixed;
top: 0;
left: 56px;
overflow-x: hidden;
color: white;
transition: 0.5s;
transform: translateX(var(--secondaryNav-positionX)) translateZ(-1px);
}
.secondaryMenuItem {
position: fixed;
height: 100%;
width: 100%;
color: #FFFFFF;
background-color: #777777;
padding: 0;
margin: 0;
list-style-type: none;
display: none;
box-sizing: border-box;
z-index: 1;
}
.secondaryMenuItem.active {
display: flex;
}
.secondaryMenuItem.overlay {
z-index: 2;
}
.background {
height: 100%;
inset-inline-start: 0;
min-height: 100vh;
position: absolute;
inset-inline-end: 0;
top: 0;
z-index: -2;
}
.backgroundImage {
background-repeat: repeat-y;
transition: background-image 1s ease-in;
background-size: cover;
transform: translateZ(0);
background-attachment: fixed;
position: fixed !important;
background-position: center top;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
z-index: -1;
transition: margin-left .5s;
margin-left: min(var(--maxNav-width), calc(var(--primaryNav-width) + var(--secondaryNav-width) + var(--secondaryNav-positionX)));
}
.backgroundGradient {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), #000000 100vh, #1f2222);
height: 100%;
max-height: 200vh;
position: sticky;
top: -100vh;
width: 100%;
z-index: -1;
}
我已经到了一个点,图像显示的梯度,但它没有调整大小时,主要内容容器收缩.目前,代码笔根本没有显示图像,我也不确定我是如何倒退的!
EDIT 1: more context & sample images
理想的效果是将背景图像约束到菜单右侧的容器中(其中<p>
个文本为).在我看来,左边的背景图像被剪掉了.
顺便说一句,我也无法在背景图像的顶部和内容的下方获得渐变.
EDIT: Final solution
使用公认答案的解决方案,我得到了this分