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.
No comments: