How to create a three state menu using Photoshop and Microsoft Expression Web 3

Posted by: Minal Agarwal , on 9/18/2009, in Category Expression Web
Views: 21811
Abstract: A three state menu would change its appearance according to the change in its state. That means you can add special effects to the menu when mouse hovers over it or when it is active. In this article, we will learn how to create a three state menu.
How to create a three state menu using Photoshop and Microsoft Expression Web 3
 
You must have created or seen hotspots on an image. Hotspots are clickable portions on an image, which when clicked, would take you to a linked page or website. Image maps are used to create such hotspots on images.
We can create navigation menus using such image maps. Since creating image maps is a simple task in Microsoft Expression Web, navigation menus could be easily created. But a normal image map will have no special effects to make the user understand that an image is clickable, except that the cursor would change to a hand cursor. You could add a screen tip to make it noticeable. But wouldn’t it be catchy if the image could be highlighted, or it changes its color at different states. This kind of state change is quite a task. In this article we would go through a step by step procedure to create a three state menu (normal, hover/rollover and active states).
Create the images in Photoshop CS4
Before we begin, I assume you have some basic knowledge of Photoshop, since instructions of how to create an image is out of the scope of this article. (You can use any version of Photoshop for this purpose)
In this example, we will create a navigation menu with three menu items; Home, About Us and Services. So we will have to create a set of 3 images for each menu item, one for each state. Using Photoshop you can create 9 images depicting the normal, rollover and active state. Let me show you a faster way of doing this, with the ‘slicing’ tool. Create a single image, long enough to accommodate the text for three menu items and then slice it into three. Follow these steps:
1.    Launch Photoshop CS3 (or any other version you have).
 
2.    Go to File > New... In the New dialog box, specify a suitable width and height and click OK.
 
3.    Create different layers for text like Home, About Us and Service.

DifferentLayersofText
 
4.    Then create a group and rename it to ‘Rollover’. Under this group add a layer for rollover state of each item, for example change the background color to gray. See image below:

DifferentLayersofText_Colour
 
5.    Similarly, create a group called ‘Clicked’ and create layers under it to depict the active state as shown over here:

DifferentLayersofText_ActiveState
 
6.    Next, we will slice the image into three, to create different menu items in various states. We will begin with the normal state; hence hide all the layers in Rollover and Active state by putting off the layer visibility of both the groups.
 
7.    Go to View > Rulers or key in the shortcut ‘Ctrl + R’ to display horizontal and vertical rulers in the workspace. Then drag the vertical ruler, from the top-left corner, to divide the image into three. See the blue lines appear on the screen. (See image below)
 
Rulers
 
8. Then choose the Slice tool SliceTool from the Toolbox and then from the Slice Toolbar (visible below the menu bar), choose ‘Slices From Guides’.
SlicesfromGuides
LayerswithDimensions
You can adjust the dimensions to create all the items of same width before you create slices.
9.    To save the slices, go to File > Save for Web & Devices… The window looks like this.

SaveforWeb&Devices
 
The window may seem complicated with multiple options, but for our purpose we need to take care of only those options that are highlighted in the image above.
 
a.    Choose a file format. PNGs would work best but JPEG would be fine.
 
b.    Notice the brown line around the item ‘Services’. That depicts that only that slice is selected. Hold down the ‘Shift’ key and using your mouse, click on the other two slices to select the entire image.
 
c.    The size of the image and time for loading each of these images is shown according to the format chosen. The above image shows the size and loading time if these slices are saved as GIF.
 
d.    Note the image size. (We would require this later.)
 
 
10. Click Save. Enter a file name for instance, we are saving three files for normal state, we would save them as ‘normal_menu.png’. Also make sure the option “All Slices” is selected in the ‘Save Optimized As’ window.
 
NOTE: When the slices are saved they are saved as normal_menu_01, normal_menu_02 and normal_menu_03. You can rename them as ‘normal_menu_home’, ‘normal_menu_about’ and ‘normal_menu_services’ to make them relevant.
 
11. To save the menu items in Rollover state, make the group visible. The rulers and slices will be already applied. All you have to do is follow steps 9 and 10.
 
12. Repeat same steps to save menu items in Active state. Remember to switch off the visibility of Rollover state before you save images for the Active state.
 
13. All the images will be saved in an ‘images’ folder at given path.
You will now have 9 images – Each menu item has 3 state images. Our next step would be to display the menu and add the state change code in Microsoft Expression Web.
Create the navigation menu in Microsoft Expression Web 3
In Expression Web, create 3 pages; ‘home.html’, ‘about.html’ and ‘services.html’; one page for each menu item. Also create a style sheet called ‘page_style.css’. Then follow these steps:
1.    Open ‘home.html’. Switch to Design view or Split view.
 
2.    Place your cursor in the page and choose a bulleted list (unordered list) from the Formatting toolbar.
 
3.    Then place the cursor inside the first item of the list (<li>) and right click. From the menu choose ‘Hyperlink’.
 
4.    In the Insert Hyperlink window; in the ‘Text to display’ box type ‘Home’ and in the Address bar type in ‘/’ which will take you to the root/home. Click OK. You will find the hyperlink in a bulleted list. But do not worry; we will soon get rid of these bullets and then replace the navigation menu with the images we created earlier.
 
5.    Hit the enter key and move to the next item. Repeat same steps to add About Us and Services hyperlink. Link them with appropriate paths to respective pages.
If you switch to the code view or split view, you will find the code given below:
CodeView

Now we have to add class selectors to lists and the anchor elements to stylize them and add the behaviors for rollover and active state.
 
Adding selectors to get rid of the bullets
 
1.    In Apply or Manage Styles panel (known as task pane in earlier versions of Expression Web), click ‘New Style…’ to open the New Style dialog box.
 
2.    To make the unordered list, look like a horizontal menu, do this in the New Style dialog box.
Selector: ul#menu
Define in: Existing style sheet
URL: page_style.css (Path to your style sheet)
In List category, set list-style-type: none
Click OK to close the dialog box.
 
NewStyle
 
3.    Then select the entire unordered list (<ul></ul>) in the Design view, or place your cursor inside the <ul> in Code view, in Apply Styles panel, right click on the style ‘ul#menu’ and choose ‘Apply Style’.
 
4.    The style would now be applied to the list and the list will now look like:
List
 
 To fit the images into a single line
 
1.    In Apply or Manage Styles panel, click ‘New Style…’ to open the New Style dialog box.
2.    Selector: ul#menu li
Layout - display: inline
 
 
Adding selectors to stylize the anchor elements inside the list
 
1.    In Apply or Manage Styles panel, click ‘New Style…’ to open the New Style dialog box.
 
2.    Selector: ul#menu li a – This will select all the anchor elements inside the <li> tag under <ul> only with id menu.
Block – text-indent: -99999px – To get rid of the text, since our image will display the text.
Position – height: 200px – Specify the height of the images. Since they are a part of the navigation menu, all images should have the same height, though widths may differ.
Layout – display: block and float: left
Click OK to close the dialog box.
 
3.    You will find that the text has disappeared and some blank boxes with dotted borders are visible. Be patient! Our next step will completely transform the picture.
 
Adding a normal state
 
1.    In Apply or Manage Styles panel, click ‘New Style…’ to open the New Style dialog box.
 
2.    Selector: ul#menu li a.home – To assign a class home to the anchor element inside the <li> tag under <ul> only with id menu.
Background – background-image: images/normal_menu_home.png; background-repeat-no-repeat;
Position – width: 200px – Mention the actual width of each image.
 
3.    Set the same properties for ul#menu li a.about and ul#menu li a.services.
 
4.    Apply these styles to respective menu items. The code would be as shown here:
 
<ul id="menu">
          <li><a href="/" class="home">HOME</a></li>
          <li><a href="/about.htm" class="about">ABOUT US</a></li>
          <li><a href="/services.htm" class="services">SERVICES</a></li>
         
</ul>
 
Save the page and preview in the browser.
 
PreviewintheBrowser
 
We have now achieved the first step of the state change behavior. The normal states are clearly visible. Now we will code for the rollover and active state.
 
Adding a Rollover state
 
To achieve the rollover state, we just need to replace the background image (normal_menu_home.png) with the rollover state image (rollover_menu_home.png). Follow these steps:
 
1.    In Apply or Manage Styles panel, click ‘New Style…’ to open the New Style dialog box.
 
2.    Selector: ul#menu li a.home:hover
 
3.    Background – background-image: images/rollover_menu_home.png; background-repeat-no-repeat;
 
4.    Repeat the same for about (ul#menu li a.about:hover )and services (ul#menu li a.services:hover)
 
5.    Save the page and preview in the browser.
 
ActiveStatePreviewinBrowser
 
Adding a Active state
 
To achieve the rollover state, we just need to replace the background image (normal_menu_home.png) with the rollover state image (rollover_menu_home.png). Follow these steps:
 
1.    In Apply or Manage Styles panel, click ‘New Style…’ to open the New Style dialog box.
 
2.    Selector: ul#menu li a.home:active
 
3.    Background – background-image: images/rollover_menu_home.png; background-repeat-no-repeat;
 
4.    Repeat the same for about (ul#menu li a.about:active )and services (ul#menu li a.services:active)
 
5.    Save the page and preview in the browser.
 
ActiveStatePreviewinBrowser_1
Conclusion
The purpose of this article was to help you create menus with some interactive effects. Though this is not the only method to achieve this, there are other effective methods too. Also since we are using 3 images per menu item, each of every state, the number of requests sent to the server, are more. Hence the page may take little longer to load. But I hope you found this article helpful and now you should be able to create state change menus efficiently.
 
I hope you enjoyed reading this article and I thank you for viewing it.
If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook