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
  • 217 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by almostbob
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.