How to create expanding tabs?

[nchipping]

I haven’t started this website yet, but I want to make a website that when a user clicks on a link (set up at the top of the page, like tabs), I want it to expand from roughly 100px to 200 or 250px – does that make sense? I have no idea how to code that, or what to search on Google for, to figure it out. I know how to set up tab links like on this website (CSS-Tricks – look at the top of this page), but I just don’t know how I would expand them.

Please help!

[TheDoc]

I suppose you could do that with some form of jquery, it really depends on what you’re trying to accomplish though.

Are you expanding in one direction (ie, width or height) or multiple directions (ie, width AND height)? Would the content within the tab be replaced with something else?

Always think about usability as well. Is this something that the average user going to the site is going to even understand?

[nchipping]

Good questions…

I only want it to expand horizontally roughly by 100 pixels just to emphasize that they are in that "tab". The text will be the same within the link tab, but I just want it to expand horizontally. It is a more design emphasized website, so they do need this feature. Does that help?

[TheDoc]

Ahhhhhh, so you’re simply wanting a "current" state?

That’s easily done with CSS.

<ul>
<li>About</li>
<li>Something Else</li>
<li class="current">Oh Snap, Current</li>
<li>One More</li>
</ul>

[nchipping]

I loved your reply – super simply and awesome funny – thanks for the help :)

Now for another question…

I am currently working on the following site: meandmyback.com/linearstars and I’m having issues with just aligning the "|" pieces in the middle of my link areas. I just barely started on it, but if you could help me out, that would be great. Here’s the HTML and CSS for it so far:

Code:

||||

and now the CSS:

Code:

font { font:Arial, Helvetica, sans-serif;}
body {background:#FFF;}

#align {background: url(../images/shadow.gif); width:1126px; background-repeat:repeat-y; margin:50px auto;}
#container {width: 1024px; height:640px; margin:50px auto; background:#FFF; border: solid 1px #666;}
#header {float: left; }
#nav {float:right; margin:0px 0px 0px 35px;}

.left {float:left;}
.header {float:left; margin: 25px 25px;}
.clear {clear:both;}
.black {margin:0px 5px 12px 5px;}

[AshtonSanders]

"nchipping" wrote:

I am currently working on the following site: meandmyback.com/linearstars and I’m having issues with just aligning the "|" pieces in the middle of my link areas.

That’s because you have:

Code:

.black {
margin:0 5px 12px;
}

So the links, which are .black, get pushed up, while the "|" (pipes) don’t get pushed up because they are not .black. I would recommend instead of using pipes in your HTML, use 1px border to keep the border right next to your links.

Code:

.black {
margin:0 5px 12px;
border-left: 1px solid #000;
}

[nchipping]

Good idea — I’ll fix that. Thanks.

[Author]

Posts