PortalParts.com Site

Author: Blaine Lang blaine@portalparts.com
Date: June 8, 2008
Version: 3.0

glmenu3.0_mainview.jpg

Geeklog version 1.4.1+ is required

Overview

The glMenu is a dynamic site menu builder for your site. It allows you to setup and define your block menu and site header menu using a easy to use administration screen. Menu’s are integrated and have permission based access definition. You have control over your block menu and site header menus to add/edit or delete menuitems online. Select from a pure CSS based menu or use the very flexible Milonic menu library and choose from a number of pre-defined menu styles.

Summary of features:

  • Foldered tree view provides the site administrator with the familiar interface to orgranize and define the site menu items
  • Each menuitem or submenu can have separate access rights so the menu can be different for normal logged-in or anonymous site members and privileged site members
  • Built-in support to generate core GL menu’s like the admin or user menu, plugin menuitems. Functions provided for the links and forum plugins
  • Online selection of a number of Milonic menu styles or extend and customize the menustyles
  • Generate pure CSS based menus and use the integrated menu color tool to style your menus
  • Support for custom php functions to generate menuitems automatically
  • Support for multi-language labels to automatically have labels change to match the users language preference
  • Able to define an optional image to appear for a menuitem

Plugin Installation

  • Step 1 - Restore the plugin Archive

Uncompress the archive files into your <geeklog_dir>/plugins directory. It will create a glmenu subdirectory for the files.

  • Step 2 - Create the required plugin directories for the program files
    • Create a directory called glmenu under your public_html/admin/plugins directory
    • Create a directory called glmenu under your public_html directory
  • Step 3 - Copy the the required plugin files
    • You will be copying the files from the restored plugin files to the new directories you just created.
    • Copy the files (contents) from the new plugin’s admin directory to the glmenu directory you just created under your sites main public_html/admin/plugins directory
    • Copy the files (contents) from the new plugin’s public_html directory to the glmenu directory you just created under your sites main public_html directory
  • Step 4 - Copy the the required theme files
    • Copy the directory called glmenu and contents from the new plugin’s themefiles directory to your sites theme’s directory. Assuming your site is running the professional theme this would be public_html/layout/professional directory where you would copy the glmenu template theme files - creating the new glmenu folder under public_html/layout/professional
  • Step 5 - Update or copy the lib-portalparts.php file
    • The plugins from portalparts use a number of common functions that are placed in the lib-portalparts.php file. Copy the file from the plugin archive to your system folder where there are other lib-xxxxx.php files
  • Step 6 - Run the plugin install
    • Logged in as ‘admin’ you can access the installer from the plugin editor [admin → plugins]

If the files have been copied correctly in step 2 and 3, you will see the new plugin to be installed

  • Congratulations - The plugin is now installed and you should see the new menu block


Back to the top

Upgrading the plugin

Same directions if you are using version 1.x or 2.x of glMenu
There are database changes from earlier versions so a database backup is recommended before running the plugin update.

  • Step 1 - Restore the plugin Archive
    • Before restoring the archive, you may want to backup or rename the plugins config.php so it is not over-written. You can then compare it after the update and re-apply your personal settings if you have changed them from the defaults
    • Make a backup of your Milonic licenced files if you have purchased the milonic library. These are located under public_html/glmenu/milonic
    • Uncompress the archive files into your <geeklog_dir>/plugins directory. You will need to replace all the files
  • Step 2 - Update your site’s plugin files
    • Suggest you delete current files and copy over the new files
    • Update all your sites main public_html/glmenu files
      • Note: This will over-write your licensed milonic files if they exist so copy and restore them after or do not copy over the milonic directory as part of the public_html/glmenu update
      • Note: If you were running version 2.x (CSS only version) of glmenu, you did not have a public_html/glmenu directory. Create the required directory for this version and copy the public_html files from the plugin archive - as noted for a new install
    • Update all your sites public_html/admin/plugins/glmenu files.
    • Update all your sites public_html/layout/{theme}/glmenu files.
  • Step 3 - Update or copy the lib-portalparts.php file
    • The plugins from portalparts use a number of common functions that are placed in the lib-portalparts.php file. Copy the file from the plugin archive to your system folder where there are other lib-xxxxx.php files
  • Step 4 - Run the plugin update
    • Access the plugin update from the Plugin Editor. The plugin listing will show the version installed and that an update is recommended. Using the Edit link by the plugin record, access the edit screen where there will now be an update button. Pressing [Update] will update the plugin to the latest version


Back to the top

Forum Plugin Upgrade

The forum plugin creates a menu which appears when on a forum related page. There is an option that can be enabled in the forum’s config.php $CONF_FORUM[’use_glmenu’]. Setting this to true when you have glMenu installed will render the menu in the style defined.

With version 2.5 of glMenu, the distributed plugin related functions need to be updated to auto-switch and pickup the new menu style related settings. In the glMenu v2.5 archive, is a directory extra, replace the plugins/forum/functions.inc file with the version under this directory and your forum menu should now automatically pickup the same style properties as the glmenu block menu definition.

Upgrading the Milonic License

The plugin is distributed with a demo version of the Milonic Javascript Menu library. You will notice the first link in your menu if you are running in the Milonic Mode will be changed to a link to the Milonic site. Purchasing a license from Milonic will allow you to replace the demo versions of the milonic files and your menu links will not be over-written. You can optionally investigate the free license option.

If you have purhased a full license, then you need to replace the four .js files located under the public_html/glmenu/milonic directory.

Useful Milionic site links:

Free Milonic license

Milonic Licenseing Info

Enabling the headermenu

The site header menu will not be enabled in your site theme after the glmenu plugin installation until you add the template variable {glmenu} to your header.thtml file in your theme directory. This {glmenu} template variable will be replaced when the page is generated with the contents of the menu. Using the default header.thtml file as an example you can see in the following code the changes. The {glmenu} template was added wrapped in a basic div and the html that was previously there for the {menu_elements} was removed.

<body dir="{direction}">
  <div class="header-logobg-container-outer">
    <table width="100%" border="0" class="header-logobg-container-inner">
       <tr>
         <td class="header-logobg-left">
            <a href="{site_url}/"><img src="{site_logo}" border="0"></a>
         </td>
         <td class="header-logobg-right">
            <span class="site-slogan">{site_slogan}</span>
         </td>
      </tr>
    </table>
  </div>
  <div>
    {glmenu}
  </div>
  <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      {left_blocks}

Menu Administration

Main Admin ScreenThe main admin screen for glMenu displays the site menu structure as a foldered treeview. Any defined submenu’s are shown as a folder that you can click on the [+] sign to expand to see the menuitems defined under this menu level. Your menu can have as many levels as you need. Clicking on a menuitem will show the menuitem properties as shown in the image on the left.

The Menuitem Detail display has four icons in the header that can be used to move the menuitem up/down in the order they will appear, edit or delete the menuitem. Clicking on the Enabled checkbox will toggle the menuitem from being displayed or not. Once disabled, it will appear hidden until you use the Show Disabled. Selecting Yes will show any currently disabled menuitems.

You can easily switch between showing the menuitems for the Block Menu or the Header Menu - Just select the menu from the navbar menu.

Add Menu Item or Edit Menu Item

Edit Menu ItemClicking on the Add new entry or the pencil icon to edit the menuitem will display the screen to the left. You can now change the menu properties:

  • Menu Location: Change the item to appear in the header menu or block menu
  • Parent Menu: Move the menuitem to a submenu or as shown at the main level
  • Label: The text that will appear for this menuitem. You can also define labels for multiple languages by clicking on the Languages link to show the available languages where you will have a input field for each available language.
  • Order: Where in the menu order does this item appear.
  • Menu item image: Use to have an image appear before the label. Enter the full URL to the image or if you have copied the image to public_html/glmenu/menuimages directory, you only need to enter the image file name.
  • Type: Choose from one of the available menu item types. Depending on the type selected, an additional field may appear. For a URL type menuitem, the field Menuitem Definition is needed but will not be shown if you choose a type submenu since it would not be needed.
  • Access Rights: Choose what site defined group will be able to see this menuitem. Use this to created menuitems or complete submenu’s that only appear for restricted groups



The following Menuitem types are available:

  1. URL - Same window: Define a menuitem that will redirect the user to any url that can be within your site or external. You need to enter the full url including the http: portion - refer to the adding menuitems tips below
  2. URL - New Window: Same as above but will launch a new browser window. Use this option if you want to redirect the user to a link that is external but don’t want the user to loose track of your site.
  3. Submenu: Creates a menuitem that will appear as a submenu where you can place other menuitems. It’s possible to have submenu’s under submenus if you want a multi-level menu structure.
  4. PHP Function: Select this menuitem type to enter the name of a php function that has been created to generate menuitems. An example of this is the forum plugin which has a function to generate menuitems for all the names of your site forums. This is usefull so you can provide a quick access to any forum directly for your users.
  5. Core GL Menu: This menuitem once selected will also show a dropdown menu to select from one of the available core menu options Core Menu Options. Selecting one of the core menu options will automatically create multiple menuitems when the menu is displayed. If the Admin Menu is selected, then if you are logged in as admin, you would see about 20 menuitems.

    The default install has a menuitem of type submenu called “Admin Menu” which contains one menuitem of type Core GL Menu - Admin Menu. When the menu is created, the many admin related menuitems appear as a flyout submenu. You can certainly have all the menuitems appear at the main level - just set the parent to be Top Level Menu.




Core Menu Types:

  • User Menu: Creates the menuitems normally associated with the GL User Functions Block
  • Admin Menu: Creates the menuitems normally accociated with the GL Admin Block
  • Topics Menu: Creates the menuitems normally accociated with the GL Section Block
  • Staticpages Menu: Creates menuitems for any active staticpages. A config setting defines if menuitems for all active pages or just the ones set to be added to the menu. Reference the plugin’s config.php setting: $CONF_GLMENU[’sp_labelonly’]
  • pluginmenu: Creates menuitems for all enabled plugins
  • linksmenu: Will create submenu’s automatically for all your links plugin categories and menuitems for all defined links
  • headermenu: Will create menuitems for the default siteheader menu. Only supported currently for the CSS based menu mode.


Back to the top

Adding Menuitem Tips

  • When defining links on your site you can use the convient shortcut [siteurl] which will be replaced with your site url like http://www.mysite.com and saves typing. The other shortcut is [siteadminurl] which is replaced with http://www.mysite.com/admin.. Use these shortcuts bbcode defines if you are working on a test site and intend to later change the site name or else you will have to edit all the hard-coded url links.
  • Sites will typically setup the menu to have the integrated admin and user menus so they can then disable the core Geeklog blocks as they are no longer needed - freeing up often needed space. This version of glMenu supports having the core GL admin and user blocks enabled at the same time if that is your preference.
  • A new feature with glMenu v2.5 is that it will automatically show an integrated login block if the site user is not logged in. This will only appear if the core GL user-features block is not enabled.
  • You can create a menuitem that appears only if the site user is not logged in by setting the access rights for the menuitem to ‘anonymous’
  • Create a menuitem that shows all the available forums: Define a menuitem of type PHP Function and use the function name glmenu_showforums. Requires Forum v2.6 and the updated forum plugin functions.inc which is included in the glMenu v2.5 archive

Menu Configuration

Menu ConfigClicking on the Configuration tab in the navbar brings up the online configuration page. This is where you can switch the menu modes between the Milonic and CSS modes.

When in CSS mode, you can select the menu colors for both the header and block menu’s using the integrated color picker - click on the ... button or enter the HEX color code directly. You can set the colors for the normal and on-hover both the foreground and background colors.

When in Milonic mode, you can select the menu style from a number of pre-defined milonic menu styles. You can set a different menu style for the main menu as well as the sub-menu (flyout menus in the case of the blockmenu or dropdown menu in the case of the header menu).

Multi-Language Labels: If you have defined alternative language lables, setting this option to Disabled will revert the menu to only show the default menu label

New Window Options: Offers you the ability to define the default window style properties that will be used for the menuitem type URL - new window

Online Menu Style Changes

CSS Mode - color changes

  • In order for the new colors to take effect, you need to enable the Over-write the menu.css file option. This will create a new {theme_dir}/glmenu/cssmenu/menu.css file with the selected colors. You can manually tweak this menu.css file but you should really edit the master template which is used to create the menu.css file - menuconfig_css.thtml in the same directory. An error message will be displayed if the tool is not able to create a new menu.css file.

Milonic Mode stye changes

  • Saving When you want to change the Milonic menu style, the tool will need to over-write a template file that is also used for menu blocks that appear standalone like the forum menu. This is a feature where custom functions or plugins can create menu blocks that will use the preferencs set in glMenu and create a menu in the desired style. An error message will be displayed if the tool is not able to create a new menu.css file.
  • Additional menu properties like itemwidth or menuwidth can be set. These are properties as defined by Milonic and a link to their online referece is provided. Menu proporty values need to be enclosed in quotes and terminated with a semicolon;

Defining Milonic Styles

The Milonic menu styles are defined in the file {theme_dir}/glmenu/milonicmenu/menustyles.php. This file contains multiple styles and they can be tweaked or new styles added. You should reference the Milonic site Menu Item Properties as there are over a hundred style properties. The Milonic site also has many styles that you can simply just copy the style definition and add it to the glMenu file menustyles.php - reference: Milonic Menustyles which is the start page to about 75 menu style examples.

Adding a new style
There are two steps to adding a new style

  1. Updating the file menustyles.php with the new menustyle defintion. A menustyle looks like the code below:
    with(menuStyle=new mm_style()){
    bordercolor="#999999";
    borderstyle="solid";
    borderwidth=1;
    fontfamily="Verdana, Tahoma, Arial";
    fontsize="75%";
    fontstyle="normal";
    headerbgcolor="#ffffff";
    headercolor="#000000";
    offbgcolor="#eeeeee";
    offcolor="#000000";
    onbgcolor="#ddffdd";
    oncolor="#000099";
    padding=4;
    pagebgcolor="#82B6D7";
    pagecolor="black";
    separatorcolor="#999999";
    separatorsize=1;
    subimage="/menuimages/arrow.gif";
    subimagepadding=2;
    }
    

    It’s important that you replace the name menuStyle in the first line of the style defintion with a unique name for this style. It’s this name that you want to reference below in step 2 where you tell the plugin about the new style. There are 15 default styles defined so there are clear examples to refer to.

  2. Updating the plugins config.php to map the style ID to a menustyle name. It’s this name that also appears as a style option in the online configuration screen. The plugin will save the ID number as the reference so you need to maintain unique ID numbers.
$CONF_GLMENU['milonicstyles'] = array(
    1   => 'menuStyle1',
    2   => 'menuStyle2',
    3   => 'menuStyle3',
    4   => 'XPClassicMenuStyle',
    5   => 'XPMainStyle',
    6   => 'XPMenuStyle',
    7   => 'corpMenuStyle',
    8   => 'corpSubmenuStyle',
    9   => 'macMenuStyle',
    10  => 'macSubmenuStyle',
    11  => 'tabMenuStyle',
    12  => 'tabSubmenuStyle',
    13  => 'bwMenuStyle',
    14  => 'bwSubmenuStyle',
    15  => 'background'
);

Themeing the CSS Menu

When the plugin is set to use CSS mode for the menus, you are able to modify the menu colors online but additional style related changes like menuitem width, height will require you to modify the css directly for the menu.

The CSS menu mode does not use any javascript and being just pure CSS, there is no way to dynamically adjust the menu depending on the menu content. Some issues that may be seen are:

  • Header menu has too many items causing the menu to wrap and create a 2 line menu. Suggestions: reduce the number of items in the header menu, use a smaller font for the menu, reduce the width of the menuitems
  • The menu label is too long and does not all appear or appears to wrap the extra text over top of the other menu text. Suggestions: reduce the menu label text, increase the menu item width or increase the menu item height so the label text can wrap for a 2 line label.

The css file used is menu.css in the {theme_dir}/glmenu/cssmenu/ directory, but you will want to modify the file {theme_dir}/glmenu/cssmenu/menuconfig_css.thtml as it is the master file that is used as the template when you are tweaking the menu colors online and using the option to create a new menu.css file. You can make the changes to menu.css to test out your changes live but if you ever update your menu using the online configuration page, then the default master template file will be used to create a new menu.css file and you may loose your changes.

The menu.css file contains the CSS styles for both the block menu and the header menu. The first 130 lines or so are for the block menu and header menu styles begin with the define for #headermenu. A few tips when making changes to your css menu:

  • There are a number of dependancies in the CSS that need that if you change one setting may effect another so be sure to have a backup of your files before you make changes.
  • Make the changes incrementally so you can see the effects
  • You may need to use a Ctrl F5 force refresh to re-load the site css

The following are a few examples and show the dependant relationships with the css styles

Changing the width of the header menuitems
The default as provided is for the header menuitems to be 130px wide. The dropdown menu that appears also has to be adjusted if you change the width of the top level menu items.Just 2 changes needed to make the width of the menu items wider.

Change the width attribute for the #pmenu link style

#pmenu a, #pmenu a:visited {
  display:block;
  width:140px;

Change the left position offset for the dropdown list style

#pmenu li ul {
  visibility:hidden;
  position:absolute; 
  top:-11px;
  left:100px; 


Back to the top

Config Settings

plugins/glmenu/config.php

The main settings that you may want to edit for this plugin are the milonic menustyles and language options.

  • The define for the milonic styles is explained in the section above.
  • The list of languages that appear as optional menuitem labels is defined by the setting $CONF_GLMENU[’languages’]
    $CONF_GLMENU['languages'] = array (
        1   => 'french_canada',
        2   => 'german',
        3   => 'japanese',
        4   => 'chinese_simplified_utf-8',
        5   => 'italian',
        6   => 'spanish'
    );

glmenu_admin6.jpg


  • There are a few additional plugin settings which are defined in the table below and also described in the file.
Config Parm Definition
$CONF_GLMENU[’sp_labelonly’]If true only create menuitems for staticpages that have “add to menu” flag set in StaticPage definition
$CONF_GLMENU[’links_maxtoplevels’]If greater then 0, will limit the number of link menu categories to show. Use this setting if you have 20 link categories and only want to show 10
$CONF_GLMENU[’restricted_topics’]This setting requires a hack to the lib-common COM_showTopics function. It then allows you to hide any topic with a sortorder > defined number. The sortorder field in the Topic Setup above (example: 50) could then be used to assign content to but not showup automatically in the topic listing. Then use the Story Editing feature to manange site content
$CONF_GLMENU[’headermenu_default_styles’]Default Milonic menu properties for the header menu
$CONF_GLMENU[’blockmenu_default_styles’]Default Milonic menu properties for the block menu
$CONF_GLMENU[’load_HTMLTree’]Default setting is true. Set to false only if another plugin is also using the treeview library
glmenu_3.0.txt · Last modified: 2009/03/12 22:18 by Blaine
Back to top