EverWeb Widgets HTML5

nav menu drop down close Widget

Navigation Drop Down Close Function

Close Drop Down On Mobile Devices

The default EverWeb navigation menu is very versatile and can be customized by those who have a basic understanding of CSS.
Since a large and growing number of potential website visitors are using tablet devices such as the iPad, the fact that the drop down won't close on these devices makes the navigation unuseable.
This widget can be used to add a jQuery plugin which addresses this problem.
Once installed, the visitor will be able to close a drop down by tapping anywhere on the screen other than the menu itself.
This method is used on many websites so internet savvy tablet users will have no difficulty with it.

menu close widget settings
Menu Close Widget

Widget Settings

As can be seen from the widget settings screenshot to the right, all that is required is to drag the widget onto the page and enter the navigation menu ID number.
The widget appears as a small square which can be command dragged into the footer or anywhere else out of the way of any other items.

Menu ID Number

The EverWeb navigation has an ID number in the styles and this must be entered into the widget.
If the navigation has only been used once for the website project the ID number will be zero.
Otherwise its a question of looking at the source code of one of the published web site pages. This is not as scary as it sounds.
The method of viewing the source code is slightly different for each browser…
[1] Firefox - Open the page and press command + u
[2] Google Chrome - Use option + command + u
[3] Safari - Before the source code can be viewed in Safari it is necessary to turn on the Develop menu. To do this, open Safari preferences, click the Advanced tab and check the box next to "Show Develop menu in menu bar".
The source code can then be viewed using the same keyboard command as for Chrome - option + command + u
When the web inspector window opens, the source code for the page will be revealed. Look down the list - around line 16 - to see the menu identifier and its number. This will look like this…


If the navigation widget has been used more than once in the project , the zero will have been replaced by another number. Enter this number into the widget settings.
NOTE that the widget needs to be on every page of the site that contains the navigation menu. If a master page(s) is being used it can be simply inserted there.

Get The Widget

Mobile Testing

It must be obvoius to all EverWeb users that the conventional version of their website must perform properly on tablet devices. It is essential to test on the iOS simulator before publishing the website to make sure that the contents are easily readable and that all the user inputs are suitable for mobile devices.
Read the instructions for Mobile Website Testing for instructions on how to download and install the simultor and refer to the Design Basics page for guidelines on page width and font size.
EverWeb V1.7 has the option to preview the pages in the iOS simulator if installed. On versions prior to that it will be necessary to publish to a local folder to view the site using Xcode.