Tabbed menu

From e107 Wiki
Jump to: navigation, search

Contents

Introduction

The tabbed menu plugin allows an admin to create a tabbed sub menu that can be placed on the site like any other menu. Each tab can be configured to show internal e107 content (News Categories, Custom Menu/Pages, Installed Menus) or external content, in an iFrame, via a manually typed URL.

There are a number of advanced options associated with how you wish the content to be displayed.

As of V2.0 the plugin will also allow you to use a Shortcode {TM_MENU=[menu id]} to be used in your custom pages/menus. This will allow you to integrate a Tabbed Menu directly into your HTML on a page using the basic E107 system.

PLEASE NOTE that only one Menu id is allowed per page. i.e. {TM_MENU=1} should not appear on a page where you have the same menu in a sidebar. Only one of the Menus will be updated.

Quick Start

Install plugin via 'Plugin Manager'

Create a new menu

create a tab for this menu

Place this new Menu into your site (via e107's Menu system - Admin>Menu)

Menu Options

Config Menu

New/Edit:- This will create a new menu/edit an existing menu for the Tabbed Menu plugin. Note that this option will attempt to create a new menu file in the Plugin directory. If this fails, you will be shown a message. The user will then need to manually create this file - details available here->Tabbed_menu#File_Permissions

Delete:- selecting delete and ensuring the confirm box is checked will delete the Menu out of the Plugin database as well as deleting the file from the Plugin directory (if the directory permissions allow this)

New/Edit Menu

Name:- The name chosen must be unique from all other Tabbed Menu names.

note:- the menu name MUST use normal English characters (identified by realsteam - thanks! :) )

Frame Height/Width:-

These are used to dimension the iFrame - if used.

The safest value to use is '100%' - this represents a height/width that is 100% of the available height/width allowed by the websites theme.

You may also specify a height/width by the pixel size e.g. 150px

Custom Header/Footer:-

When a URL is pointing to an internal file
(e.g. http://www.yoursite.com/submitnews.php)
it is necessary to ensure that the entire site theme is not recreated within your tab. To ensure this does not happen, we use a Custom Header/Footer. You have the option of leaving the Header/Footer blank (a blank space is automatically inserted) or you may wish to have specific text appear at the head and foot of the tab's content.

Custom Pages

This simply shows the current pages that are using Custom Headers/Footers for this specific menu.

Detail

The Tabbed Menu plugin will automatically wrap the URL content in the Header/Footer if the 'custom head/foot' option is checked in the Config Tabs menu. The target URL is included in the $custompages variable and automatically inserted into the site's theme via the plugins e_module.php file. The user must ensure that a full URL is typed in the Config Tabs menu to ensure this automation works.

Config Tabs

First, you MUST choose a menu.

New/Edit:-This will create a new tab/edit an existing tab for the Tabbed Menu plugin.

Delete:- selecting delete and ensuring the confirm box is checked will delete the Tab from the Plugin database.

New/Edit Tab

Tab Name:- Tab names can be duplicated if required. This is the actual name that will appear on the tab within the menu.

Internal URL:- This is a selection of existing content on your website. This option fully utilises the AJAX functionality of the Plugin Currently News Categories, Custom Menu/Pages and Installed Menus are available with this option.

NOTE- Not all menus will work with this option. Some menus are not designed to work outside their normal plugin and the tab will show you a simple error message should this be the case.

Manual URL:- Internal URL MUST be set to 'Not Selected' for before you can type in this box.

Type the full URL to the required file. The URL must be in the form
'http://www.yoursite.com/yourfile.php'

This URL can be an 'on-site' or 'off-site' URL.

Default Tab:- Checking this option will make this tab the first tab to load when a user first visits your site.

NOTE- When the user chooses a tab, that choice then becomes their default choice (and is stored in a cookie). Every time that user (IP) returns to that page, the choice will be 'remembered' via the cookie.

iFramed:- if the manual URL isn't a 'pure text' output then you will need to make it an iFrame.

iFrames can be slow and are dependent on the speed of the site in the Manual URL.

Custom Head/Foot:- If your Manual URL is points 'on-site' (i.e. is local to the e107 website) you may be required to disable e107's normal Header and Footer. Checking this option will ensure the header/footer defined in the 'Config Menu' section is incorporated in the iFrame.

Tab Order:- Select from the drop-down box in which order you wish the tabs to appear on the menu - defaults to '1' (currently only configurable on an edit of the tab!!!)

Advanced Options

Internalise Navigation:-

Checking this option makes all navigation links (i.e. the 'read more' link) open up within the same tab.

When not checked, the navigation links are replaced with a URL which opens up the content in the main page.

Truncate Content:- The number here represents the number of letters that will be shown of a news item before the 'read more' link is inserted.

# of Items:- This number represents the number of news items shown in the tab before the 'previous | next' links are inserted at the base of the tab.

Autoshrink Images Height/Width:- When a news item or content page has images - the image size can sometimes screw up the menu layout. These options allow you to control the size of these images while the content is truncated. The plugin will check the width (in px) of the image against the maximum width allowed - and will resize both the height and width if necessary (maintaining the aspect ratio) - the plugin will THEN check the new height against the maximum shown and readjust again if necessary. You may disable a height/width constraint by leaving it blank (i.e the plugin will not make any changes to the width/height of the blank option)


Tab Colour:- This is the colour the tab will have when it's not being hovered over or selected. You can choose what colour this tab will be. Use HEX notation (i.e. White would be #FFFFFF) or if it's a simply colour scheme, you can use the word (i.e. Black, White, Grey, LightBlue etc) but please note that this will make your site non CSS 2.1 compliant!

Tab Hover Colour:- This is the colour the tab will have when it's being hovered over by the mouse. You can choose what colour this tab will be. Use HEX notation (i.e. White would be #FFFFFF) or if it's a simply colour scheme, you can use the word (i.e. Black, White, Grey, LightBlue etc) but please note that this will make your site non CSS 2.1 compliant!

IMPORTANT NOTE:- IE6 doesn't fully comply with CSS hover and as such, the plugin creates a workaround hover colour for users with this browser. This can be configured in the General Preferences menu - generic link hover color. This workaround is NOT implemented in a non MSIE browser and works well in Firefox et al.

Tab Selected Colour:- This is the colour the tab will have after the user has clicked on the tab and selected it. You can choose what colour this tab will be. Use HEX notation (i.e. White would be #FFFFFF) or if it's a simply colour scheme, you can use the word (i.e. Black, White, Grey, LightBlue etc)

General Preferences

Navigation Hover Colour

This is the colour used by all Navigation links (next, previous, click for more etc.) in both the integrated news handler and the integrated custom page handler. Choose a colour in hex format (i.e. White would be #FFFFFF) to maintain CSS 1.2 compliance.

NOTE:- Because MSIE does not support CSS1.2 hover I have had to do a frig for IE users. ALL hover operations will follow the Navigation hover colour scheme for MSIE users.

Text used for 'next'

The text inserted wherever the 'next' link is required - you can change this to any language and use html tags if required.

Text user for 'previous'

The text inserted wherever the 'previous' link is required - you can change this to any language and use html tags if required.

Text used for 'more'

The text inserted wherever the 'more' link is required after truncated text- you can change this to any language and use html tags if required.

Text used for 'back to list'

The text inserted wherever the 'back to list' link is required after a news item has been expanded - you can change this to any language and use html tags if required.

Text used for 'minimise'

The text inserted wherever the 'minimise' link is required after a page content item has been expanded - you can change this to any language and use html tags if required.

Text used for 'no JS'

The text inserted when the plugin detects that JavaScript is disabled by the user. This text will appear in the menu - you can change this to any language and use html tags if required.

Check if JavaScript is enabled on users browser

The method used by the plugin to check if JavaScript is enabled is not XHTML 1.1 compliant. This option is here to allow the admin to enable or disable the feature. Clicking on this will ensure a check is performed to check the availabilty of JS but at the cost of losing XHTML1.1 compliance.

Extra Info

Trouble Shooting 'Tabbed Menus'

In V2.0 extra code has been added to improve the plugins handling of users that do not have JavaScript enabled. The plugin now checks on every page load whether JS is enabled and if it isn't it updates all menus to reflect this. The plugin has been optimised to be able to handle users that have installed their site in a higher level directory than the base directory.

if you are using < V2.0

  • Make sure that Javascript is enabled for your web browser!!!
  • Make sure your Tabbed Menu directory has a similar path to the following
 http://www.yoursite.com/e107_plugins/tabbed_menu/

If it looks like the following then you will need to change the ajaxhandler.js file at line 33

 http://www.yoursite.com/SOMETHING/e107_plugins/tabbed_menu/


Internet Explorer 'Funnies'

IE6 has a wealth of issues associated with AJAX - which is why I use the AJAX handler from www.prototypejs.org (excellent library BTW)

When using the integrated Newspost feature of the Plugin-

When using an iFrame with IE, it is advised that you have a 'px' value for the height (in the config menu section) as IE can struggle with calculating the percentage value 'on the fly'

Themers

Tabbed_menu uses the MSIE proprietry .innerHTML function extensively. This is not a Strict XHTML supported feature. I have no interest in rewriting a full on DOM parser for the plugin to allow XML updates to the page so I'm afraid you'll have to live with this potential validation issue. :)

Tablestyle

When not in an iFrame, the plugin will pass the $title and $body of the tab to e107's tablestyle function in the theme. It will also pass 'tabbed_menu' to the $mode variable of this function - allowing the Themer to create a layout specific to the Tabbed Menu.

How to control tab layout with your Theme

In your Theme, there is a function called tablerender($caption, $text [,$mode])

The $caption is the heading or title of the menu inside your tab

The $text is all the images/text that come after the heading.

When you have configured the tab to have a Manual URL and NOT an iFrame then plugin will attempt to call the Theme's tablerender function passing it the following ($caption, $text, $mode='tabbed_menu') It's the $mode bit that's key! If you were to place the following code into your tablerender function - you have full control over how your tab is laid out.

....
if($mode == 'tabbed_menu'){
echo "<div class='fancy stuff'> $caption </div> <div class='more fancy stuff'> $text </div>
}else{
Your original tablerender() code goes here
}
...


If you wish the $text to appear above the $title or even wish to remove the $title altogether you can. Whatever is 'echoed' from this code will be how it appears in the tab

There is a good wiki article on this here -> Creating_a_theme_from_scratch#Table_Render_Style

Customising the Menu & Tab CSS

As of V2.0, the plugin now checks your theme folder for a tabbed_menu.css file before using the default CSS file.

In this file you will find the CSS that is used to build the tabs and menu style. A themer can easily change this to reflect the style they wish - obviously it is important not to change the NAMES of the id's and classes!!!!

A FUTURE NOTE TO THEMERS:- there may be a future option with Tabbed_menus that will allow a user to configure the menu orientation (i.e. tabs/text vertical/horizontal). I will commit to NOT changing the names of the current classes or styles - but this CSS file may grow to accommodate the extra styles required.


How to change colour of Tabs

As of V2.0 This can now be done via the Tab configuration admin page - under advanced options!!


pre V2.0

All the Colour schemes are held in the tabbed_menu.css file.

In this file you will find a 'selected' style and a 'notselected' style. Simply change the backgound-color attribute to the preferred colour scheme. You currently cannot have a different colour on each tab.... again, a future release!!

You must use hex notation (i.e. white is #FFFFFF) or if you have a basic colour scheme you could try the word (i.e. Black, White, Yellow etc.)

How to make plugin more SEO friendly

One of the issues with AJAX driven menus is that Search engine bots are unable to click on the tabs (!!!) as they are not URLs. As such, they will not be able to crawl through the content on your tabs.

To combat this, I've created a shortcode {TM_SITEMAP} which creates a URL for all the tabs you have configured on the site. You can place this shortcode anywhere - but it is recommended you place it at the base of your site in small text. You may even want to use it in your theme and hide the code from the user (Search engines will see the URLs but the user will not). e.g put this in your site's theme.php or in the site disclaimer (admin>>preferences)

<div style='display:none;'> {TM_SITEMAP}</div>

NOTE:- I have DELIBERATELY designed the shortcode not to create a URL for any tabs configured to display a menu. This is because menu code cannot be accessed directly via a URL. Having a URL to a menu that doesn't output anything would cause an error for the Search engine crawler/bot.

File Permissions

e107 requires that a file ending in "_menu.php" is required in a plugin directory before it can be incorporated into the site's theme. Tabbed Menu attempts to create a new file every time a new menu is created. If your directory file permissions do not allow a script to create a file, you will receive a message saying you will need to create the file manually (or change the permissions to allow a script to create a new file.... which is MUCH less hassle if you know how to do it!).

To create a new menu file you will need access to your host's file manager. In the Tabbed Menu plugin folder, you will find a menu_template folder. This holds a copy of a generic menu. Copy this to your Plugin directory. Rename it to "TMXXXX_menu.php" ensuring the XXXX name is unique!!!

You will now need to edit this file and in the $menu_name variable, type the name of the menu you created through in the 'Config Menu' section. This name must match precisely or your menu will just appear empty. Once updated, save the file and it will automatically appear in the e107 Menu system.

Future Releases

Plugin is currently released at v2,0. Here is what I may be updating in future releases!!!

  • Create a Language file (I HATE creating these things.. I always leave them to last :) )
  • Add more integration into other parts of e107 Core (members/submit news/links?) - this is of a lower priority!
  • Create an orientation option for the tabs (horizontal/vertical/left/right/top/bottom)

Other Comments

  • Prototype.js is used to handle the multiple AJAX requests to the server. Due to the Asynchronous nature of these requests - a system was needed to keep track of each request as they could return at any time. This is beyond my humble JS expertise so I'm using the Prototype.js system.

EOF