In part one of this tutorial, I showed you how to create the navigation bar from Apple’s website in Photoshop. In this tutorial, I will show you how to code the navigation bar in CSS. It is really easy so sit back, read over this tutorial, then open up your editing tool and get started (I used dream weaver).

Anyone who has an iPod, iPhone, or any other Apple product more than likely has visited there website to get some sort of details on the product you will purchase. I do not have any of Apple’s products, but I do visit their website often because I love the look of it. So, in this tutorial, I will help you create the Apple’s navigation bar. In part one of two, I will design the actual navigation bar in Photoshop.

If you read my first draggable div tutorial, you would know that I had planned to show you how to add a close and open function for this. So within this tutorial, I plan to show you what the old code looked like, and how to add the two extra functions. At the bottom of the tutorial you will see a link to view it in action.

Creating a div is, as you already (should) know, is very easy. A div is a great way to layout a website for many reasons. In this tutorial, I will show you how to create a div that lays on top of your content, and then the user can move it around the screen as they see fit.Also, you can see how to add a link within your website that will open the div and a link to close it.

When designing a website, you may want to use your own custom made buttons. However, in the older days, you would write a lot of HTML code just to get the rollover to work. Sometimes, it wasn’t even worth the trouble. But with the new days of CSS – life is much easier. This tutorial will describe, and show you how to do a rollover effect with using CSS. This would be perfect if you have an image gallery in your website, menu buttons, or whatever you decide to use it on. Most of you know what this would be like when doing normal text, but with an image, you can do just about anything.