How to put menus in your content...

We use the jQuery code library for FreeToastHost, but in reality any club can make use of some of its features.

Here is how to set up real, functioning menus, including with submenus in your home page, meeting info page, or custom page...

In the simplest sense, all that is needed is just an unordered (bulleted) list which you can easily create with the rich text editor. However, typically you will want your menu to do something when someone makes a selection from the menu, so generally I would recommend that each item in the list be made into a hyperlink using the link icon of the editor. These links could direct a website visitor to one of your other webpages, including an unlisted page, or to an external website/webpage. What this does is to allow you to set up a very simple navigation menu that can have sub-menus in it and takes up less space than the standard FTH menus. BTW, we will be using these menus in the future as part of the system interface, so for now, I am enabling you to get ahead of our implemented user interface.

First of all, for a single level menu, copy the following to the clipboard to use as a template for your menu...
Alternately, for a multi-level menu, copy the following to the clipboard to use as a template for your menu...
Please copy the above to an empty custom web page in Source View, then you can test it out until you get it working the way you want. In practice, you will want to convert the text inside each <li></li> pair to a link enclosed in <a href=" mytarget.com ">Link Text so that the menu actually takes the user some place when an item is selected.

---

There are two parts to this... (must be created in Source View for best results)
1. An overall enclosing <ul> block that encloses the overall list. Use the "userMenu" class as indicated to make FTH automatically convert this to a menu--FTH does the script part, then. You can have an id specified (e.g. like "myMenu"), but it is optional. (If you use an id then put your club number on end to make sure you do not clash with FTH ids.) Including script text is not necessary. FTH will handle setting this up as long as you correctly use the "userMenu" class name.

2.a. <li> blocks. (list items) You need one of these for each menu entry, like I am showing above. These define the text that is shown on the menu, but do not define what happens when that item is selected. To make the item do something when selected, convert each item to links inside the <li></li> pairs.

2.b. Each <li> block can contain another, "nested" list starting with another <ul> tag. This nesting is how you get submenus.

---

Again, no JavaScript is needed for this if you use the "userMenu" class name as indicated above. This is an FTH 2.20 advanced feature.

Do not use the same ID as I used above--make up your own and append your club number it to make them distinct from those used in FTH. (otherwise you can create name clash problems)

If you view the above in normal editor WYSIWYG view, you will just see a bulleted list. You have to save your page and exit the Admin Console to see the actual menu.

Enjoy! Please share your webpage address on here so that we can admire your work!

How can I change the UserMenu background color?

d29.toastmastersdistricts.org/menu.html

My hunch is that you could put a in the ul tag. (or similar with your desired color code)

Look up online references on HTML to help you get it right. My objective with this is *not* to teach people HTML... there are plenty of available online references for that.

Steve,

Thank you. I was trying in the li tag and it was suppressing onMouse background color.

Steve, I've tried creating sub-menus using the directions you've listed, but find that only the first two links work from the sub-menu . The third and beyond default to the home page. I can use the same URLs from a browser and link directly to the page desired using the same URL. We publish a weekly newsletter and there are too many for the main menu. I need to create a sub-menu for Newsletters.

Note -Another issue has to do with the quality of the newsletter image when uploaded to FTH. An image that has excellent quality before being uploaded has poor quality once on the FTH website. Since PDFs can't be used is there any way this can be improved? Thanks in advance #2284

If you must an image for your newsletter use a PNG image the text will resize much better.