Issue
I have a push menu that moves the main content container by adding margin-left to it. I'd like to be able to have a background image that behaves the same as https://music.amazon.co.uk/artists/B001DTRO4M/queen.
So far this is where I've got to in my codepen:
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;
}
I had got to a point where the image was showing with the gradient, but it wasn't resizing when the main content container shrinks. At the moment the codepen isn't showing the image at all and I'm not sure how I've gone backwards!
EDIT 1: more context & sample images
Desired effect is for the background image to be constrained to the container to the right of the menu (where the <p> text is). As I have it, the background image is being cut off on the left.
Menu Expanded
Menu Collapsed
As a side note, I haven't been able to get the gradient on top of the background image and under the content either.
EDIT: Final solution
Using the accepted answer's solution, I ended up with this
Solution
If I understand correctly there are a few comments for your desired layout:
- The navigation on the left is of a fluid width and when the navigation resizes the content to the right of it should resize as well, including any background images;
- The content on the right consists of a background image that should always be constrained to the width of content container;
- The background image for the content section should be fixed and a gradient overlay should scroll over the background image.
Here is an example of how to achieve a layout that follows all of the above requirements. to see it working, adjust the --menu-width variable. I think this should get your started.
:root {
--menu-width: 240px;
}
.nav {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
width: var(--menu-width);
background-color: #ff0099;
}
.main {
position: relative;
margin-left: var(--menu-width);
min-height: 100vh;
}
.main-background {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: var(--menu-width);
background-image: url(https://images.unsplash.com/photo-1477233534935-f5e6fe7c1159?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80);
background-repeat: no-repeat;
background-size: 100% auto;
}
.main::before,
.main::after {
position: absolute;
z-index: 1;
right: 0;
left: 0;
content: '';
background-image: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%);
}
.main::before {
top: 0;
height: 100vh;
background-image: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%);
}
.main::after {
content: '';
top: 100vh;
bottom: 0;
background-color: #000000;
}
.container {
position: relative;
z-index: 2;
margin: 0 auto;
padding: 1rem 2rem;
padding-top: 24rem;
max-width: 960px;
color: white;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div>
<nav class="nav"></nav>
<main class="main">
<div class="main-background"></div>
<div class="container">
<h1>This is a title</h1>
<p>Two ghostly white figures in coveralls and helmets are softly dancing worldlets hearts of the stars radio telescope of brilliant syntheses a billion trillion. Network of wormholes a very small stage in a vast cosmic arena with pretty stories for which there's little good evidence at the edge of forever hundreds of thousands preserve and cherish that pale blue dot. Courage of our questions with pretty stories for which there's little good evidence as a patch of light not a sunrise but a galaxyrise how far away are creatures of the cosmos.</p>
<p>A billion trillion courage of our questions brain is the seed of intelligence billions upon billions prime number the carbon in our apple pies. Birth network of wormholes finite but unbounded radio telescope vanquish the impossible vastness is bearable only through love? Take root and flourish vanquish the impossible a still more glorious dawn awaits Orion's sword Sea of Tranquility extraordinary claims require extraordinary evidence? Tendrils of gossamer clouds the only home we've ever known Orion's sword Orion's sword invent the universe another world.</p>
<p>Paroxysm of global death Drake Equation across the centuries Sea of Tranquility vanquish the impossible finite but unbounded? Culture hundreds of thousands from which we spring the ash of stellar alchemy muse about network of wormholes. Concept of the number one hundreds of thousands corpus callosum two ghostly white figures in coveralls and helmets are softly dancing a mote of dust suspended in a sunbeam are creatures of the cosmos.</p>
<p>Sea of Tranquility billions upon billions emerged into consciousness explorations inconspicuous motes of rock and gas stirred by starlight. Network of wormholes the sky calls to us a mote of dust suspended in a sunbeam the carbon in our apple pies take root and flourish kindling the energy hidden in matter. Shores of the cosmic ocean from which we spring extraordinary claims require extraordinary evidence dispassionate extraterrestrial observer a very small stage in a vast cosmic arena not a sunrise but a galaxyrise.</p>
<p>Quasar ship of the imagination decipherment a very small stage in a vast cosmic arena Apollonius of Perga descended from astronomers. Not a sunrise but a galaxyrise astonishment Sea of Tranquility cosmic ocean invent the universe the carbon in our apple pies. Globular star cluster courage of our questions rich in heavy atoms dispassionate extraterrestrial observer invent the universe how far away. Intelligent beings dream of the mind's eye dream of the mind's eye extraordinary claims require extraordinary evidence star stuff harvesting star light great turbulent clouds.</p>
<p>Two ghostly white figures in coveralls and helmets are softly dancing birth star stuff harvesting star light extraplanetary of brilliant syntheses permanence of the stars. Across the centuries great turbulent clouds decipherment Tunguska event citizens of distant epochs the sky calls to us? Invent the universe paroxysm of global death citizens of distant epochs hearts of the stars across the centuries hearts of the stars. Inconspicuous motes of rock and gas not a sunrise but a galaxyrise invent the universe the sky calls to us at the edge of forever paroxysm of global death.</p>
<p>Extraordinary claims require extraordinary evidence as a patch of light galaxies Rig Veda Cambrian explosion the carbon in our apple pies. Stirred by starlight hydrogen atoms hydrogen atoms gathered by gravity dispassionate extraterrestrial observer the only home we've ever known. Two ghostly white figures in coveralls and helmets are softly dancing descended from astronomers made in the interiors of collapsing stars Tunguska event the only home we've ever known brain is the seed of intelligence.</p>
<p>Quasar explorations decipherment star stuff harvesting star light the ash of stellar alchemy from which we spring? A mote of dust suspended in a sunbeam the only home we've ever known courage of our questions dispassionate extraterrestrial observer take root and flourish realm of the galaxies? Citizens of distant epochs a very small stage in a vast cosmic arena Sea of Tranquility the only home we've ever known white dwarf vastness is bearable only through love.</p>
<p>Rogue dream of the mind's eye cosmic ocean two ghostly white figures in coveralls and helmets are softly dancing hundreds of thousands Orion's sword? Paroxysm of global death bits of moving fluff descended from astronomers the ash of stellar alchemy Vangelis as a patch of light? At the edge of forever made in the interiors of collapsing stars the sky calls to us paroxysm of global death at the edge of forever the only home we've ever known?</p>
<p>Hydrogen atoms invent the universe Drake Equation two ghostly white figures in coveralls and helmets are softly dancing Rig Veda a billion trillion. Stirred by starlight courage of our questions extraordinary claims require extraordinary evidence the ash of stellar alchemy kindling the energy hidden in matter courage of our questions. Rich in heavy atoms bits of moving fluff a mote of dust suspended in a sunbeam courage of our questions emerged into consciousness decipherment.</p>
<p>Globular star cluster Tunguska event the ash of stellar alchemy the only home we've ever known rich in mystery great turbulent clouds? Not a sunrise but a galaxyrise at the edge of forever white dwarf intelligent beings courage of our questions muse about. Bits of moving fluff with pretty stories for which there's little good evidence stirred by starlight a still more glorious dawn awaits take root and flourish star stuff harvesting star light.</p>
<p>Hearts of the stars rings of Uranus tendrils of gossamer clouds network of wormholes another world as a patch of light? Muse about globular star cluster a still more glorious dawn awaits Rig Veda cosmic ocean shores of the cosmic ocean. Rig Veda descended from astronomers concept of the number one Sea of Tranquility emerged into consciousness Rig Veda. A mote of dust suspended in a sunbeam gathered by gravity two ghostly white figures in coveralls and helmets are softly dancing the carbon in our apple pies extraordinary claims require extraordinary evidence invent the universe?</p>
<p>Tunguska event made in the interiors of collapsing stars quasar Flatland not a sunrise but a galaxyrise hearts of the stars. Great turbulent clouds the sky calls to us tingling of the spine a mote of dust suspended in a sunbeam extraordinary claims require extraordinary evidence extraordinary claims require extraordinary evidence. Vastness is bearable only through love two ghostly white figures in coveralls and helmets are softly dancing permanence of the stars courage of our questions dream of the mind's eye a very small stage in a vast cosmic arena.</p>
<p>Encyclopaedia galactica decipherment the sky calls to us billions upon billions the only home we've ever known hundreds of thousands. Euclid made in the interiors of collapsing stars bits of moving fluff from which we spring realm of the galaxies with pretty stories for which there's little good evidence. Dispassionate extraterrestrial observer network of wormholes take root and flourish dispassionate extraterrestrial observer with pretty stories for which there's little good evidence not a sunrise but a galaxyrise?</p>
<p>Rig Veda of brilliant syntheses hearts of the stars the only home we've ever known Sea of Tranquility extraplanetary. Take root and flourish Drake Equation cosmic ocean invent the universe rings of Uranus network of wormholes. Not a sunrise but a galaxyrise Drake Equation laws of physics not a sunrise but a galaxyrise two ghostly white figures in coveralls and helmets are softly dancing a mote of dust suspended in a sunbeam.</p>
<p>Decipherment Hypatia astonishment great turbulent clouds at the edge of forever Rig Veda. Muse about as a patch of light vanquish the impossible hundreds of thousands across the centuries ship of the imagination. Not a sunrise but a galaxyrise take root and flourish gathered by gravity shores of the cosmic ocean courage of our questions vastness is bearable only through love? Invent the universe the only home we've ever known courage of our questions kindling the energy hidden in matter the carbon in our apple pies invent the universe.</p>
<p>Hypatia vanquish the impossible star stuff harvesting star light permanence of the stars rings of Uranus Sea of Tranquility. Rich in heavy atoms emerged into consciousness are creatures of the cosmos muse about the ash of stellar alchemy a very small stage in a vast cosmic arena. With pretty stories for which there's little good evidence encyclopaedia galactica inconspicuous motes of rock and gas two ghostly white figures in coveralls and helmets are softly dancing dream of the mind's eye citizens of distant epochs.</p>
<p>Consciousness Sea of Tranquility citizens of distant epochs Vangelis science shores of the cosmic ocean. Venture another world extraordinary claims require extraordinary evidence are creatures of the cosmos concept of the number one the only home we've ever known. A very small stage in a vast cosmic arena the sky calls to us gathered by gravity hearts of the stars hundreds of thousands rich in heavy atoms? A mote of dust suspended in a sunbeam rich in heavy atoms not a sunrise but a galaxyrise two ghostly white figures in coveralls and helmets are softly dancing the only home we've ever known courage of our questions.</p>
<p>Worldlets a mote of dust suspended in a sunbeam hundreds of thousands intelligent beings Cambrian explosion trillion? Brain is the seed of intelligence courage of our questions citizens of distant epochs emerged into consciousness the ash of stellar alchemy corpus callosum. Rich in heavy atoms from which we spring a still more glorious dawn awaits extraordinary claims require extraordinary evidence across the centuries the carbon in our apple pies?</p>
<p>Tesseract billions upon billions vanquish the impossible dispassionate extraterrestrial observer a mote of dust suspended in a sunbeam dream of the mind's eye. Descended from astronomers ship of the imagination inconspicuous motes of rock and gas made in the interiors of collapsing stars the carbon in our apple pies the ash of stellar alchemy. From which we spring muse about star stuff harvesting star light stirred by starlight permanence of the stars rings of Uranus and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
<p>
</div>
</main>
</div>The background images could be applied as a pseudo element to the <body> and that would prevent the need for the empty <div>, but I think it makes more sense to use an empty <div> as it stays in the flow of the code and remains more contextual.
Here is a Codepen so you can play around with the code: https://codepen.io/neutraltone/pen/XWzvYbP
Answered By - Tony Phipps
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.