Simple Responsive Menu

for Joomla
User Guide

Version 1.11a
17 July 2017
Copyright © Les Arbres Design, 2013 - 2017
All Rights Reserved

This document may not be reproduced or redistributed without the permission of the copyright holder.
It may not be posted on any website other than www.lesarbresdesign.info
 Contents
Introduction................................................................................................ 3
Licence........................................................................................................................................... 3
Installation.................................................................................................. 4
Configuration............................................................................................... 4
Module Tab...................................................................................................................................... 4
Advanced Options............................................................................................................................ 4
Responsive Options.......................................................................................................................... 5
Menu Item Target Window................................................................................................................. 5
The CSS Styles............................................................................................. 6
Positioning...................................................................................................................................... 6
Styling........................................................................................................................................... 6
The "Hamburger" Icon...................................................................................................................... 7
First Item Text............................................................................................................................ 7
The Hamburger Option................................................................................................................ 7
How the Switching Works............................................................................ 8
Language Translations.................................................................................8
Troubleshooting...........................................................................................9
Menu Doesn't Switch on Mobile Devices............................................................................................... 9
Help and Support....................................................................................... 10

2
 INTRODUCTION
Simple Responsive Menu is a drop-in replacement for the standard Joomla vertical menu. At wider screen
widths, you should see no difference at all from the standard Joomla menu. At narrower screen widths the
normal vertical menu is made invisible, and a select list menu is made visible instead. You can configure the
screen width where this switch takes place, and the position of the select list menu.

The demonstration site for our product, Rentalot Plus, normally has a vertical menu.

For small screens, it changes to a select list, which takes very little space when collapsed. When expanded, the
list shows all the options, and is very easy to use on a mobile phone.

Please note that in order to use Simple Responsive Menu effectively, your site template must already be
responsive. Please do not ask us for help with responsive design issues. We provide Simple Responsive Menu as
a tool to help you build a responsive site. Building the site is your responsibility, not ours!

LICENCE

Simple Responsive Menu is a free product of Les Arbres Design, licensed under the GNU General Public License
Version 2, the same licence that Joomla itself uses. The GNU General Public License is a Free Software license.
For more details please see http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

3
 INSTALLATION
Simple Responsive Menu is a Joomla Module. Install it in the usual way using the Joomla Extension Manager.

Following installation, you will find a new Module called "Responsive Menu".

CONFIGURATION
If you are using Simple Responsive Menu to upgrade an existing site that is already using the standard Joomla
menu, you will first want to open the Menu Module in Module Manager and make a note of all the settings and
options. You will want to duplicate these same settings in Simple Responsive Menu.

In Module Manager, click on Responsive Menu. On the left side are the standard Joomla parameters where you
choose which pages the module appears on and whether it shows a title etc. We won't describe these options in
detail as they are standard for every Joomla module.

Make sure Simple Responsive Menu is enabled, and disable your original menu module.

There are a number of options that are specific to the Simple Responsive Menu module. In Joomla 2.5, these
options are on the right hand side of the screen. In Joomla 3.x, you need to click on the "Options" tab to see
these options.

MODULE TAB

In earlier versions of Joomla this was the Basic Options tab. These options are for the standard menu and work
exactly like the standard Joomla Menu Module. If you are upgrading an existing site, just copy these settings
from your existing Menu Module.

Parameter Details
Select Menu Select the Menu to display from the list of existing menus
Base Item Select the menu item to be used as the base for the menu display. The usual
setting is "Current". For more advanced usage, see the tooltip for this item.
Start Level Nesting level to begin displaying menu items. The usual setting is "1".
End Level Nesting level to stop displaying menu items. The usual setting is "All".
Show sub-menu Items "Yes" displays the menu fully expanded with all sub-menu items visible. If you
have a lot of menu items you will probably have this set to "No", which initially
displays a collapsed menu, expanding only those items below the current active
item.

ADVANCED OPTIONS

These also work exactly as for the standard Joomla Menu Module. If you are upgrading an existing site, just
copy these settings from your existing Menu Module.

4
Main Tag ID An optional ID attribute to assign to the root <UL> tag of the menu.
Menu Class Suffix A suffix to be applied to the CSS class of the menu items.
Target Position JavaScript values to position a popup window, e.g.
top=50,left=50,width=200,height=300
Alternative Layout Use a different layout from the supplied module or overrides in the templates.
Module Class Suffix A suffix to be applied to the CSS class of the module. This allows for individual
module styling. The default for standard Joomla menus is "_menu".
Caching Select whether to cache the content of this module.
Cache Time The time before the module is recached
Module Tag The HTML tag to be used for the module
Bootstrap Size How many columns the module will use.
Header Tag The HTML tag to be used for the module title
Header Class The CSS class for the module title
Module Style Controls inheritance of the module styles

RESPONSIVE OPTIONS

These settings are unique to Simple Responsive Menu and apply to the select list menu.

Layout Change Width The width at which the traditional vertical menu disappears and the select list
menu is displayed.
Container Styles The CSS styles for the <div> element containing the select list menu
Select List Styles The CSS styles for the <select> list menu
Show sub-menu Items Works like "Show sub-menu Items" in the Module (or Basic Options) tab, but this
one applies only to the select list menu. You can have different settings for each
menu.
Hamburger Sets the first item of the select list menu to the Unicode hamburger character
(&#9776;) and adds some other styling to achieve a better effect.
First Item Text Adds the specified text as the first item on the select list menu only. If specified,
this is always the selected item. For example, you could make this text "Menu",
and then the select list would always show "Menu" regardless of the current page.
If you use this option, you might also want to give the select list a fixed width, as
described in the next section. This option has no effect if you use the Hamburger
option.
Show separators Determines whether menu separator items are shown on the select list menu.
Separator items are always shown on the traditional menu, but you may or may
not want them to be shown on the select list menu.
Prevent Chosen Prevents the select menu from being modified by the "Chosen" jQuery extension.

MENU ITEM TARGET WINDOW

Please note that the select list menu cannot support the alternative Target Window options "New Window with
Navigation" and "New Window Without Navigation". All select list menu items open in the current window (or
tab).

5
 THE CSS STYLES
The select list menu is generated in a <div>, like this:

<div class="srm_position" style="position:absolute; top:2px; left:2px; opacity:1;">

<select id="srm_select_list" size="1" style="padding:5px; font-size:1.5em;"
onchange="var e=document.getElementById('srm_select_list');
window.location.href=e.options[e.selectedIndex].value" >
<option value="/">Home</option>
<option value="/page1">Page 1</option>
...
</select>
</div>

POSITIONING

The "Container Styles" option of the Responsive Options are used for the <div> element that contains the
<select> list, and it is these style rules that determine the position of the list on the page.

The default styles are:

position:absolute; top:3px; left:3px; opacity:1;

This places the select list 3 pixels from the top left of the page. You don't need to create a module position in
your template for the select list. Since the <div> has absolute position, it always appears at the top of the page
and will obscure whatever is beneath it. If this does not look good on your site you can experiment with the
positioning. In some cases you might need to adjust existing content or graphics to make space for the select
list.

To position the list at the top right of the page you could use these styles:

position:absolute; top:2px; right:2px; opacity:1;

STYLING

The "Select List Styles" option of the Responsive Options are used for the <select> element, and these
control the appearance of the list.

The default styles are:

margin-bottom:0; padding:5px; font-size:1.5em; max-width:95%; height:auto;

You can experiment with the padding and font-size to change the size of the list.

You can also add any other CSS styles you like here. Try these:

background-color:black; color:white; border:2px solid white;

If you use the "First Item Text" option, you may want to fix the width of the select list, for example by
adding:

width:5em;

6
THE "HAMBURGER" ICON

There are to ways to make the select list look like a Hamburger.

First Item Text

You can set the first item of the select list menu to the hamburger icon by entering the Unicode character for
the hamburger icon (&#9776;) as the First Item Text in the Responsive Options.

You will probably also want to specify a fixed width for the select list by adding a CSS "width" declaration as
noted above.

The Hamburger Option

The Hamburger Option also sets the first item of the select list menu to the hamburger icon, but it also adds
some additional CSS declarations to make the unopened list appear more like a hamburger. Select lists are
notoriously difficult to style, and these declarations are about the best that can be done.

It adds these declarations for the container <div>:

width: 2em;
overflow: hidden;
padding: 0 .5em .5em .5em;

And it adds these declarations for the <select> element:

width: auto !important;

max-width: none !important;
border: none;

The results vary slightly from browser to browser and from device to device, but in general the hamburger
appears something like this. Notice that the right hand side of the select list appears truncated in some
browsers:

Chrome: Firefox: Safari:

You may be able to fine tune the appearance further for your site by adding declarations to the Container Styles
and Select List Styles.

7
 HOW THE SWITCHING WORKS
The select list menu has a CSS class of "srm_position".

The traditional vertical menu has a class of "srm_ulmenu".

An "internal" CSS stylesheet is generated in the header of the page, using the "Layout Change Width" option as
the maximum width to show the traditional vertical menu.

<style type="text/css">
div.srm_position {display:none;}
ul.srm_ulmenu {display:block;}
@media screen and (max-width:950px)
{
div.srm_position {display:block;}
ul.srm_ulmenu {display:none;}
}
</style>

By default, the vertical menu has a display type of block, so is visible, and the select list container <div> has a
display type of none, so is invisible.

When the screen width is below "Layout Change Width", the vertical menu has a display type of none, so
becomes invisible, and the select list menu has a display type of block, so becomes visible.

Older browsers (e.g. IE8 and below) that do not recognise CSS media queries will not switch and will always
display the vertical menu. But such old browsers are not normally used on modern small devices, so the system
works very well.

LANGUAGE TRANSLATIONS
The front end of Simple Responsive Menu does not require any language translation files.

If you would like to contribute a translation for the Module Configuration, please translate these two files:

en-GB.mod_sr_menu.ini
en-GB.mod_sr_menu.sys.ini

and send them to us. We will include them in the next release.

8
 TROUBLESHOOTING

MENU DOESN'T SWITCH ON MOBILE DEVICES

The short answer is that you probably forgot to include the viewport meta tag in your template. Look it up, as
there are various ways to use it, but typically you might use something like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without the viewport meta tag, the browser on a mobile device will zoom out so that the whole page is much
smaller but fits on the screen. This is useful for sites that have not been adapted to be responsive, but it also
means that a pixel is no longer a "real" pixel, and the CSS media query that controls the menu appearance will
not work as expected.

You must have a viewport meta tag in your template for Simple Responsive Menu to work correctly on mobile
devices.

9
 HELP AND SUPPORT
Unfortunately we can't provide free support for free software. We can't help you with cosmetic changes, or to
resolve specific problems with your template or web server. But if you find a real problem, we do want to hear
about it, and we will try to help. If you do find a problem, please contact us, giving us as much detail as you
can, using the contact form on our website:

http://www.lesarbresdesign.info/contact-us

With so many extensions on the Joomla Extensions Directory, it is important that users share their experiences
with the rest of the community. Please post a review of Simple Responsive Menu at the Joomla Extensions
Directory:

http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/content-menus/25624

Many people think that free software is a one-way process. We do feel more inclined to help people who
demonstrate that they understand the amount of time and effort that goes into producing our software, and are
willing to spend a few minutes writing a review.

10