The perfect menu

timk Community Member Posts: 1,205 ♦ Idol ♦

I'm currently writing a concept for my upcoming research project: "The perfect menu" (working title). The aim of it is to produce a navigation menu that keeps all features that Lectora offers and adds further functionalities.

Current ideas:

Lectoras own features:
  • Automatic alignment with chapter / section / page names
  • Status indicators
  • Exclude chapters / sections / pages from the menu

Additional features:
  • Accordion display
  • CSS styled
  • Highlight current page
  • Disable navigation buttons depending on the users progress
  • Bookmark pages

I was wondering what (else) you'd expect from the "perfect" menu?

Thanks Tim


  • smiller7502
    smiller7502 Community Member Posts: 181
    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).
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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.

  • mallow76
    mallow76 Community Member Posts: 123
    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.
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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.
  • clammers
    clammers Community Member Posts: 123 ♪ Opening Act ♪
    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?
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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. <option class="inactive"> 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 :)
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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{}
  • jcs315
    jcs315 Community Member Posts: 14 ♪ Opening Act ♪
    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!