MyBB Community Forums

Full Version: Tab Script..
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello all,

This is a bit of a rouge request. Anyone know where I could possibly get a tab script similar to the one which features on this site:
http://expressionengine.com

You can see in the centre with the tabs, I think that looks quite good.

Any help appreciated.
Well, I don't know where to acutally download one, I do know its done through a "header.php" file. Create this, add it to all pages "WITH A CODE" Quite easy to do if you know php.
I can do the whole "tabs" thing via CSS.
Just can't do the drop down menu.
But to add it to all page you just need to use PHP's include or require function.
I wouldn't need it on all pages, just the front page of my site...I don't require the dropdown menu parts. All I would like is the tabs and the content parts above them. Thanks so far.
(2008-10-16, 10:26 PM)Rovin Wrote: [ -> ]I wouldn't need it on all pages, just the front page of my site...I don't require the dropdown menu parts. All I would like is the tabs and the content parts above them. Thanks so far.

You'd need something like
<style>
#menu a:link,a:active, {
background-image:url(imageurl.whatever);
}
#menu a:hover, {
background-image:url(imageurlflipped.whatever);
}
</style>
Basically flip the original image OR make the images lower half...ah man there are so many ways I could better explain this!

I just need to word it right!
It's just a mouseover change of background. Nothing special about that...
The mouseover thing can be done completely in CSS.
Try studying the source code of this site and see what you can find out.
http://red-king.org
The buttons are 50px high but the CSS makes it so only 25px is shown. When you hover over it, it moves to the other 25px. The image is the background and the text is over the image.
I don't know exactly how it's done, it's just part of the CMS (or at least the theme for it)
Sorry for any confusion, I meant this part:
[Image: tabs.jpg]
Look at their source code and style sheets.