Creating a Jump menu in Microsoft Expression Web 2

Posted by: Minal Agarwal , on 5/17/2009, in Category Expression Web
Views: 27678
Abstract: If you have lots of links on a page and do not want to display them all over the page, you can create a jump menu to save a lot of space. Learn how to create jump menus in Microsoft Expression Web 2 in this article.
Creating a Jump menu in Microsoft Expression Web 2
 
If you have lots of links on a page and do not want to display them all over the page, you can create a jump menu and save lot of space. In this article, we will learn how to create jump menus in Microsoft Expression Web 2.
A jump menu is a drop down menu with a list of links that link to files, documents or web sites. You can add a list of links to this drop down box. This way, you will save a lot of space by avoiding multiple rows of links on your page. You can organize your links in a better way.
Expression Web has made it quite easy to build jump menus by adding the drop-down box objects and then inserting a Jump Menu behavior for it. Let us now see how to do that.
To create a jump menu
1.    Switch to Design view. Expand the Form Controls group in the Toolbox task pane.
 
2.    Click on ‘Drop-Down Box’ and drag it onto the page. Place it where you want the menu to be created. A small drop-down box would be created as shown below:
 
Insert Drop Down Box
 
3.    Click on the small rectangles displayed at the corners of the drop-down box to adjust its size.
 
4.    Right click on the box and choose ‘Field Properties’. This will launch the ‘Drop-Down Box Properties’ window as shown below:
 
Drop Down Box Properties
 
5.    Enter a relevant name for the box e.g. Search. A blank <option> will be automatically placed in the box, when you create it. (Highlighted in above image)If you go to the code view, the code would be as given below:
 
<form method="post">
     <select name="Select1" style="width: 181px">
              <option> </option>
     </select>
</form>
 
The <option> tags contain the values that are displayed in the drop down. The value entered in the first <option> tag would be displayed in the box. This value will help the users determine what choices he can make in that drop-down box. So we will modify this <option>. This can be done in two ways. Either type the value manually in between the <option> </option> tag in Code view or in the Drop-Down Box Properties window, click on ‘Modify’ to add an initial display value to the drop-down box. Enter a ‘Choice’. This value would always be displayed in the drop-down when the page is loaded or when no option is selected. Choose the ‘Initial state’ as ‘Not selected’.
 
Modify Choice Window
 
NOTE: If a blank <option> is not added by default then in the Properties box choose to ‘Add’ it.
 
6.    From the Task Panes menu choose Behaviors. The Behaviors task pane would be activated. Find it along with the Apply/Manage Styles task panes.
 
7.    Choose ‘Insert’ and from the menu click on ‘Jump Menu’.
 
Insert Behavior
 
The Jump Menu dialog box would be prompted as shown below:
 
Jump Menu Window
 
8.    Click ‘Add’ to add an option to the menu. The following ‘Add Choice’ dialog box would open.
 
Add Choice Window 
9.    Enter the ‘Choice’ which is the name that will be displayed in the drop-down and ‘Value’ which could be a link to a page, file, or a website. Click OK to exit from here, and OK in the Jump Menu window.
 
10.Choose to open the URL in the same window or a new window by choosing the option in ‘Open URLs in:’ (See image – Jump Menu dialog box) ‘Page Default (none) would cause the new page to open in the current window, whereas ‘New Window’ would launch it in a new window.
 
11.Save your page and preview it in the browser. The Jump menu would look like:
 
Preview of Jump Menu
 
If you choose Google Search you would be taken to ‘www.google.com’ and if you choose Microsoft Live Search it will take you to ‘www.live.com’.
I hope this article has made you familiar with what jump menus are and how to use them to link you pages or websites. 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