Back to School- Back to doing Web Stuff

So I'm back to Mr. Bain's class again and we're customizing navigation toolbars. This process isn't really that fun, but it will be useful when we're designing websites and blogs. So I'm trying to pay attention and absorb as much knowledge as I can.

I started by designing tabs for a horizontal menu for my personal blog, Muthafuk. I used a pretty basic template I got online and customized a bit leaving it intentionally minimal, but I figure it could use some sprucing up with some pretty buttons.

We started out by trying the 'sliding doors' technique of menu bars. Exploding Boy gives some good examples as well as A List Apart.

I created my own tabs in Illustrator following Exploding Boy's examples:

I don't really like drop shadows, but I experimented just to see how it would turn out. I'm a really huge fan of the font I used, the sleek, simple Bebas. So the whole point of using 'sliding doors' is that the CSS code pushes the top about tab beyond some invisible border when he mouse hovers over it, so it looks as though the black about tab is morphing into the pink one. Or at least, that's the hope.

After copying and pasting code from Exploding Boy's blog, and especially with the padding (also with a lot of Mr. Bain's help), I finally got something that looks like this.


Lots of corrections to be made, but it's a start. (Click on the pic for the bigger version).