Submit Your Article
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.
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.
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:
and you should have this now
then go ahead and copy how ever many buttons you want for your menu and spread them out..
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:
and you should have this
Go ahead and fill in these text boxes with whatever options you wanted represented
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.
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.
and the final menu should look like this
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.
