Tags:
accessibility1Add my vote for this tag css1Add my vote for this tag easy_install1Add my vote for this tag interaction_design1Add my vote for this tag javascript1Add my vote for this tag menu1Add my vote for this tag usability1Add my vote for this tag user_interface1Add my vote for this tag create new tag
, view all tags

DropDown Menu

You can easily add a beault (and CSS formatable) drop-down menu to a web with accessibility navigation based on a simple TWiki list.

Your menu HTML code will stay being a list of links (the best semantics for that). Good for google and other search bots, and good for text browsers. Some people need to navigate with the tab, because they are blind or has degenerative disease... this code enable to open sub-menus with tab focus.

Example


You only need a list. Better if it is a TWiki list. All list items must be links, except the parents of the sub-menus like this:

<div id="some-id">
   * [[Link 1]]
   * Link 2
      * [[Link 2.1]]
      * [[Link 2.2]]
      * [[Link 2.3]]
   * Link 3
      * [[Link 3.1]]
      * Link 3.2
         * [[Link 3.2.1]]
         * [[Link 3.2.2]]
      * [[Link 3.3]]
</div>

This TWiki code makes the menu above as a big example (not really useful):

<div id="menuTeste">
   * [[Web Home]]
   * TWiki Services
      * WebNotify
      * WebIndex
      * WebSearch
      * TWiki Groups
%SEARCH{ "TWiki"
         web="Main"
         topic="*Group"
         nonoise="on"
         limit="6"
         format="         * $web.$topic" }%
      * [[TWiki.TWikiRegistration][Registration]]
   * Admin Docs
%SEARCH{ "AdminDocumentationCategory"
         excludetopic="AdminDocumentationCategory"
         web="TWiki"
         nonoise="on"
         limit="6"
         format="      * $web.$topic"}%
   * [[Main.TWikiUsers][Users]]
</div>

You can see the real world using this hire:

This websites are TWiki based and the site menu uses this DropDown Menu.

Features

  • Multiple sub-menus suport
  • Open sub-menus with mouse over or with tab focus
  • Close sub-menus with mouse out or with tab blur
  • Formatable as easy you want with CSS
  • The generated HTML code is a common TWiki list with links, best semantics for search bots and text based browsers

Not happy? Some cull feature missing? Please, make a proposal!

How to add the drop-down codebase?

To have a DropDown menu on your web add this two red lines:

  • On your CSS:
    <style>
    (...)
    %INCLUDE{"Codev.DropDownMenu" section="css" MENU_ID="your-menu-id"}%
    (and you can add more css for the menu hire, to make it personal)
    (...)
    </style>

  • Below your menu list:
    %INCLUDE{"Codev.DropDownMenu" section="js" MENU_ID="your-menu-id"}%

If you already use prototype.js on your TWikiWeb template, you can set DO_NOT_LOAD_PROTOTYPE="on" in the %INCLUDE% to it do not load the script again.
%INCLUDE{"Codev.DropDownMenu" section="js" DO_NOT_LOAD_PROTOTYPE="on" MENU_ID="your-menu-id"}%

If you want to load the prototype in the <head> block (and that is better) put this line on your template:
<script type="text/javascript" src="%PUBURL%/Codev/DropDownMenu/prototype.js"></script>
and use the DO_NOT_LOAD_PROTOTYPE="on" in the %INCLUDE%.

How can i change the menu appearance?

Think in CSS ever.

All new repeated sets, resets the old set. So... Replace everything that you want by CSS after the %INCLUDE% section css.

Example:

<style> /* <pre> disable TWiki parser */

  body {
    color: #777;
    font-family: sans-serif;
  }

  %INCLUDE{"this topic" section="css" MENU_ID="menu"}%

  #menu ul ul a{
    padding: 3px 2px 3px 15px;
    background-color: #DCDCDC;
  }

  #menu ul ul a.linkSubMenu {
    color: red;
  }
  #menu ul ul a.linkSubMenu:hover {
    color: green;
  }

</style>

linkSubMenu is the class added to the link created to open the sub-menus.

Work around IE CSS bugs: If your personalization is getting some problem with IE, don't cry. The script add a msie class on the div parent of the menu list.

So, you cam make that:

  #menu {
    /* a code for all */
  }
  #menu.msie {
    /* a code replace for IE */
  }
And your CSS will not break the standards as the common CSS hacks.


Copying

This AddOn is a licenced in the GPL version 2 or (at your option) a later version.

When copy this to your TWiki, don't forget to copy the prototype.js attached in this topic or a newer version from http://www.prototypejs.org

-- Contributors: AurelioAHeckert - 29 Aug 2007

Feedback

Wishlist

When press enter on the sub-menu oppener link the focus must move to the this sub-menu.

-- AurelioAHeckert - 01 Sep 2007

Discussion

Brazilian Movie about accessibility: http://br.youtube.com/watch?v=NfF8KBy9U6I
(aqui você pode ver a importância da navegação com tab)

-- AurelioAHeckert - 29 Aug 2007

Does seem like a good alternative to TreePlugin

-- KwangErnLiew - 30 Aug 2007

Nice one. Could you possibly package this as a DropDownMenuAddOn in the Plugins web so that people can find it more easily?

-- PeterThoeny - 31 Aug 2007

Done Peter! smile

-- AurelioAHeckert - 31 Aug 2007

Cool, thanks Aurelio!

-- PeterThoeny - 03 Sep 2007

I changed the ModificationPolicy of this extension from ContactAuthorFirst to PleaseFeelFreeToModify due to inactivity. Anyone please feel free to work on this extension.

-- PeterThoeny - 2012-12-03


BasicForm
TopicClassification TWikiAddOnProduct
TopicSummary You can easily add a beault drop-down menu to a web with accessibility navegation based on a simple TWiki list.
InterestedParties

RelatedTopics DropDownMenuAddOn
Topic attachments
I Attachment History Action Size Date Who Comment
JavaScriptjs prototype.js r1 manage 94.1 K 2007-08-29 - 15:59 AurelioAHeckert  
Edit | Attach | Watch | Print version | History: r7 < r6 < r5 < r4 < r3 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r7 - 2007-09-20 - DavidWolfe
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.