Looking for a way to add your new CSS menu created by CoffeeCup Menu Builder to your Visual Site Designer website!? Yes, we know that is why you are here. ;) That being said, simply follow the instructions listed below and your menu will be embedded in your Visual Site Designer site in no time!

Step 1

Click the Export toolbar icon in Menu Builder and you will then see this dialog box appear.  Here you will find the HTML markup that you need to add to Visual Site Designer as well as the location of all the support files that need to be uploaded with your website to make the menu function.

Step 2:

Press the Copy to Clipboard button located under Step 1 of the Menu Builder Export Dialog. This will then allow you to take this code and add it to Visual Site Designer.

 

Step 3:

Go back to Visual Site Designer and go to the Edit Menu and select Edit Header and paste the copied code into the Header HTML box and click OK

Optional: Visual Site Designer does not build responsive based websites by befault. There is a hack that may allow your menu to be responsive. But you have to add additional code in this step. 

Add the following code under the Edit > Edit Header menu. 

<meta name="viewport" content="width=device-width">

Note: this is a hack and there is no guarantees this will work for your VSD site.

Step 4:

Press the Copy to Clipboard button located under Step 2 of the Menu Builder Export Dialog. This will then allow you to take this code and add it to Visual Site Designer.

Step 5

Go back to Visual Site Designer and click the Add HTML button located in the Left Hand Toolbar and click on your page where you would like the menu to appear.

Step 6

This opens the Insert HTML window. Now enter a name to reference this HTML object in HTML Object Name field and then paste the code into the text area below the Body HTML tab.

Step 7

Click OK and your object will be placed on your Visual Site Designer webpage. Do not forget to size and position it where you would like it to appear on the page. 

 

Step 8

Now we have to make sure the menu sits on top of every other element. This sets the z-index of the menu element and will ensure that your menu displays correctly.

 

1. Go to the Edit Menu > Insert Website Analytics Code and paste in this markup:
 
<script src="zIndexFixMb.js"></script>
 
2. Download this zipped JS file. Then you need to unzip the JS file, this can normally be done by right clicking the zip file and selecting "Extract All". Then go to the Edit Menu > Add Files and add this js file to your VSD project. 
 
 
3. Click Publish.

Now we need to include all of the menu files with Visual Site Designer. This is where you have a few options on how you want to include the Menu Builder files with Visual Site Designer.

Upload your Project

Option 1: Automatic (S-Drive):

This option is used for S-Drive and it is by far the easiest way to include your menu with Visual Site Designer. Click the Open Folder in Explorer button located under Step 3 of the Menu Builder Export Dialog. This will open a folder that contains all of your Menu Builder files

PLEASE READ CAREFULLY! Take the CONTENTS of this folder and copy them into your Visual Site Designer _website project folder. Again, only copy the CONTENTS of this folder and not the folder itself.

And that is it! Now publish your website to S-Drive and your menu files will automatically be included when you publish.

Option 2: Manual Upload:

You can also use any FTP program (like our Direct FTP) to upload the menu files to your server. Click the Open Folder in Explorer button located under Step 3 of the Menu Builder Export Dialog.

This will open a folder that contains all of your Menu Builder files.

PLEASE READ CAREFULLY! Take the CONTENTS of this folder and upload them to your server and place them in the folder where your website files are located.

When you're done, simply Save and Publish your website to see your fancy new menu in action. :)

Enjoy!