Member Avatar for _mike_

Hi, i'm trying to achieve the exact same effect as the 4 bottom tabs of this page :

http://uk.virginmoney.com/virgin/

Most Jquery I have seen 'pushes' the content above or below it up or down the page as it reveals the hidden content, the above example reveals the content over the top without pushing out any other content which is what I am looking for

I have tried to take the code and everything works aside from those tabs!! I was hoping somebody has a link to another site that does the same effect or if anyone can help??

Thanks in advance

Mike

  • 2 Contributors
  • 1 Reply
  • 231 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A concise, practical approach: keep the expanding panel out of the document flow and animate only compositable properties (transform or opacity). That avoids reflow so the page content stays put while the panel slides over it. is on the right track suggesting a positioned footer and z-index; the extra tips below make that approach reliable and performant.

Make the footer/overlay a positioned layer and toggle a class that changes its transform. Animate transform (translateY) rather than height/slide animations so the browser can use the GPU and avoid layout thrash. Example pattern (CSS + tiny JS toggler):

.footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; }
.panel { position: absolute; left: 0; right: 0; bottom: 100%; transform: translateY(100%); transition: transform .25s ease; will-change: transform; }
.panel.open { transform: translateY(0); }
document.querySelector('.tab').addEventListener('click', () => {
  document.querySelector('.panel').classList.toggle('open');
});

Troubleshooting notes: if the overlay still pushes content, inspect for ancestor transforms/filters or an overflow that creates a new stacking context—these can prevent z-index from working as expected. Also check for margins on siblings and ensure you're not animating properties that affect layout. On mobile, position:fixed can behave differently (soft keyboards, safe-area insets), so test on iOS/Android and consider adjusting for env(safe-area-inset-bottom).

Accessibility: toggle aria-expanded on the tab, move keyboard focus into the open panel when revealed, and ensure the panel can be dismissed with Escape. For @mike: try the class-toggle/transform pattern rather than jQuery height animations; it should give the exact “over the top” reveal without affecting surrounding content.

Member Avatar for almostbob

set the z-index of the footer div to a higher value and it will slide over the top of other content on resize, and the other content will slide under it on navgation, something like

<style type='text/css'>
.footer { bottom:0; top:auto; width:100%; z-index:10; background:grey; position:fixed; }
ul { margin: 0; padding: .2em 1em; list-style-type: none; text-align:center; }
li { padding:.2em 1em; display:inline;}
li:hover {height:100px; background:blue;}/* & other effects already used for your expanding layers */
</style></head>
<body>
<div class='footer'>
<ul>
<li>Big</li>
<li>fat</li>
<li>hairy</li>
<li>deal</li>
</ul>
</div>
<div>content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
content<br /> content<br />
</div></body></html>

extraneous headers left out

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.