-
Notifications
You must be signed in to change notification settings - Fork 1
Expanding_menus
Expanding menus are menus that can be hidden/shown by clicking on some part of the menu. An example of expanding menus can be seen at the e107 Coders website.
Some themes come with expanding menus already built in, many do not.
This article shows the steps that are required to add expanding menus to a theme. It is fairly generic in its approach as the exact changes required depend on which theme is being created/modified and how it generates the HTML for it's menus.
A basic understanding of theming and HTML is assumed.
Most menus are made up of at least two components - the menu caption and the menu body. Each component is defined by some HTML, often HTML tables or DIVs.
The menu caption should always be visible. This indicates the presence of a menu and can be used by the theme to act as an area where the user can click to hide/show the menu.
The menu body displays the content of the menu. This is the part that will be hidden/shown as the user clicks on the menu caption.
In the theme.php file, ensure that there is a {SETSTYLE=menu} entry before each menu section of the page. Use {SETSTYLE=main} (or similar) to turn off the menu style.
This allows the theme to identify when it is rendering a menu.
For each menu, we need to create a unique identifier so that when then user clicks a menu title we know which menu body to hide/show.
To do this, add the following lines at the start of the tablestyle() function:
Note: the unique id is generated from the menu caption by removing all spaces. This may generate invalid HTML IDs but serves as a reasonable example for the time being.
Now we need to add some code that will respond to the user clicking on the menu title. This is the part that depends on exactly how the menu is defined in HTML.
The first example shows how this might be done when the menu is defined as an HTML table.
The second example shows how this might be done when the menu is defined as HTML DIVs.
The final example shows how to make a menu hidden by default
This extra bit of code is one way of deciding which menus should be hidden and which shown when a page is loaded - it does not remember what a user has clicked.
Expanding the example above, an array of menu items that are to be shown is created, we then check this for each menu and add HTML code to hide the menu if it is not in the array.
If you want menu states to be remembered here's one way of doing it using a cookie.
First, instead of calling the expandit() Javascript function you should call a new function, for example mytheme_expandit(). Putting the theme name as the start of the function name will help ensure thr function is unique.
Next, the function needs to be written - it should go in a file called theme.js which ensures it is loaded whenever that theme is in use.
The code required is basically shown below. Just include your theme name instead of mytheme.
The JavaScript above uses a variable called mythemejs which contains the JavaScript functions for the theme. This is not essential but helps ensure that there are no duplicate functions in the event of e107 or plugins including their own JavaScript.
You could even get rid of the mytheme_expandit() function and call mytheme.expandit() from the onclick event. The following shows this and how to get the users selection from the cookie in PHP:
Here's a more complete example, using the theme.php from the e107v4a theme (supplied with e107 v0.7).
Note: the example is not the complete theme.php file.
The changes to this theme make the orange dot in the top left corner of each menu the part of the menu that can be clicked to hide/show the menu.