Example: step by step

PREV
NEXT

For example you have bought this extension, and don’t know what to do next, it isn’t a problem, you can use our example as a basis!

Installing Adobe Dreamweaver extension

Download your extension S4W.JQVerticalMenu.zxp from your customer area at our site. Download and install our Extension Manager, load it, click install button and then select your ZXP extension.

Insert

Menu can be inserted in the web page through the menu option "Insert -> Solutions4Website -> HTML5 Vertical Menu". It is also accessible through 'HTML5 Vertical Menu' button on the FD24 category of the Insert Panel (Window > Insert).

Inserting object in the page through the menu option.

  1. Open Adobe Dreamweaver.
  2. In the Dreamweaver authoring tool, select File -> New.
  3. In the New Document dialog box, select HTML file, and click OK.
  4. Select File -> Save. Select a folder to contain your application, name the HTML file, and then click OK.
  5. Select Insert -> Solutions4Website -> HTML5 Vertical Menu.

  6. You have to define the destination folder (you can choose or create any folder you want). There (in this folder) will be created folder 'menu_files' and inside this folder will be placed files: script.js, style.css and images.

  7. Then just press OK.

Note: Before you insert Object into new web page, save the HTML file.

Enter the Solutions4Website Wizard

To adjust the component appearance and change menu structure use Wizard. To do this, click mouse on the blue tab 'HTML5 Vertical Menu: JQVerticalMenu' above the menu in 'Design view'.

Entering the Solutions4Website Wizard

  1. Click mouse on the blue tab 'HTML5 Vertical Menu: JQVerticalMenu' above the menu in 'Design view'.
  2. Click 'Edit menu' in Dreamweaver 'Properties' panel.

Edit menu content and appearance

Through wizard you can change strucutre of the menu and its appearance.

Open Solutions4Website Wizard.

  1. Enter Solutions4Website Wizard.
  2. Open 'Menu structure' category.
  3. Edit the structure and appearance of your Menu.
  4. Then just press OK and close window.

Preview

To preview your page you’ll need to save your document Select File > Save, than Select File > Preview In Browser, and then select one of the listed browsers or press F12 (Windows) or Option+F12 (Macintosh) to display the current document in the primary browser. Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser.

That’s all!