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 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.
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.
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.
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 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.
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.