Exporting your Menu

Now that you have completed building your menu, it is time to get it into your website. When you select this option, you’ll be prompted to save your menu. Once this is completed, the menu will be exported and the resulting dialog will tell you exactly what you need to do to add your menu to a website. It’s an easy 3-step process.

Figure 19: The Export Dialog and embed steps.

A 3 step menu export process.
  1. Copy the code in Step 1’s text box and place it in the <head> tags of the webpage.
  2. Copy the code in Step 2’s text box and place it in the appropriate location in the webpage’s <body> section where you want the menu to appear.
  3. Upload the contents of folder shown in Step 3 to your server. You can do this with any FTP client. It’ll need to be placed in the same folder as the webpage you’re working with. Use the “Open in Finder/Folder” button to automatically take you to where these files are located on your computer. You can find an article that describes the details of adding a navigation menu to your site here.

There is still one more thing that we need to point out. If some of your webpages are in different folders, there are two ways to address this when adding your menu to them:

Option One: The Easiest Method

Simply add the resource folder (the one that has the same name as your menu, you found it in the folder called ‘exported_menuname’ in step 3) to these folders as well and your menu will work and look the exact way you designed it.

Option Two: Slightly More Technical

This is the preferred method, but since it requires a small manual code change, it may be slightly more complicated. If your pages are in a subfolder add ./ in front your menu name in the code you pasted to your head section in Step 1. This tells your page the stylesheet and other resources can be found one level up. Therefore, only do this for the pages in subfolders!

That’s it—you have build, designed and embedded a (responsive) CSS3 Navigation Menu! From here, adding buttons, making design changes or a whole different menu will be a breeze. At this point you will probably be as addicted as we’re to this app: you won’t be able to stop tinkering with the property controls and playing with Sizer and Breaker. The only thing we can say about that is: enjoy it!