Designing HTML Tabs

Do you love tabs? Do you love when they are integrated into sites in a cool way? So do I. And until I developed the tabs on the homepage at YP4, I thought you could only use PHP to develop like this. How wrong I was!

I started with a script that has served me well in the past, the scroll script from DHTMLCentral. This utilizes JavaScript, which I try to avoid due to accessibility standards, but for modern browsers and savvy audiences, I don’t worry about it too much.

I had to do a bunch of research because thanks to the propriety CMS used by Plus Three (ARCOS), I could not break the tabs up over different HTML pages. I had to chop things up a bit and changed it from an actual scroll. Normally, you would put the menu at top, create layers with CSS for each menu, create a sort of window through scripting where you can view the layers, and when you clicked the link, viola! Your window shows the appropriate layer.

First thing I did was get rid of the menu at top.

Now, I resumed working on the script just as Thomas Brattli had written it. I had to insert it into a table, AND insert tables into each div to get the styling right - mostly thanks to width constraints. There was, as you can see, QUITE a bit of styling that figured into the layout. The divControl layer, for example, did not have hidden visibility as usual. The layer divContScroll needed to be positioned relative, not absolute, and I could not use clipping properties at all.

In addition, after every table (there are 3 here, one for each tab title), I need to add a div layer and create a special class, tabMenu. Each of these layers fixed alignment issues, which were pretty complicated given the position of the tabs. You can view the tab styling itself here.

Finally, for some reason I could not get the “onload = scrollInit;” to work in the JS file, so instead I added it to the body tag. Not ideal, but it worked. Go to the site and peak under the hood if you like!