Creating a Jump menu in Microsoft Expression Web 2
Posted by: Minal Agarwal ,
on 5/17/2009,
in
Category Expression Web
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:
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:
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’.
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’.
The Jump Menu dialog box would be prompted as shown below:
8. Click ‘Add’ to add an option to the menu. The following ‘Add Choice’ dialog box would open.
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:
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’.
This article has been editorially reviewed by Suprotim Agarwal.
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 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 Book 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 the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) 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!
Was this article worth reading? Share it with fellow developers too. Thanks!
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