DropDownMenu < MarSol

---+!! <nop>DropDown Menu

You can easily add a beault _(and CSS formatable)_ drop-down menu to a web with *accessibility* navegation 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.

%TOC%

---++ Example
<!--
   * Set MENU_ID = menuTeste
-->

<style> /* <pre> */
%STARTSECTION{"css"}%

#%MENU_ID% ul{
  margin: 0px;
  pading: 0px;
}

#%MENU_ID% ul li{
  list-style: none;
  margin: 0px 0px 0px 15px;
  position: relative;
  float: left;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 12px;
}

#%MENU_ID% ul ul li{
  font-weight: 500;
  float: none;
  margin: 0px 0px 0px -40px;
  pading: 0px;
  border: none;
  background-color: none;
  border-top: 1px solid #F8F8F8;
  border-bottom: 1px solid #C0C0C0;
}
#%MENU_ID%.msie ul ul li{
  margin-left: 0px;
}

#%MENU_ID% ul ul{
  margin: 0px;
  clear: left;
  display: none;
  position: absolute;
  top: 20px;
  left: 0px;
  background-color: #E0E0E0;
  border: 1px solid #808080;
  width: 150px;
}
#%MENU_ID%.msie ul ul{
  width: 180px;
}

#%MENU_ID% ul ul ul{
  top: 5px;
  left: 50px;
}

#%MENU_ID% a:link,
#%MENU_ID% a:active,
#%MENU_ID% a:visited{
  text-decoration: none;
  color: #707070;
  overflow: hidden;
}

#%MENU_ID% ul ul a{
  padding: 0px 2px 0px 5px;
  display: block;
  background-color: #DCDCDC;
}

#%MENU_ID% ul ul a:hover{
  background-color: #EEE;
}

#%MENU_ID% ul ul a.linkSubMenu:link,
#%MENU_ID% ul ul a.linkSubMenu:active,
#%MENU_ID% ul ul a.linkSubMenu:visited{
  font-weight: 800;
}
%ENDSECTION{"css"}%
/* </pre> */ </style>

<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>
<br style="clear:left"/>

You only need a list. Better if it is a TWiki list. All list itens must be links, except the parents of the sub-menus like this:
<verbatim>
<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>
</verbatim>

This TWiki code makes the menu above as a big example _(not realy useful)_:
<verbatim>
<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>
</verbatim>

You can see the real world using this hire:
   * http://Colivre.coop.br
   * http://SaferNet.org.br
This websites are TWiki based and the site menu uses this !DropDown Menu.

%STARTSECTION{"js"}%\
<script type="text/javascript" %IF{"$'DO_NOT_LOAD_PROTOTYPE'='on'" then="nop" else="src"}%="%PUBURL%/%WEB%/%TOPIC%/prototype.js"></script>
<script type="text/javascript">
<!-- // <pre>

if ( document.all ) {
  // add a class for work arround msie&#180;s css bugs
  $("%MENU_ID%").className += " msie";
}

var zIndex = 10;

$$("#%MENU_ID% ul ul").each( function( ul ) { // para cada UL de sub-menu faça:

    // Pega o link que abre este sub-menu:
    var linkText = ul.parentNode.firstChild;
    // Retira espaço em branco sobrando nas bordas deste:
    linkText.nodeValue = linkText.nodeValue.replace( /^\s*|\s*$/g, "" );

    // Create a link to open this sub-menu:
    var link = document.createElement("a");
    link.href = "#";
    link.className = "linkSubMenu";
    linkText.parentNode.insertBefore( link, linkText );
    link.appendChild( linkText );
    link.parentNode.style.zIndex = zIndex++;
    link.subMenu = ul;
    ul.linkControle = link;

    link.openSubMenu =
      function ( isMouseClick ) {
        if( this.subMenu.style.display == "block" ) {
          if( isMouseClick ) {
            this.subMenu.style.display = "none";
          } else {
            clearTimeout(this.timeOutClose);
            clearTimeout(this.subMenu.timeOutClose);
            return false;
          }
        } else {
          this.subMenu.style.display = "block";
          clearTimeout(this.timeOutClose);
          clearTimeout(this.subMenu.timeOutClose);
        }
      }
    link.closeSubMenu = function(){ this.subMenu.style.display = "none" }

    link.onclick = function(){ this.openSubMenu(true); return false }

    // onmouseout e onmouseover manipulam o menu para pessoas normais
    // onblur e onfocus manipulam o menu para pessoas que precisam navegar com tab

    link.onmouseover = link.onfocus =
      function () {
        this.openSubMenu(false);
      };
    link.onmouseout = link.onblur =
      function () {
        this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
      };

    ul.closeSubMenu = function(){ this.style.display = "none" }

    ul.onmouseover = ul.onfocus =
      function () {
        this.blurCalledByIEWorkArroundBug = false;
        clearTimeout(this.timeOutClose);
        clearTimeout(this.linkControle.timeOutClose);
      };
    ul.onmouseout = ul.onblur =
      function () {
        if ( this.blurCalledByIEWorkArroundBug ) { return false }
        this.blurCalledByIEWorkArroundBug = true;
        this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
      };
});


////// INI - Work Arround Bug da disgraça do M$IE /////////////////////
if ( document.all ) {
  function forceUlFocusFromLink ( a ) {
    var stop = false;
    a.ancestors().each( function(el) {
      if ( el.id == "menu" ) { stop = true }
      if ( ! stop && el.onfocus ) { el.onfocus() }
    } );
  }
  function forceUlBlurFromLink ( a ) {
    var stop = false;
    a.ancestors().each( function(el) {
      if ( el.id == "menu" ) { stop = true }
      if ( ! stop && el.onblur ) { el.onblur() }
    } );
  }
  $$("#%MENU_ID% ul ul a").each( function( a ) {
    // os links do sub menu forçarão o foco do ul
    if ( a.className == "linkSubMenu" ) {
      a.onfocus = function() {
        forceUlFocusFromLink(this);
        this.openSubMenu(false);
      };
      a.onblur = function() {
        forceUlBlurFromLink(this);
        this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
      };
    } else {
      a.onfocus = function() { forceUlFocusFromLink(this) };
      a.onblur  = function() { forceUlBlurFromLink(this)  };
    }
  });
}
////// END - Work Arround Bug da disgraça do M$IE /////////////////////

// --> </pre>
</script>\
%ENDSECTION{"js"}%

---++ How to add the drop-down codebase?

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

   * On your CSS: %BR%
   =&lt;style&gt;= %BR%
   =(...)= %BR%
   ==%<nop>INCLUDE{"%WEB%.%TOPIC%" section="css" MENU_ID="%GREEN%your-menu-id%ENDCOLOR%"}%== %BR%
   =(and you can add more css for the menu hire, to make it personal)= %BR%
   =(...)= %BR%
   =&lt;/style&gt;=

   * Below your menu list: %BR%
   ==%<nop>INCLUDE{"%WEB%.%TOPIC%" section="js" MENU_ID="%GREEN%your-menu-id%ENDCOLOR%"}%==

If you already use =prototype.js= on your !TWikiWeb template, you can set =DO_NOT_LOAD_PROTOTYPE="on"= in the %<nop>INCLUDE% to it do not load the script again.
%BR% =%<nop>INCLUDE{"%WEB%.%TOPIC%" section="js" %RED%DO_NOT_LOAD_PROTOTYPE="on"%ENDCOLOR% MENU_ID="%GREEN%your-menu-id%ENDCOLOR%"}%=

---++ 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 =%<nop>INCLUDE%= section css.

Example:
<verbatim>
<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>
</verbatim>

=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:
<verbatim>
  #menu {
    /* a code for all */
  }
  #menu.msie {
    /* a code replace for IE */
  }
</verbatim>
And your CSS will not break the standards as the common CSS hacks.

%STOPINCLUDE%
%BR%

---++ Copying

This !AddOn is a licenced in the [[http://www.gnu.org/licenses/gpl-2.0.html][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:__ Main.AurelioAHeckert - 29 Aug 2007

------
Source URL: TWiki:Plugins.DropDownMenuAddOn
This topic: MarSol > WebHome > ProjetoGrafico > DropDownMenu
Topic revision: r1 - 13 May 2008 - 16:57:18 - ValessioBrito?
Copyright &Â© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback