The perfect menu

Here's the sample module I put together that originated from creating a TOC that added pages only after they are visited. The sample has a drop-down list, a text block and bulleted list format. In each example, the chapter and page are added and could be adapted to exclude chapters or include sections.

It's admittedly pretty "raw" since it's heavily code based (jQuery, JavaScript, CSS), so I consider it a foundational work in progress.

Tim, this is pretty interesting timing again...I've been working on a TOC that dynamically adds pages and chapters as a learner completes them. It's more geared for "linear" modules, but could also be applied when there are specific branches, with some that aren't "required". I combined some jQuery, JavaScript, and CSS to create a drop-down list, plain text, and bulleted text.

I did a bit of markup and explanation pages for less coding saavy users.

I'm going to run through it one more time for bugs, but I think it was pretty much ready on Friday.

Password access to allow administrators to jump anywhere in the TOC regardless of progress. (Yes, I know about the "dev mode" idea and use it frequently.)

Ability to include images (automatic thumbnails of pages or custom images).

Thanks for the replies. I like the idea of an admin password. It should not be too complex to write something that enables the menus in dependence on an entry field.

I must admit I'm a bit beyond writing the concept. The current version doesn't have room for images, although it's a great idea. Maybe in the v2.

I attached a screenshot of the first draft. Green = completed, Yellow = Current page, Grey = not started, Orange = bookmarked.

The current version of the disabling mechanism would disable all buttons that lead to pages that are not completed, only the next page is enabled even if it's not started.

undefined

Perfection is in the eye of the beholder ;-)

Of course I don't expect it to actually be perfect (whatever that might be) and rather meant to initiate a discussion about how to improve Lectoras Menu Object.

Not sure there can be such a thing as a perfect menu. The requirements of each project/audience can be so different that there will never be a 'one size fits all' solution.

That does look good though Tim.

I like Jason's menu very much and can see its applicability in several courses we're working on. It's nice to only be able to access the pages a user has already completed, but it would be awesome if they could see the other pages, just not be able to access them. I can achieve this today by allowing users to go to a given page and displaying a redirect message if they have not completed it, but it would be nice if this were built in to the menu. Perhaps visible, but grayed out?

Hi Jason,

I don't think there's need for two threads about custom menus.

It may be easier to build your menu with all functionalities initially and disable the options you don't want to be active by using jQuerys .prop(). You can style the disabled options in CSS with option:disabled{}

Thanks, @clammers - I hope others could use the model and even adapt it to their own needs.

One thought about your idea is to create classes for active/inactive options (i.e. undefined and don't add the "href" to the option initially. Then at page load, update the option class to the active class instead of adding the option the way my sample does. The class could be text styling or changing the background image, etc.

This may not work on the drop-down list, however. I was researching how to style the drop-down list options and it appeared that how the list appears in the drop-down is based on the browser settings and/or user's system settings. I did find this post on StackOverflow, but haven't had a chance to experiment with any of the suggestions.

I'm not sure if there's a way to "scrape" the pages on a site to use them as options, so hand-coding the entire TOC might be required.

@TimK - If I'm "hijacking" this thread, let me know and I'll start a new one :)

Why can't this be done in Lectora? Currently the default menu is set with Go To actions for each chapter, but it's not editable. I'd love to see a condition here that we can set to "if the previous chapter is complete". That seems so simple to add and yet would make my life SO MUCH easier!