Buy Now ($95) | SOM Home | Examples

Slide Out Menu Builder (SOM) User Guide

This user guide can be navigated using a PVII Slide Out menu. To open the menu at any time, click the hamburger icon fixed at the top-right corner of this page.

Installing the Extension

Extensions are installed using the Adobe Extension Manager (for CS6 and older), or a third party Extension Manager (all DW CC versions).

Unzip the product file

Unzip your product file before installing.

Save for a rainy day

Save your original product file in logical folders, named and situated where you will be able find them when you need them. A good idea is to create a new folder on your hard drive and name it PVII Extensions. When you download a product file from us, place the zip file in this folder.

Extension File Types:

Extension installer files come in 2 formats: MXP and ZXP.

To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.

To install this product:

Adding a Slide Out Menu to your page

Click anywhere on your page,. The location does not matter since the menu markup will be added at the end of your page. The menu will not interfere or obstruct your page content in any way.

Open the SOM user interface

Click the SOM icon Icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel.

Classic Dreamweaver Insert Bar

The Insert Bar

Dreamweaver Insert Panel

CS4 Insert Panel

The SOM interface will open in the Create New Slide Out Menu mode.

The Create Interface

Insert your menu items, set your options, and you're ready to go.

Note: If you need help with any interface option or setting, click the Help button along the right edge of the UI to open a detailed help file.

Asset Folders

When you create a Slide Out Menu, the system creates an assets folder named p7som at the same level as the page that contains your Slide Out Menu. This folder will contain the SOM JavaScript file and the relevant Slide Out Menu style sheet, as well as an img sub-folder that contains the toolbar control background images used by the CSS.

PMM file folder

When you publish your site, make sure you upload the entire p7som folder.

Using the SOM Interface

You can modify your SOM menu(s) at any time. First, click anywhere inside your menu. Your SOM menu will always be at the bottom of your page. Depending on the length of your page you might need to scroll down to access the menu.

Now click the SOM icon The icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel. The SOM UI will open in the Modify Existing Slide Out Menu mode.

When you open the interface, the current Mode is displayed at top. Either Create or Modify. When in Modify mode, the id of the menu being modified will also be displayed.

The Modify Interface

Configure your menu items and options, and then click OK.

Scroll to Element

Check this box to enable the automated Scroll to Element support, which will smoothly scroll to ID'd elements anywhere on your page.

The Modify Interface

Element ID

Enter the ID of the target element... the element to which you would like to scroll to when the link is clicked. The ID you enter into the box will become the HREF attribute of your link.

Top Offset Adjustment

Normally the scroll action will place the target page element at the top of the browser window. You can optionally choose to have the system adjust this position in one of two ways:

Pixel Top Offset

Enter a pixel value, which translates to a fixed space between the top of your target element and the top of the browser window/viewport. For example, this will allow you to scroll to specific offset positions in relation to the page element.

Height of ID Offset

This is useful if you are using a fixed-position element at the top of your page. Simply enter the ID of the element and the system will adjust the top position by the rendered height of the element. This allows positioning directly underneath a fixed position nav bar even if the nav bar changes height with browser window size changes.

Interface Options

The following settings are applied to the SOM menu you are currently editing. Other menus on the same page will not be affected and will retain their unique options.

The Modify Interface

Header Bar

The menu will display a Header Bar at the top that includes a Close icon. This Header Bar text is editable. The menu on this page, for example, uses the text SOM User Guide Menu.

The Modify Interface

Enter the text you would like to appear at the top of the menu, the default is: Menu. You can also enter HTML markup if you wish or you can leave the box blank to show no text. The close icon cannot be removed.

Menu and Hamburger Icon Positions

Use the drop-down list to the right of the Menu option to choose whether the menu slides out from the Left or the Right.

The Icon Position option enables you to position the hamburger icon Top Left, Top Right, Bottom Right, or Bottom Left. The icon, like the menu itself is fixed position. It is always accessible no matter how far up or down the page you have scrolled.

Icon Text

Optionally enter the text label to display underneath the Menu Icon.

Open On Load

Enable this option to have the Slide Menu box show in its opened state when the page first loads.

 

Z-Index and Toggle

You can also set a custom Z-Index for the current menu. The z-index specifies the stacking order of the menu versus other positioned elements on your page. An element with a higher z-index value will always appear in front of an element with a lower one. Set this number to a very large number if you want the menu to appear above all other elements on the page. The default value is set to 950. When two or more menus exist on the same page, you can set z-index values for each to achieve the stacking order you desire.

The Toggle option, when on, will automatically close any open menu sections when another menu section is opened. With this option turned off, the system will open or close sub-menus only when the user clicks on the related menu trigger.

Animation

There are two Animation options. The first is for the Menu Box. This setting affects how the menu behaves as it slides into view. The Duration, by default is set to 600ms (6/10ths of a second), which works well across a wide range of devices. To speed up the animation, enter a lower number. To slow down the animation, enter a higher number.

Sub Menu Animation is independently controlled. and defines the animation behavior of sub-menus as they open or close. It has its own Duration setting.

Current Marking

Current Marking looks for links in the menu that match the current page address. When a matching link is found, it's highlighted. The system assigns a special style class named current_mark to this link and also to its associated Trigger Link. By default, current marked links are rendered in a bold font-weight.

When setting the Current Marking option, you can also set the system to Include URL Parameters in Match. This setting controls whether the current-marking system will include URL parameters (common in database-driven sites) in the page address when looking for a matching link in the menu.. You can also opt to Include Anchor in Match, which will include page anchors (#abc) in the page address when looking for a matching link in the menu.

Open Sub Level(s)

The Current Marking system can simply assign the current mark style to each of the menu links or it can open the associated sub-menu and all of its parent menu levels. Check this box if you wish to have the sub-levels opened when the page first loads.

There is also an Advanced Current Marking utility that allows you to highlight menu items based on the current page's folder or URL. The Advanced Current Marker is available from Dreamweaver's Commands menu. To learn more about this feature, open the Advanced Current Marker interface and click the Help button inside. To open the interface, choose Commands > Studio VII > Slide Out Menu > Advanced Current Marker.

Style Theme

SOM comes with pre-defined CSS style themes. Choose a theme that best approximates the look you desire. The CSS for each theme is editable. Use the Shadow option to add a subtle shadow effect to the outermost menu container.

SOM Control Behaviors

The system also includes control actions that can be used to create Slide Out Menu actions on links located anywhere on your page, or that can be used in by other scripts to control SOM actions. Available Control Behavior Actions:

Manually Assigning SOM Control Actions

There are times when you may want to manually assigning a control action, either for use in external scripts or when building pages dynamically. The control action function call will look like this:

P7_SOMctrl('p7SOM_1','trig',this)

  1. The first argument is the ID of the SOM root div.
  2. The second argument is the control action you wish to apply.
  3. The third argument is always the word: this

The HTML markup for a typical text link with a control action applied would look like this:

<a href="#" onclick="P7_SOMctrl('p7SOM_1','trig',this)">Menu</a>

The available Control Actions are:

Using the Behavior to create Control Actions

Creating a new Control Actions behavior

  1. Select (click) a text link or Slide to act as the behavior Control.
  2. Open your Dreamweaver Behaviors Panel (Shift + F4)
  3. Click the plus sign (+) on the Behavior Panel.
  4. Choose Studio VII > Slide Out Menu > Control Actions to open the interface.
  5. Select the widget ID you wish to act on.
  6. Select the action.
  7. Click OK to apply the behavior.

The Interface

The interface contains a listing of all of the Slide Out Menu widgets on your page. The list will display the ID of each widget. Select the Slide Out Menu you want to control.

Tip: If you are unsure about which widget relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs that begin with p7SOM. The opening DIV tag looks like this:

<div id="p7SOM_1" class="p7SOM-03 p7SOM p7SOMnoscript som-from-left">

Select the action you want to apply.

Removing a SOM Menu

To remove an existing SOM menu, open the Remove interface, by choosing Commands > Studio VII > Slide Out Menu > Remove Slide Out Menu (The Remove option will be unavailable if there are no SOM menus on the page.).

The Remove Slide Out Menu interface

The Remove Interface

The interface provides a listing of all of the Slide Out Menu menus on your page, displaying a drop-down list containing the ID of each menu. From the listing, select the menu that you wish to remove. You can remove one menu at a time.

If you are unsure about which menu relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs that begin with p7SOM. The opening DIV tag for a Slide Out Menu menu looks like this: <div id="p7SOM_1" class="p7SOM-01 p7SOM p7SOMnoscript som-from-left">

The system will completely remove the html markup for the selected menu from your page. If there are other Slide Out Menu menus on the page they will not be affected. The system will also remove the link to the relevant theme CSS file if no other menu on the page is using the same style theme. If there are no remaining Slide Out Menu menus on your page, the system will also remove the link to the Slide Out Menu Core CSS and JavaScript files.

The system will not remove the p7som folder, which contains the menu-related assets (images, JavaScript file, and CSS files). This ensures that you will not lose any assets you may have modified and any other pages that depend on those modified assets will continue to look and behave as expected.

SOM CSS Information

Every SOM menu uses the same Core style sheet (p7SOM-Core.css). This file should never be edited. A second style sheet file, based on the selected style theme is also linked. This is the file you should edit if you would like to change any of the design aspects of your menu. The theme style sheets follow a naming convention: p7SOM, followed by a hyphen and a number. So, the theme 1 style sheet is named p7SOM-01.css.

Editing CSS

Edit only the theme CSS. They are very simply written and easy to follow. If there is a CSS editing task you cannot achieve, we would be happy to help. Simply contact us via our normal support channels...

PVII Support

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

Menu