In web design and development, you’ll find that there are many different techniques to meet a given goal. Some are good, and some are great, but as long as your chosen method works well and looks good, you should use it with confidence. To complete a professional, tailor-made web design, it’s important to understand how to build a navigation menu from start to finish.
Your website’s navigation is arguably the most important element besides the site’s structure. Every site visitor will use it to find what they are looking for. If your menu doesn’t work or doesn’t stand out, the visitors may not know where to go or what to do to find the information they need.
Your site’s menu system should reflect the style of your site: You can choose smaller, subtler sizes and fonts, or you can scale up to big spaces and matching typefaces. In this tutorial, we are going to create a more subtle, more sophisticated look.
Step 1: Create the CanvasTo get started, open Photoshop and create a document with web settings. Make it the width of the content area of your site. Most sites today are either 960px wide or the full 1024px wide. The height isn’t as important — we are going to slice up pieces for our CSS menu later — but I have chosen to make the height 768px high for the tutorial’s purposes. This way, the menu will stand out more.
Step 2: Setting Up the MenuIn Photoshop, create a new layer above your background layer. Select the marquee tool, and in the top menu bar, you will find options for the marquee tool. We want to make sure that there is no feathering, so be sure to set that to 0px, and then you will see a drop-down menu that says “normal.” Click on that menu, and under it you will see other options that say “fixed ratio” and “fixed size.” Choose fixed size and you will see that you can type in the exact width and height that you want for your marquee tool.
Set the menu height to 40px, and the width to 1024px, the full width of our document. Some of this extra space doesn’t actually matter; we are just using them for visual reference. It helps visually to see the whole menu.
Step 3: Choosing Your ColorsUsing the marquee tool, click your cursor on the screen where you want to place your menu. You will see an active selection on the screen, so now you’ll want to double-click on your foreground color within your tools panel and choose any color that you want. Once you choose the color that you want to use, Photoshop will give you the hex values of that color (the six-digit number), which you can use later within your CSS. Using Photoshop and being able to select your colors visually will make your menus (and anything else that you mock up) look much better and more cohesive. It is a good idea to write down the hex values of the different colors that you end up using in your mockup, so that you can use them later.
I chose the color: #C03C03, which is a rich red. On your created layer, and with your selection made, hit the alt or option key + the delete key to fill your selection with the foreground color. This is a flat color, but we are going to change that.
Step 4: Create The Highlight for Your MenuCreate a new layer, and with the marquee tool, create a shorter width (roughly 100px) and leave the height set to 40px. Click directly on top of your menu and a selection will become active. Choose white as your foreground color, and select the gradient tool. In the gradient options, chose the foreground to transparent option and draw a gradient, holding the shift key to make sure that it is straight. Start at the top of the menu and drag directly downward. This will create a highlight for your normal navigation menu. For now, hide the highlight gradient layer that we just created.
Step 5: Create the Dark Hover StateCreate a new layer, and change your foreground color to black. Make the same selection that you did for the white gradient. Select the gradient tool, and again, with the foreground to transparent option selected, click at the bottom of your menu and drag upward, creating a black fading gradient. With both of these layers, you can adjust the opacity to taste.
Step 6: Slicing Your ImagesNow that we have our highlights and shadows in place, we can begin to slice up and code the design. If you click and hold your mouse on the marquee tool, you will notice that there are single row and single column marquee tools. For our purposes, select the single column marquee tool, which makes a 1 pixel vertical selection for the entire height of your document.
Step 7: Save Your Highlight ImageHide all of your other layers except the white gradient layer by holding the option or alt key and clicking on the eye icon of your white gradient layer. Now, click anywhere on the menu to create a 1px vertical selection of your transparent gradient. Hit the command or ctrl key + “C” to copy your selection.
To make things easy, create a new document and Photoshop will automatically create it with the dimensions of your selection, which is 1px wide by 40px tall. Click “OK,” double-click the background layer to unlock it, and hit command or control + “A” to select everything. Then, hit the delete key to delete the white background color.
Then, hit command or control + “V” to paste your white gradient into the new document. Choose File>Save for Web & devices, and within the settings, choose png-24. This is the right choice because it allows for transparency. I named the file “highlight.png” and saved it in my project folder inside of another folder named “images.” Close the document without saving, since you no longer need this document.
Step 8: Save Your Shadow FileGo back to your original file, hide the highlight layer and make the black gradient layer visible. Repeat the steps from above, creating a new document with a black transparent gradient. I saved it as “shadow.png.” We are done with Photoshop for now.
Step 9: Creating the HTMLFor our HTML, I created an unordered list with list items for our drop-down menu. You can have as many drop-down items as you like, but I try to keep it to no more than seven. If I need more options, I break some of the items down further into categories. The whole menu system has a CSS class of “menu.” Keep in mind that your menu, if it is inside of a container, will need to be the same width of the container.
Step 10: Making it StylishFor the CSS, we are going to create our menu and give no padding, no borders, and no margin. This may change for your project depending on how you have your site set up, but this is how we are setting the CSS for our purposes. The main focus in this tutorial is establishing a basic framework that you can modify as needed. Choose your typeface and the font size, which I set to 14.
Step 11: The Nitty-Gritty CodeNext, we are going to style our unordered list. Remember that if you do not specify a width here, then the menu will run the full width of the container. If your menu is not inside of a container, then it will run the full width of the browser. Earlier, we set the height of our highlight and shadow transparent PNG files to 40px. We need to do the same here in order for everything to match up. Set the margin and padding to 0px.
For the background, this is how you will create your seamless gradient: Choose a background color for your menu. I chose #C03, which is a red. Call a background URL, select your “highlight.png” file and set it to repeat on the x-axis. This will take your 40px tall background image and repeat it horizontally inside of the div. We get a nice pink, but if this is too strong for your taste, you can edit your .png file and lower its opacity. You will notice that it changes the menu background, but the buttons themselves don’t change. We will fix that issue shortly.
Step 12: Style Your Active LinksThe next attribute that we are going to style is the active option. This takes any list item with a class of “menu” and an active link, and styles it a certain way. Here, set your background attributes to be just like your menu, so your buttons will all look the same. One thing to notice is that you need to set the line-height to 40px to be the same height as the menu. Align your text to the center, which will help your main menu look evenly spaced. Set your text decoration to none, so that your links aren’t underlined by default. I set the text color to #000 which is black, so that it would contrast with the light menu.
Step 13: Make the Hover State Stand OutNext, we need to style the active hover state of the list item and unordered list menu items. If you think your menu as an array of buttons, this styling will dictate the hover state for each button. Here, I chose #900 as the color for the hover state, and we are also going to use our “shadow.png” file to give it some depth. Just like the “highlight.png” file, we are going to repeat the file on the x-axis, replicating it horizontally. Set the text to white for contrast against the dark colors we just chose, and set the text decoration to none.
Step 14: Style Your SubmenusThe next set of options allows you to style your drop-down menu items. We are going to select the unordered list items under our list items (think of these as our first-level submenus) and we will style their normal display. Set the background color to #C03, which is the same color that we chose earlier. Set the border, margin and padding to 0px, the positioning to absolute, and make sure to define the width here. Generally, 225px should be enough for most words, but you may have to adjust this for your purposes.
Step 15: Match The Hover StyleFor the hover state of the unordered list under your menu’s list items, you’ll want to set the display to block. This is the only attribute needed for this selector, but without it, your drop-down items will not show up. You will only see the first tier of your menu.
Step 17: Making Your Submenus AppearNext, we will select the active list item hover state of the menu’s list items. We have to set the background to none, otherwise you won’t see the hover state when you mouse over each menu item.
Step 18: Sub Menu Hover StatesNow, we want to style the hover states of your submenus. Set the border to 0px, the text to white for good contrast and select the darker #900 as your background color. Be sure to employ your “shadow.png” image and repeat it along the x-axis.
So, now that you have finished designing your menu, you may wonder why this process is so important. The great thing about this malleable menu system is that you can tailor it for use in all of your future projects without having to start from scratch. You can make minor color changes without having to code the whole thing all over again, and you can make more extensive changes simply by editing a few lines of code: Add a small border in places using CSS, edit the .png files to make changes to the gradients, add text effects, such as the text shadow that I added, and more. This is an easy, flexible framework for any CSS menu, and it can save time and energy that would otherwise be wasted doing unnecessary, redundant menu designs from scratch.
Create a Reusable CSS Menu with Photoshop Reviewed by Aamir Pathan on 12:51 PM Rating: