Welcome, Guest
Username: Password: Remember me
1. The "search..." box above searches the Docs & Forum Posts. The "Search" tab above just searches the Forum Posts. :side:
Please use these to search for your issue *before* creating a new message topic, as your issue may have been previously solved.
2. Please put your Club # and Club Web Address in your Forum Signature (best) OR in each post to get faster support from us.
Click here to edit your signature at the bottom of the Profile Information tab.
3. Our user and admin docs are available at: https://support.toastmastersclubs.org/doc "There's a doc for that!" ;)
3a. There is a New "Opt In" Feature for newly added members. It also explains the strikethrough member information. Click Here to View the Post
4. When posting a New Topic , please include all relevant details and be specific. When did your issue 1st occur? What operating system, browser, & browser version are you using? Did you refresh your browser cache? Are your cookies enabled? Lastly, a screen shot is often helpful.
5. Please abide by the Terms of Use . We are volunteers contributing our spare time. We are happy to assist you, so long as you are respectful and courteous.
6. We are always looking for new FreeToastHost Ambassadors to join our ranks and support fellow Toastmasters in their use of the FreeToastHost website system. If you are familiar with the system and have some interest, send a Private Message to RogerM.
  • Page:
  • 1

TOPIC: How to put menus in your content...

How to put menus in your content... 3 years 7 months ago #45433

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Offline
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10469
  • Karma: 145
  • Thank you received: 2833
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...
<ul id="myMenu" class="userMenu">
	<li>Menu Entry 1</li>
	<li>Menu Entry 2</li>
	<li>Menu Entry 3</li>
	<li>Menu Entry 4</li>
	<li>Menu Entry 5</li>
</ul>

Alternately, for a multi-level menu, copy the following to the clipboard to use as a template for your menu...
<ul id="myMenu" class="userMenu">
	<li>Menu Entry 1</li>
	<li>Menu Entry 2</li>
	<li>Menu Entry 3
		<ul>
			<li>Sub-menu Entry 3-1</li>
			<li>Sub-menu Entry 3-2</li>
			<li>Sub-menu Entry 3-3</li>
			<li>Sub-menu Entry 3-4</li>
			<li>Sub-menu Entry 3-5</li>
		</ul>
	</li>
	<li>Menu Entry 4</li>
	<li>Menu Entry 5</li>
</ul>

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</a> 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!
The following user(s) said Thank You: Jane Atkinson, Pam, LindaMann
Last Edit: by SteveTheTechie.
The topic has been locked.

How to put menus in your content... 3 years 3 months ago #50240

  • harminder
  • harminder's Avatar
  • Offline
  • FTH Senior Poster
  • FTH Senior Poster
  • Posts: 49
  • Thank you received: 7
How can I change the UserMenu background color?

d29.toastmastersdistricts.org/menu.html
Brambleton Toastmasters
#03025105
Tech Toast
#04005547
The topic has been locked.

How to put menus in your content... 3 years 3 months ago #50243

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Offline
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10469
  • Karma: 145
  • Thank you received: 2833
My hunch is that you could put a
style="background:red;"
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.
The following user(s) said Thank You: LindaMann
Last Edit: by SteveTheTechie.
The topic has been locked.

How to put menus in your content... 3 years 3 months ago #50259

  • harminder
  • harminder's Avatar
  • Offline
  • FTH Senior Poster
  • FTH Senior Poster
  • Posts: 49
  • Thank you received: 7
Steve,

Thank you. I was trying in the li tag and it was suppressing onMouse background color.
Brambleton Toastmasters
#03025105
Tech Toast
#04005547
The topic has been locked.

How to put menus in your content... 8 months 4 weeks ago #67001

  • 2284DLV
  • 2284DLV's Avatar
  • Visitor
  • Visitor
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
The topic has been locked.

How to put menus in your content... 8 months 4 weeks ago #67002

  • Brian
  • Brian's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 7165
  • Karma: 111
  • Thank you received: 2134
If you must an image for your newsletter use a PNG image the text will resize much better.
The following user(s) said Thank You: LindaMann
Thank you

Brian McDonald DTM
Lead Freetoasthost Support
support.toastmastersclubs.org

Cataraqui Valley Toastmasters
www.catval.com
Club #9560

Past District Director District 61 for 2016-2017
Serving Eastern Ontario, Quebec, and Northern New York
www.tm61.org
The topic has been locked.

How to put menus in your content... 8 months 3 weeks ago #67011

  • Pam
  • Pam's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 2348
  • Karma: 18
  • Thank you received: 634

2284DLV wrote: 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


You seem to be looping around by creating submenu items that link to existing menu items (which means you'll have to keep all of the existing pages, even if you hide them).
You might have a better result if you upload your newsletters as pdf documents to file manager. After that you can make a page with links (and / or sub-menus) to the individual newsletters. You could even make submenus by year / month. You can also hide your public downloads page if there is nothing else of relevance stored there.
The following user(s) said Thank You: SteveTheTechie
Pam Holley, ACS, ALS
FreeToastHost Ambassador
VPM, Redlands Toastmasters Club 5836.toastmastersclubs.org
D69 Parliamentarian
Please add your Club Number to your profile signature (On Profile tab click Edit, then choose the Profile Information tab)
The topic has been locked.
  • Page:
  • 1
Moderators: SteveTheTechieGeorgeMarshallPam
Powered by Kunena Forum