Create a Disjointed Rollover Menu – Start With Photoshop

If you’re knowledgeable of HTML, CSS, and Javascript then you have what it takes to create a stylized menu. You’ll want to start in Photoshop though, and get the layout of your menu set. Here’s how you do it.

Step 1 – First, create a document with the dimensions 500×400. Go ahead and fill it with what color you want to use, for this tutorial we’re going to use white.

Disjointed Menu Image

Next we’re going to create the menu on the size. Create a vertical rectangle that fills only a small portion of the document. Fill it with a soft gray color, and set the opacity to 67%. You should be left with this.

Disjointed Menu Image 2

Step 2 – Now, it’s time to create the different selections in your menu. Grab your round rectangle shape tool, and slide it on the top of your menu. Fill it with whatever color goes with your site. And then add a stroke with these properties:

Disjointed Menu Image 3

and you should have this now

Disjointed Menu Image 4

then go ahead and copy how ever many buttons you want for your menu and spread them out..

Disjointed Menu Image 5

Step 3 – Now we’re going to finish up the menu. Create a small border that rests to the side of your side menu. Then we’re going to add the places your text is going to sit for your buttons. Create small rectangles and put them at the bottom of each button. Then use this Stroke blend:

Disjointed Menu Image 6

and you should have this

Disjointed Menu Image 7

Go ahead and fill in these text boxes with whatever options you wanted represented

Disjointed Menu Image 8

Step 4 – Now we’re going to add the static images that will appear whenever you rollover a menu button. Just slide it in and make sure it’s behind your side menu. You should have this.

Disjointed Menu Image 9

Now we’re going to add the finishing touches. Go ahead and add preview images on the buttons so people know what they’re going to see when they roll over it.

Disjointed Menu Image 10

and the final menu should look like this

Disjointed Menu Image 11

Next you should create the code for your menu. My recommendation is to use Jscript, it’s flexible and you can add some cool effects with it. It also runs quickly.

Leave a comment