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 Canvas
To 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 Menu
In 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 Colors
Using 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 Menu
Create 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 State
Create 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 Images
Now 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 Image
Hide 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 File
Go 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 HTML
For 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.
5 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
7 | <link rel="stylesheet" href="menu_style.css" type="text/css" /> |
14 | <li><a href="#" >Home</a></li> |
15 | <li><a href="#" id="current">About</a> |
17 | <li><a href="#">Process</a></li> |
18 | <li><a href="#">Experience</a></li> |
19 | <li><a href="#">Philosophy</a></li> |
22 | <li><a href="/faq.php">Work</a> |
24 | <li><a href="#">Web Design</a></li> |
25 | <li><a href="#">Print</a></li> |
26 | <li><a href="#">Illustration</a></li> |
27 | <li><a href="#">Wordpress</a></li> |
30 | <li><a href="/contact/contact.php">Contact</a></li> |
Step 10: Making it Stylish
For 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.
3 | font-family: Verdana, Helvetica, sans-serif; |
Step 11: The Nitty-Gritty Code
Next, 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.
2 | background:#C03 url("images/highlight.png") repeat-x; |
Select the menu class again, but this time choose your list item. Set the padding to 0px, and set your list items (buttons) to float to the left. If your site requires them to be on the right hand side, then set the float attribute to the right.
Step 12: Style Your Active Links
The 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.
2 | background:#C03 url("images/highlight.png") repeat-x; |
4 | text-shadow: 0px 0px 4px #E5E5E5; |
Step 13: Make the Hover State Stand Out
Next, 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.
1 | .menu li a:hover, .menu ul li:hover a{ |
2 | background: #900 url("images/shadow.png") repeat-x; |
Step 14: Style Your Submenus
The 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 Style
For 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.
Next, we will style the list items under our list items (our actual visible drop-down menus). Set the background URL to your “highlight.png” file and repeat it along the x-axis. Set the margin and padding to 0px and the width to 225px again, or the width that you prefer for your design. Set the float to none and the display to block. In general, make sure that any elements that we will be styling have their display set to block.
2 | background:url("images/highlight.png") repeat-x; |
Step 17: Making Your Submenus Appear
Next, 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.
Select the active unordered list under your main list items. Set the height to 40px, the margin to 0px, and the padding to 15px, because we are going to set the text alignment to the left, and we don’t want the text to be touching the left edge of your menu. It is always good to give any text elements a little space from the edge of its container so they can be read easily.
7 | padding:0px 10px 0px 15px; |
Step 18: Sub Menu Hover States
Now, 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.
1 | .menu li ul a:hover, .menu li ul li:hover a{ |
2 | background:#900 url("images/shadow.png") repeat-x; |
Here is what you should end up with:
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.
23:21
No comments
Post a Comment