Building a Menu Bar with Edge Animate Actions

Tutorial: Cool Crafts for Kids Website Navigation

Download Files

Getting the Menu Working with Actions

  1. From Adobe Edge Animate, open index.html inside the CoolCraftsForKids project folder.
  2. Select the by type menu button, then right-click on it and select Open Actions for “by-type_button”.
  3. Select click from the popup menu in the Actions panel.
Adobe Edge Animate actions for navigation menu (1)
  1. On the button bar on the right, click Open URL.
Adobe Edge Animate actions for navigation menu (2)

Some code will be automatically generated, with a web address pre-selected.

Adobe Edge Animate actions for navigation menu (3)
  1. You don’t even need to hit delete. Just start typing the next page name: by-type.html
Adobe Edge Animate actions for navigation menu (4)
  1. Repeat for the by material button, but have it link to by-material.html
Adobe Edge Animate actions for navigation menu (5)
  1. Get the by age button to link to by-age.html
Adobe Edge Animate actions for navigation menu (6)
  1. Finally, we do want to link the home button to index.html, the same file we are in. It won’t make a lot of sense for the current page, but we are setting up a menu to work for all pages.
  2. Save the file.
Adobe Edge Animate actions for navigation menu (8)

If you test this page in the browser, all of the buttons should be clickable. So far, the home button will end up on the same page, and the other buttons will lead to 404 errors. This is desirable at this point. It means your actions work.

Site Build-Out

Let’s start making the other pages.

  1. Go to File > Save As. In the box for the file name, you want to use the exact same file name you entered for the second button: by-type.html
Adobe Edge Animate actions for navigation menu (9)
  1. In the Elements panel, delete all of the overlay elements and all of the craft elements that were only needed on the homepage.
Adobe Edge Animate actions for navigation menu (10)
  1. Add a header to the page that says Crafts By Type using the text tool. Style the text however you wish.
  2. Save the file.
Adobe Edge Animate actions for navigation menu (11)
  1. Save the page again as by-material.html
Adobe Edge Animate actions for navigation menu (12)
  1. Change the page heading text to Crafts By Material
  2. Save the file.
Adobe Edge Animate actions for navigation menu (13)
  1. Save the page again as by-age.html
Adobe Edge Animate actions for navigation menu (14)
  1. Change the page heading text to Crafts By Age
  2. Save the file.
Adobe Edge Animate actions for navigation menu (15)
  1. Test the site again in the browser. All the menu buttons should working, taking you to their respective pages.