Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

The Low-Down on Pop-Up Menus in Fireworks 8

The creation of a menu in various modes

Those of you who follow the Fireworks forum postings will probably recognize my name. I suppose I may have gotten a reputation as a crusader who opposes the use of the original Fireworks Pop-Up Menu as implemented in Macromedia Fireworks MX 2004 and earlier. I'm here to tell you that you are absolutely right. There are more than a few reasons not to use those pop-up menus, in my opinion, and I have spent a fair amount of time posting to this effect.

So why am I writing this article, then? Well, I have an agenda, as follows:

  • I want to tell the Fireworks team that I appreciate the effort that they have devoted to making this new menu system.
  • I want to tell you that I will no longer bore you with my usual posts about not using this menu system.
  • I am very hopeful that the Dreamweaver development team will take these comments to heart and focus on the pop-up menu feature in future releases of that program.
To cut to the chase, I am happy to tell you that this feature is greatly improved in Fireworks 8.

In this article I briefly describe the creation of a menu in various modes. I examine and discuss the markup created by Fireworks ready for import into Dreamweaver, and describe what I think might be useful improvements to consider in the resulting markup.

Building a Pop-Up Menu
Those of you who have used the pop-up menu feature in earlier versions of Fireworks will be right at home in the current one. The setup and dialog panel are identical in Fireworks MX 2004 and Fireworks 8, offering exactly the same options and choices. Using this feature in Fireworks 8, you can build visually pleasing menu sets. It's easy to see its appeal.

To examine the pop-up menus that Fireworks 8 creates, you will need to create several extremely simple files. For the first one, open Fireworks and select File > New to create a new page - say, 640 x 400 pixels. Select the text tool and enter Link1 anywhere on the page.

Exit the text tool and then draw a slice around Link1 (I made mine 41 pixels wide and 23 pixels tall). Select it, name it link1button, use the selected slice's bull's-eye to drop the context menu, and select Add Pop-up Menu from the menu choices. A panel will open, and you will make this slice show a simple, single-option submenu. In this panel enter Sub1-1 under the Text column head. There is no need to enter a link or a target.

Now click the Next button to advance to the Appearance tab (or just click the tab), where you can select that this is a vertical menu. With no further adjustment, the submenu will be drawn on top of the top menu choice, so you should advance to the Position tab and click the second position icon from the left. Leave the rest of the settings in this and the other tabs at their default values, and conclude this menu by clicking Done. Save this file as singlebutton.png.

Preview the menu by selecting File > Preview in Browser and then choosing your browser of choice. You should see a single-button menu which, upon rollover, drops a single-option submenu. With singlebutton.png still open, you can now add more buttons to the menu. For the purposes of this tutorial, you will add three more menu buttons and give each of them a single pop-up submenu. To do this, deselect the visible slices option in the Web Layer tools, double-click Link1, and append Link2 Link3 Link4 to it (I have put two spaces between each link name).

Now exit text mode, enable the visible slices option, and select the slice tool to add a slice of similar dimension to link1button to each of the three new menu options. Beginning with Link2, name each new slice using a nomenclature similar to that used previously: link2button, link3button, and link4button. One by one, select each new slice and use the bull's-eye to add a pop-up menu with a single submenu: Sub2-1, Sub3-1, and Sub4-1. Save this new menu arrangement as fourbutton.png.

A preview in browser should once again reveal what good work you do.

Importing the Pop-Up Menu into Dreamweaver
Now that you have two menus created - one with a single button and a single pop-up menu, and one with four buttons, each with a single pop-up menu - it's time to get these into Dreamweaver and examine the markup.

Open singlebutton.png and select File > Export. Choose a landing site for the files from this (I created a folder called single and placed these files into that folder). Looking closely at the Export panel, make sure that the Export field is set to HTML and Images, the HTML field is set to Export HTML File, and the Slices field is set to Export Slices, with the Include Areas Without Slices check box also enabled.

Click the Options button and choose your favorite HTML style and extension. Of the four check boxes on that HTML Setup panel, you need to have at least the bottom two selected (Use CSS for Popup Menus and Write CSS to an External File). Click OK to get out of this HTML Setup panel and the previous Export panel to save the files.

Do the same for fourbutton.png (I created a folder called fourbutton and placed these files there). You have now created all the files you need for the remainder of this tutorial. For me, this process gets the following relevant files in the single folder (and analogous ones in the fourbutton folder): singlebutton.html, singlebutton.css, and mm_css_menu.js. The singlebutton files will be used to describe the details of the menu and its construction. The fourbutton files are there to examine the CSS needed for this slightly more "real-world" example.

The process of inserting these menus into Dreamweaver is exactly the same as it has been for several releases now. Open your Dreamweaver page, place the insertion point where you want the menu inserted, and select Insert > Image Objects > Fireworks HTML. For the remainder of this tutorial, you will examine the code written by Fireworks to understand how these menus are built and how they work. I will use the original files written by Fireworks 8 for this explanation.

Looking at the Code
A glance at the HTML immediately reveals that these menus are very different from those built in earlier versions of Fireworks. The most significant difference is that the links are not written into plain HTML markup on the page.

More Stories By Murray Summers

Murray Summers is a biochemist by training, but has spent the last 20 years working in the computer industry. In 1998, Murray started Great Web Sights (www.great-web-sites.com). As a Team Macromedia Volunteer, he also participates in the sponsored newsgroups for Dreamweaver and other Macromedia products. Murray is a Macromedia Certified Web site Developer and Dreamweaver Developer

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
SYS-CON Italy News Desk 02/27/06 07:14:38 PM EST

Those of you who follow the Fireworks forum postings will probably recognize my name. I suppose I may have gotten a reputation as a crusader who opposes the use of the original Fireworks Pop-Up Menu as implemented in Macromedia Fireworks MX 2004 and earlier. I'm here to tell you that you are absolutely right. There are more than a few reasons not to use those pop-up menus, in my opinion, and I have spent a fair amount of time posting to this effect.

@ThingsExpo Stories
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
Amazon started as an online bookseller 20 years ago. Since then, it has evolved into a technology juggernaut that has disrupted multiple markets and industries and touches many aspects of our lives. It is a relentless technology and business model innovator driving disruption throughout numerous ecosystems. Amazon’s AWS revenues alone are approaching $16B a year making it one of the largest IT companies in the world. With dominant offerings in Cloud, IoT, eCommerce, Big Data, AI, Digital Assista...
SYS-CON Events announced today that Cloud Academy named "Bronze Sponsor" of 21st International Cloud Expo which will take place October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara, CA. Cloud Academy is the industry’s most innovative, vendor-neutral cloud technology training platform. Cloud Academy provides continuous learning solutions for individuals and enterprise teams for Amazon Web Services, Microsoft Azure, Google Cloud Platform, and the most popular cloud com...
When growing capacity and power in the data center, the architectural trade-offs between server scale-up vs. scale-out continue to be debated. Both approaches are valid: scale-out adds multiple, smaller servers running in a distributed computing model, while scale-up adds fewer, more powerful servers that are capable of running larger workloads. It’s worth noting that there are additional, unique advantages that scale-up architectures offer. One big advantage is large memory and compute capacity...
No hype cycles or predictions of zillions of things here. IoT is big. You get it. You know your business and have great ideas for a business transformation strategy. What comes next? Time to make it happen. In his session at @ThingsExpo, Jay Mason, Associate Partner at M&S Consulting, presented a step-by-step plan to develop your technology implementation strategy. He discussed the evaluation of communication standards and IoT messaging protocols, data analytics considerations, edge-to-cloud tec...
"When we talk about cloud without compromise what we're talking about is that when people think about 'I need the flexibility of the cloud' - it's the ability to create applications and run them in a cloud environment that's far more flexible,” explained Matthew Finnie, CTO of Interoute, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
SYS-CON Events announced today that MobiDev, a client-oriented software development company, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MobiDev is a software company that develops and delivers turn-key mobile apps, websites, web services, and complex software systems for startups and enterprises. Since 2009 it has grown from a small group of passionate engineers and business...
SYS-CON Events announced today that GrapeUp, the leading provider of rapid product development at the speed of business, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company, specialized in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market acr...
SYS-CON Events announced today that Ayehu will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara California. Ayehu provides IT Process Automation & Orchestration solutions for IT and Security professionals to identify and resolve critical incidents and enable rapid containment, eradication, and recovery from cyber security breaches. Ayehu provides customers greater control over IT infras...
We build IoT infrastructure products - when you have to integrate different devices, different systems and cloud you have to build an application to do that but we eliminate the need to build an application. Our products can integrate any device, any system, any cloud regardless of protocol," explained Peter Jung, Chief Product Officer at Pulzze Systems, in this SYS-CON.tv interview at @ThingsExpo, held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA
With the introduction of IoT and Smart Living in every aspect of our lives, one question has become relevant: What are the security implications? To answer this, first we have to look and explore the security models of the technologies that IoT is founded upon. In his session at @ThingsExpo, Nevi Kaja, a Research Engineer at Ford Motor Company, discussed some of the security challenges of the IoT infrastructure and related how these aspects impact Smart Living. The material was delivered interac...
Artificial intelligence, machine learning, neural networks. We’re in the midst of a wave of excitement around AI such as hasn’t been seen for a few decades. But those previous periods of inflated expectations led to troughs of disappointment. Will this time be different? Most likely. Applications of AI such as predictive analytics are already decreasing costs and improving reliability of industrial machinery. Furthermore, the funding and research going into AI now comes from a wide range of com...
In his session at Cloud Expo, Alan Winters, an entertainment executive/TV producer turned serial entrepreneur, presented a success story of an entrepreneur who has both suffered through and benefited from offshore development across multiple businesses: The smart choice, or how to select the right offshore development partner Warning signs, or how to minimize chances of making the wrong choice Collaboration, or how to establish the most effective work processes Budget control, or how to ma...
IoT solutions exploit operational data generated by Internet-connected smart “things” for the purpose of gaining operational insight and producing “better outcomes” (for example, create new business models, eliminate unscheduled maintenance, etc.). The explosive proliferation of IoT solutions will result in an exponential growth in the volume of IoT data, precipitating significant Information Governance issues: who owns the IoT data, what are the rights/duties of IoT solutions adopters towards t...
SYS-CON Events announced today that Enzu will exhibit at SYS-CON's 21st Int\ernational Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Enzu’s mission is to be the leading provider of enterprise cloud solutions worldwide. Enzu enables online businesses to use its IT infrastructure to their competitive advantage. By offering a suite of proven hosting and management services, Enzu wants companies to focus on the core of their ...
In his session at @ThingsExpo, Eric Lachapelle, CEO of the Professional Evaluation and Certification Board (PECB), provided an overview of various initiatives to certify the security of connected devices and future trends in ensuring public trust of IoT. Eric Lachapelle is the Chief Executive Officer of the Professional Evaluation and Certification Board (PECB), an international certification body. His role is to help companies and individuals to achieve professional, accredited and worldwide re...
SYS-CON Events announced today that CA Technologies has been named "Platinum Sponsor" of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business - from apparel to energy - is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
SYS-CON Events announced today that IBM has been named “Diamond Sponsor” of SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California.
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...