Made a slider menu on css3, but it doesn’t suit me how it works. In this form, the background is fixed with the help of fixed (otherwise it does not look like it should), but because of this, scrolling is impossible. I understand what needs to be done on js, but I’m not going to put my mind on it myself with js recently. Example link (in firefox not working yet)

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100vh; } body { font: 16px/1 'Open Sans', sans-serif; background: #ddd; } .nav { position: relative; top: 50%; left: 50%; width: 650px; height: 400px; margin-top: -150px; margin-left: -330px; background: #fff; transform: translateZ(0); } .nav:hover .link { width: 5%; } .nav .link { position: relative; float: left; width: 14%; height: 100%; color: #aaa; border-right: 1px solid #ddd; transition: .5s width; overflow: hidden; } .nav .link:last-child { border-right: 0; } .nav .link:hover { width: 80%; color: #555; } .link1 { background: url('https://cdn.mashina.kg/tachka/images//a/2/3/a236caeb97c22a804cabc349d50630a2_1200x900.jpg') no-repeat fixed center; background-size: 600px; } .link2 { background: url('http://www.avtovzglyad.ru/media/article/470fe986b4955ce9faf8b06818c79f841bd73c.jpg.740x555_q85_box-0%2C0%2C1024%2C768_crop_detail_upscale.jpg') no-repeat fixed center; background-size: 600px; } .link3 { background: url('http://autodrop.ru/uploads/1353693314_mashina-v-kredit-bez-procentov.jpg') no-repeat fixed center; background-size: 600px; } .link4 { background: url('https://static.riafan.ru/uploads/2018/01/16/orig-15161241775df3417dd73a6a5155fc7394f4497d24.jpeg') no-repeat fixed center; background-size: 600px; } .link5 { background: url('../img/Side-Profile-2016-BMW-X6-white.png') no-repeat fixed center; background-size: 600px; } .link6 { background: url('https://www.conceptcarz.com/images/BMW/BMW-Limited-Edition-Individual-M6-manu-07_01.jpg') no-repeat fixed center; background-size: 600px; } .link7 { background: url('https://4.bp.blogspot.com/-ax9FhRp6CDA/WJZf8UNllfI/AAAAAAAACFQ/GmZyevgUmkQSBXD6catacpgw5CXaNZlNACLcB/s1600/3rabhard.com_1395505864_664.jpg') no-repeat fixed center; background-size: 600px; } 
 <div class='nav link1'> <div class='link'></div> <div class='link link2'></div> <div class='link link3'></div> <div class='link link4'></div> <div class='link link5'></div> <div class='link link6'></div> <div class='link link7'></div> </div>

  • And if the behavior logic is implemented not through a margin-left , but through flex-grow flex-srink , then there will be no scrolling, in theory. True picture, probably distorted. - Dmytryk

2 answers 2

Here, with the help of the flex-box , it turned out pretty well, as for me,. You only need to adjust the minimum width and images.

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100vh; } body { font: 16px/1 'Open Sans', sans-serif; display: flex; justify-content: center; align-items: center; } .nav{ width: 700px; height: 400px; border: 1px solid; display: flex; justify-content: space-between; } .link { height: 100%; min-width: 30px; width: 1px; flex-grow: 8; transition: 1s; } .link:hover{ width: 90%; } .link1 { background: url('https://cdn.mashina.kg/tachka/images//a/2/3/a236caeb97c22a804cabc349d50630a2_1200x900.jpg') no-repeat fixed center; background-size: 600px; } .link2 { background: url('http://www.avtovzglyad.ru/media/article/470fe986b4955ce9faf8b06818c79f841bd73c.jpg.740x555_q85_box-0%2C0%2C1024%2C768_crop_detail_upscale.jpg') no-repeat fixed center; background-size: 600px; } .link3 { background: url('http://autodrop.ru/uploads/1353693314_mashina-v-kredit-bez-procentov.jpg') no-repeat fixed center; background-size: 600px; } .link4 { background: url('https://static.riafan.ru/uploads/2018/01/16/orig-15161241775df3417dd73a6a5155fc7394f4497d24.jpeg') no-repeat fixed center; background-size: 600px; } .link5 { background: url('../img/Side-Profile-2016-BMW-X6-white.png') no-repeat fixed center; background-size: 600px; } .link6 { background: url('https://www.conceptcarz.com/images/BMW/BMW-Limited-Edition-Individual-M6-manu-07_01.jpg') no-repeat fixed center; background-size: 600px; } .link7 { background: url('https://4.bp.blogspot.com/-ax9FhRp6CDA/WJZf8UNllfI/AAAAAAAACFQ/GmZyevgUmkQSBXD6catacpgw5CXaNZlNACLcB/s1600/3rabhard.com_1395505864_664.jpg') no-repeat fixed center; background-size: 600px; } 
 <div class='nav'> <div class='link link1'></div> <div class='link link2'></div> <div class='link link3'></div> <div class='link link4'></div> <div class='link link5'></div> <div class='link link6'></div> <div class='link link7'></div> </div>

  • Thank you, a good option, although I probably did not put it correctly, the problem is not the behavior of the tabs, but that the background images do not move along with the menu. - likeaTor
  • I did not understand how to do the same, but without fixed. Made in the image, just a little differently jsfiddle.net/dhqhLugb/7 - likeaTor

Frankly, css not my strongest side and that is why it became interesting for me to implement your example.

It is impossible to make it fully adaptive without js . There is a problem when the pictures take up less space than the stretched .accordion-item . I note that this is an example without magic and is completely absent in it "вот тут чуть-чуть добавил, а вот здесь что-то ещё" . "вот тут чуть-чуть добавил, а вот здесь что-то ещё" I tried to make it as simple as possible.

The same example can be rewritten on flex-basis , then the whole adaptation can be js in js and in css only one property can be changed.

But in any case, you need to customize the image. That is, it is worth starting with the calculations of the size of fccordion itself.

 document.addEventListener('DOMContentLoaded', () => { let accordion = document.querySelector('.accordion'); accordion.addEventListener('click', ({ target, currentTarget }) => { if (target.classList.contains('accordion-item')) { currentTarget.querySelectorAll('.accordion-item').forEach(item => { item.dataset.activated = (item === target).toString(); }); } }); }); 
 body { height: 100vh; } main { max-width: 698px; max-height: 199px; width: 100%; height: 100%; position: relative; } .accordion { width: 100%; height: 100%; display: flex; justify-content: space-between; } .accordion { --accordion-item--length: 5; } .accordion-item { background-image: url('http://2ykov18qyj81ii56523ib0ue.wpengine.netdna-cdn.com/wp-content/uploads/2017/10/marvel-black-panther-blue.jpg'); background-position: center; background-repeat: no-repeat; /* background-size: cover; */ opacity: .5; flex-shrink: 0; flex-grow: 1; transition: flex .4s, opacity .3s; } .accordion-item[data-activated="true"] { opacity: 1; } .accordion-item:hover { opacity: 1; flex-grow: var(--accordion-item--length); } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" /> <main> <div class="accordion"> <div class="accordion-item" data-activated="true"></div> <div class="accordion-item" data-activated="false"></div> <div class="accordion-item" data-activated="false"></div> <div class="accordion-item" data-activated="false"></div> <div class="accordion-item" data-activated="false"></div> </div> </main>

I read about the movement of pictures ... are you talking about this?

 document.addEventListener('DOMContentLoaded', () => { let accordion = document.querySelector('.accordion'); accordion.addEventListener('click', ({ target, currentTarget }) => { if (target.classList.contains('accordion-item')) { currentTarget.querySelectorAll('.accordion-item').forEach(item => { item.dataset.activated = (item === target).toString(); }); } }); }); 
 body { height: 100vh; } main { max-width: 698px; max-height: 199px; width: 100%; height: 100%; position: relative; } .accordion { width: 100%; height: 100%; display: flex; justify-content: space-between; } .accordion { --accordion-item--length: 5; } .accordion-item { background-image: url('http://2ykov18qyj81ii56523ib0ue.wpengine.netdna-cdn.com/wp-content/uploads/2017/10/marvel-black-panther-blue.jpg'); background-position: 0 center; background-repeat: no-repeat; /* background-size: cover; */ opacity: .5; flex-shrink: 0; flex-grow: 1; transition: flex .4s, opacity .3s; } .accordion-item[data-activated="true"] { opacity: 1; } .accordion-item:hover { opacity: 1; flex-grow: var(--accordion-item--length); } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" /> <main> <div class="accordion"> <div class="accordion-item" data-activated="true"></div> <div class="accordion-item" data-activated="false"></div> <div class="accordion-item" data-activated="false"></div> <div class="accordion-item" data-activated="false"></div> <div class="accordion-item" data-activated="false"></div> </div> </main>

  • I'm not against js, I'm just not strong in him. About the movement of pictures - a separate picture is attached to each tab (essentially the same, only in different colors), all the pictures are superimposed on each other. And when you hover on a tab, it moves apart, giving the appearance of repainting the entire menu. So far, I have come up with only this method of implementation. - likeaTor