Drop Down Menus
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:
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:
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:
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.
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’.