Skip to: Main Content Search Main Navigation Audience Navigation

Ohio University is open

Portion of West Union Street remains closed following multiple structure fire. More Information
 

V8 -- Pop-Up Menus:  Using

Pop-up menus and drop-down link lists are both multiple choices that appear ("pop-up") when the mouse is clicked on a specific location. Both of these menus are implemented with Javascript, and thus will work only with browsers that have the Javascript capability, and have that feature turned on; this is clearly the majority of your audience, but not all of it. Pop-up Menus can generate choices on-screen whose type face is extremely difficult to read when viewed with some browsers, so if you do decide to use pop-up menus, be sure to set the type face, as discussed in steps 11-14, below. Both Pop-up Menus and Drop-down lists are created and used within the context of a single page; if you will want to use the same pop-up menu on multiple pages, those pages should share a template, and the pop-up menu should be constructed in that template. Drop-down link lists are a specific choice from the Hyperlink section of the Element Gallery, which you will find works quite similarly to the Pop-up Menus as discussed in detail next.

Pop-up Menus will not work with the Lynx browser, nor with any modern browser whose user has decided not to trust scripting. Further, many search engines will not follow any links pointed to by the pop-up menu choices. You should therefore not use them on any page intended for viewing by a general audience, unless you also provide conventional links that lead to the same destinations, either directly or by way of an intermediate navigational page. They may be appropriate to use in cases where you know that everyone looking at your page will be using Internet Explorer (e.g., students in a specific teaching lab where personal assistance is available for visually impaired students). A future version of CommonSpot may be enhanced so that non-scripting browsers will have a functioning link to the first choice in the pop-up menu. Once that is in place, you can, if you haven't already done so, place the navigational page with links to other choices as the first choice in the menu, and not need to have any other link to that page.

  1. Login, navigate to the page where you want to define the pop-up menu, and choose "Work on this Page" or "Work on this Page (All Changes).

  2. Click the "Manage" button in the content-spanning toolbar; select "Pop-Up Menus..."

  3. Click on "Add Menu..." and specify a menu name. If you know what you want, you can change the other characteristics at this time; if not, then you can edit them later.

  4. Click on the "Save" button.

  5. Observe the yellow work-in-progress tool for the menu you just created; click on it and select either "Submit entire element for publication..." or "Submit entire page for publication..."; fill in the publication comment and click on "Submit." (You may be able to skip this step.)

  6. Click on the pencil icon for the menu you just created, and select "add menu item".

  7. Complete the information in the "new menu item" window: the "item text" will be the visible choice for that item on the menu.

  8. Click on the pencil icon to establish the link destination for that item; as usual, you may link to an existing page, a newly uploaded document, etc.; in class, link choice A to existing page "sampleA.cfm," etc. Click on the "Save" button of the Insert Link lightbox when you have established the destination.

  9. Click on the "Save" button of the New Menu Item lightbox when you are done working on that item. 

  10. Repeat steps 6 through 9 as needed to include as many choices in the pop-up menu as you want to at this time. You will be able to add choices later, and when you do, they will appear "immediately" in all places where that pop-up menu is linked.

  11. Click on the pencil icon for Page Level Menu Properties above the menu (or list of menus).

  12. Toward the top of the Edit Page-Level Menu Properties lightbox, you will find the opportunity to specify the "Separator Color"; type in "#000000" (without the qoutes; that is a pound sign, which is required, followed by six zeros, with no spaces). This works around a bug in Internet Explorer 6.

  13. About halfway down the Page-Level Menu Properties dialog box you will find "Font, Size & Attributes"; select "Ohio Default" for Font, a size of "x-small" or larger, and clear the bold and italic check-boxes if they are already checked.

  14. Click on "Save."

  15. Click on any of the yellow work-in-progress icons and submit the entire page for publication (at this time, that appears to be the only way to activate the page-level menu properties change); in class, wait your turn to click on the "OK" button.

  16. Click on the "Close" button for the "Manage Pop-Up Menus" dialog box. 

  17. Go to the place on the page where you want to have the pop-up menu appear, and click on "Click to insert new element" (if that choice is not available, you may have to add a row or column).

  18. Build your new link as usual, choosing "Link" Element Gallery's "Link & List Elements" category. 

  19. Click to define the link element; fill in the Link Header (the text to be linked); and click "Next".

  20. In the Link Action lightbox, choose a New Type of "Pop-Up Menu" and then choose the pop-up menu you want to use there from the list of available choices (which will include any pop-up menu that is defined on this page or on any of the templates that it is derived from); then click "Save" to create a link to the pop-up menu.

  21. Use Preview mode to check your work.

  22. Click on the yellow work-in-progress icon to "Submit entire page for publication"; in class, wait your turn to click on the "OK" button.

  23. Select "View Page as Published" and click on the link to display the pop-up menu options.

If the CommonSpot tool icon menus fail to collapse when you move the mouse off of the gray block, just use the browser's "Refresh Page" function.