%META:TOPICINFO{author="ProjectContributor" date="1326323056" format="1.1" version="1"}%
%META:TOPICPARENT{name="Skins"}%
---+!! <nop>JQueryMenuSkin

A functional skin that provides a customisable menu navigation system based on the JQuery Superfish plugin.

%TOC%

---++ Overview

<nop>JQueryMenuSkin is a simple JQuery-based skin which utilises the <a href="http://users.tpg.com.au/j_birch/plugins/superfish" target="_blank">Superfish menu plugin</a> (which is supplied with the JQueryPlugin extension) to provide an alternative menu-based navigation system for Foswiki users. 

This lightweight skin is designed to run on top of the default Pattern skin. (See [[#Settings][Settings]] section below for details) 

---++ Installation

*Note:* You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where Foswiki is running.

   * Install the skin using the [[%SCRIPTURL{"configure"}%?action=FindMoreExtensions][Install and Update Extensions]] %ICON{"lock"}% (Admins only)
   * Test if installed:
      * Standalone:   %SCRIPTURL{"view"}%/%WEB%/%TOPIC%?skin=jqmenu
      * With <nop>PatternSkin:   %SCRIPTURL{"view"}%/%WEB%/%TOPIC%?skin=jqmenu,pattern
   * For skin activation see [[%SYSTEMWEB%.Skins]]

---++ Settings

To activate the skin you can use the following settings just add them to [[%USERSWEB%.SitePreferences]], WebPreferences, or your personal page.

The minimal requirement to use the skin is to set your *SKIN* definition to include *jqmenu* as shown: (Order is important!)
<pre>
      * <nop>Set SKIN = jqmenu,pattern
</pre>

Typically this skin is used where the Web Left Bar is hidden. You should set the following in the same location as you defined the *SKIN* setting above if you wish to hide the (details of how to do this can be found here: System.PatternSkinCssCookbookNoLeftBar)

---++ Customisation

In order to be able to safely upgrade this skin it is recommended that you define your own menu by copying the topic [[%SYSTEMWEB%.JQueryMenuSkinBarDefault]] to a new topic of your preference. You can define the name of the topic using a [[%SYSTEMWEB%.PreferenceSettings][Preference]] setting in [[%USERSWEB%.SitePreferences]], WebPreferences, or your personal home topic as follows: 

<pre>
   * <nop>Set JQUERYMENUSKINBAR = %<nop>USERSWEB%.MyMenuBar
</pre>

%I% WYSIWYG editing should be disabled on your personalised topic to ensure the menu does not get corrupted. You can do this as follows in your customised menu topic: (See %SYSTEMWEB%.TinyMCEPlugin for full details)

<pre>
   * <nop>Set TINYMCEPLUGIN_DISABLE = 1
</pre>

---+++ CSS Styling
You can also customise the CSS applied to the menu by copying the default *menu.css* file %PUBURL%/%SYSTEMWEB%/%TOPIC%BarDefault/menu.css and attaching it to your customised  menu topic as follows:

<pre>
   * Set <nop>JQUERYMENUSKINCSS = %<nop>PUBURLPATH%/%<nop>USERSWEB%/MyMenuBar/menu.css
</pre>

You can also simply overwrite CSS for the default menu definition JQueryMenuSkinBarDefault with the above setting.

---++ 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.


---++ Info

|  Author(s): | Padraig Lennon |
|  Copyright: | &copy; Foswiki:Main.PadraigLennon |
|  Screenshot: | <a href="%ATTACHURL%/screenshot.png"><img src="%ATTACHURL%/screenshot.png" style="border:1px solid #eee;" alt="Click for full screen image" width="600" /></a> |
|  Preview: | [[%SCRIPTURL{view}%/%WEB%/%TOPIC%?skin=jqmenu][Preview with this skin]] |
|  Base Name: | jqmenu |
|  License: | [[http://www.gnu.org/licenses/gpl.html][GPL (Gnu General Public License)]] |
|  Release: | 0.1.2 |
|  Version: | 14381 (2012-03-19) |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  19 Mar 2012: | Foswiki:Tasks.Item11676 (v0.1.2) |
|  11 Jan 2012: | Foswiki:Tasks.Item10244 (v0.1.0) |
|  27 Dec 2010: | Foswiki:Tasks.Item10180 (v0.0.5) |
|  23 Dec 2010: | Foswiki:Tasks.Item10180 (v0.0.4) |
|  22 Dec 2010: | Foswiki:Tasks.Item10180 (v0.0.3) |
|  21 Dec 2010: | Added missing arrows (v0.0.2) |
|  21 Dec 2010: | Initial version (v0.0.1) |
|  Dependencies: | <table class="foswikiTable" border="1"><tr><th>Name</th><th>Version</th><th>Description</th></tr><tr><td align="left">Foswiki::Plugins::JQueryPlugin</td><td align="left">&gt;3.31</td><td align="left">Required</td></tr></table> |
|  Home page: | Foswiki:Extensions.JQueryMenuSkin |
|  Support: | Foswiki:Support.JQueryMenuSkin |

%META:FILEATTACHMENT{name="screenshot.png" attr="h" autoattached="1" comment="" date="1326323056" path="screenshot.png" size="8839" user="ProjectContributor" version=""}%