YuiMenuContrib

add a Menu (with popup sub menus) to your Foswiki

Usage

This Contrib allows you to add the dynamic Javascript menu from YahooUserInterfaceContrib - see http://developer.yahoo.com/yui/menu/

In WidgetsSkin, add a new widget to yout DefaultWidgets topic and then add that to the Design topic you are using.

In PatternSkin, it is easiest to add pattern_yuimenu to the SKIN setting eg Set SKIN=pattern_yuimenu,pattern in your SitePreferences. To try it out, add ?skin=pattern_yuimenu,pattern to the end of your URL -

Or add a Menu to your Foswiki, add the following to the appropriate place in your Skin.
%INCLUDE{"%SYSTEMWEB%.YuiMenuContrib"}%

You can customise each web's menu by copying the DefaultWebMenu topic into the WebMenu topic in the web you wish to customise.

You can also customise the entire side bar by creating a SiteMenu in Main by copying the DefaultMenu topic (requires advances TML knowledge).

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Topic selectors that make the three level defaulting work

Topic menu

%STARTINCLUDE%
%INCLUDE{
   "%IF{"istopic '%USERSWEB%.SiteMenu'" then="%USERSWEB%.SiteMenu" else="%SYSTEMWEB%.DefaultMenu"}%"
   MENUWEB="%MENUWEB%"
   section="topmenu"
}%
%STOPINCLUDE%

WebMenu defaulting

This way, SideBarMenu can INCLUDE the $web.WebMenu if it exists, or (using warn=) fall back to this topic, which will use the customised DefaultWebMenu topic in the Main or fall back to the default in this topic

%STARTSECTION{"webmenu-defaultselector"}%
%INCLUDE{
   "%WEB%.%TOPIC%"
   MENUTOPIC="%IF{"istopic '%USERSWEB%.DefaultWebMenu'" then="%USERSWEB%.DefaultWebMenu" else="%SYSTEMWEB%.YuiMenuContrib"}%"
   MENUWEB="%MENUWEB%"
   section="webmenu-builder"
}%
%ENDSECTION{"webmenu-defaultselector"}%

%STARTSECTION{"webmenu-builder"}%<ul>
%SEARCH{
       "^\|.*\|$" 
       web="%MENUWEB%" 
       topic="%MENUTOPIC%" 
       type="regex" 
       multiple="on" 
       casesensitive="on" 
       nonoise="on" 
       separator="" 
       format="$percntINCLUDE{
                            $quot%WEB%.%TOPIC%$quot
                            MENUWEB=$quot%MENUWEB%$quot
                            MENUTOPIC=$quot$pattern(^\|\s*([^\|\s]*)\s*\|.*)$quot
                            MENULABEL=$quot$pattern(^\|\s*[^\|\s]*\s*\|\s*([^\|]*)\s*\|.*)$quot
                            section=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*([^\|\s]*)\s*\|.*)$quot
                            EXTRA=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|([^\|]*)\|.*)$quot
                            SUBMENUWEB=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*([^\|\s]*)\.[^.]*\s*\|.*)$quot
                            SUBMENUTOPIC=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*[^.]*\.([^\|\s]*)\s*\|.*)$quot
                        }$percnt"
}% %IF{"'%MENUWEB%.%MENUTOPIC%' allows 'EDIT'" then="<li class='menu-edit-link'>[[%MENUWEB%.%MENUTOPIC%][edit menu]]</li>"}%
</ul>%ENDSECTION{"webmenu-builder"}%

%STARTSECTION{"element"}%<li>[[%MENUTOPIC%][%MENULABEL%]]</li>%ENDSECTION{"element"}%
%STARTSECTION{"submenu"}%<li>[[%MENUTOPIC%][%MENULABEL%]]
            <div class='yuimenu'><div class='bd'> %INCLUDE{
            "%WEB%.%TOPIC%" 
            section="webmenu-builder%IF{"istopic '%SUBMENUWEB%.%SUBMENUTOPIC%'" then="" else="-default"}%" 
            MENUWEB="%SUBMENUWEB%"
            MENUTOPIC="%SUBMENUTOPIC%"
            }% </div></div>
</li>%ENDSECTION{"submenu"}%
%STARTSECTION{"html"}%<li>[[%MENUTOPIC%][%MENULABEL%]]
            <div class='yuimenu'><div class='bd'> %EXTRA% </div></div>
</li>%ENDSECTION{"html"}%

%STARTSECTION{"webmenu-builder-default"}%<ul>
%SEARCH{
       "^\|.*\|$" 
       web="%IF{"istopic '%MAINWEB%.DefaultWebMenu'" then="%MAINWEB%" else="%SYSTEMWEB%"}%" 
       topic="DefaultWebMenu" 
       type="regex" 
       multiple="on" 
       casesensitive="on" 
       nonoise="on" 
       separator="" 
       format="$percntINCLUDE{
                            $quot%WEB%.%TOPIC%$quot
                            MENUWEB=$quot%MENUWEB%$quot
                            MENUTOPIC=$quot$pattern(\|\s*([^\|\s]*)\s*\|.*)$quot
                            MENULABEL=$quot$pattern(\|\s*[^\|\s]*\s*\|\s*([^\|]*)\s*\|.*)$quot
                            section=$quot$pattern(\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*([^\|\s]*)\s*\|.*)$quot
                            SUBMENUWEB=$quot$pattern(\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*([^\|\s]*)\.[^.]*\s*\|.*)$quot
                            SUBMENUTOPIC=$quot$pattern(\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*[^.]*\.([^\|\s]*)\s*\|.*)$quot
                        }$percnt"
}% %IF{"'%MENUWEB%.%MENUTOPIC%' allows 'EDIT'" then="<li class='menu-edit-link'>[[%SCRIPTURL{save}%/%MENUWEB%/%MENUTOPIC%?topictemplate=%IF{"istopic '%MAINWEB%.DefaultWebMenu'" then="%MAINWEB%" else="%SYSTEMWEB%"}%.DefaultWebMenu][create menu]]</li>"}%
</ul>%ENDSECTION{"webmenu-builder-default"}%

YUI JS and CSS sections

YUI support

%STARTSECTION{"yui-navigation-menu-js-yui"}%<script type='text/javascript' >
YAHOO.util.Event.onContentReady('yui-navigation-menu', function () {
       /*
            Instantiate a Menu:  The first argument passed to the
            constructor is the id of the element in the page
            representing the Menu; the second is an object literal
            of configuration properties.
       */
       var oMenu = new YAHOO.widget.Menu('yui-navigation-menu', {
                                               position: 'static',
                                               hidedelay:  750,
                                               lazyload: true });
       /*
            Call the 'render' method with no arguments since the
            markup for this Menu instance is already exists in the page.
       */
       oMenu.render();
   });
</script>
<style>
.yui-skin-sam .yuimenu .bd {
border: 0px;
padding: 0px;
}
/* hide foswiki tml created p's */
.bd p {
display:none;
}
.yui-skin-sam .yuimenuitem-selected {
background-color: #f5f5f5;
}
.yui-skin-sam .yuimenuitemlabel {
color:#000000;
cursor:default;
padding:10px;
text-decoration:none;
}
.yui-skin-sam .foswikiNewLink {
   border: 0px;
}
/* need to over-ride the overflow in Pattern Skin */
#patternSideBar {
overflow:visible;
}
.yui-skin-sam .menu-edit-link .yuimenuitemlabel {
padding-bottom:0;
padding-top:0;
text-align:right;
}
.yui-skin-sam .menu-edit-link .yuimenuitemlabel  :link:hover {
color: darkblue;
}
/* so that JS off displays all menu elements */
.yuimenu .yuimenu, .yuimenubar .yuimenu {
position:inherit;
}
/* IE6 fix */
.yui-skin-sam .yuimenu .yuimenuitemlabel {
   _zoom: 1;
}
.yui-skin-sam .yuimenu .yuimenu .yuimenuitemlabel {
   _zoom: normal;
}
</style>
%ADDTOHEAD{
   "yui-menu"
   requires="yui-menu-js, yui-menu-css"
   text=""
}%
%ADDTOHEAD{
   "yui-menu-js"
   text="<script type='text/javascript' src='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/yahoo-dom-event/yahoo-dom-event.js'></script>
        <script type='text/javascript' src='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/container/container_core.js'></script>
        <script type='text/javascript' src='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/menu/menu.js'></script>"
}%
%ADDTOHEAD{
   "yui-menu-css"
   text="<link rel='stylesheet' type='text/css' href='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/menu/assets/skins/sam/menu.css'>"
}%
%ENDSECTION{"yui-navigation-menu-js-yui"}%

Info

Author(s): Foswiki:Main.SvenDowideit
Copyright: © SvenDowideit@fosiki.com
License: GPL 3 (Gnu General Public License)
Version: 3164 (2009-03-18)
Change History:  
18 March 2009: add css element for parent nodes of currently selected node - and make grey
9 March 2009: change the WebMenu topic format to be a table to simplify editing
4 March 2009: fix IE6 rollover
12 Jan 2009: initial release
Dependencies:
NameVersionDescription
Foswiki::Contrib::YahooUserInterfaceContrib>=0uses YahooUserInterfaceContrib
Home page: http://foswiki.org/bin/view/Extensions/YuiMenuContrib

PackageForm edit

ExtensionClassification Information structuring and Search, Interface and Visualisation, User interactivity
ExtensionType SkinPackage
Compatibility Foswiki >= 1.0.0
DemoUrl http://
DevelopedInSVN Yes
ModificationPolicy ContactAuthorFirst
Topic attachments
I Attachment Action Size Date Who Comment
YuiMenuContrib.md5md5 YuiMenuContrib.md5 manage 0.2 K 18 Mar 2009 - 01:26 SvenDowideit  
YuiMenuContrib.tgztgz YuiMenuContrib.tgz manage 6.8 K 18 Mar 2009 - 01:26 SvenDowideit  
YuiMenuContrib.zipzip YuiMenuContrib.zip manage 9.7 K 18 Mar 2009 - 01:25 SvenDowideit  
YuiMenuContrib_installerEXT YuiMenuContrib_installer manage 4.6 K 18 Mar 2009 - 01:26 SvenDowideit  
Edit | Attach | Print version | History: r9 | r8 < r7 < r6 < r5 | Backlinks | View wiki text | Edit WikiText | More topic actions...
Topic revision: r7 - 18 Mar 2009, SvenDowideit
 
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. see CopyrightStatement. Creative Commons License