Comments
yourfanat wrote: I am using another tool for Oracle developers - dbForge Studio for Oracle. This IDE has lots of usefull features, among them: oracle designer, code competion and formatter, query builder, debugger, profiler, erxport/import, reports and many others. The latest version supports Oracle 12C. More information here.
Cloud Expo on Google News
SYS-CON.TV
Cloud Expo & Virtualization 2009 East
PLATINUM SPONSORS:
IBM
Smarter Business Solutions Through Dynamic Infrastructure
IBM
Smarter Insights: How the CIO Becomes a Hero Again
Microsoft
Windows Azure
GOLD SPONSORS:
Appsense
Why VDI?
CA
Maximizing the Business Value of Virtualization in Enterprise and Cloud Computing Environments
ExactTarget
Messaging in the Cloud - Email, SMS and Voice
Freedom OSS
Stairway to the Cloud
Sun
Sun's Incubation Platform: Helping Startups Serve the Enterprise
POWER PANELS:
Cloud Computing & Enterprise IT: Cost & Operational Benefits
How and Why is a Flexible IT Infrastructure the Key To the Future?
Click For 2008 West
Event Webcasts
Dreamweaver Tutorial: How To Build CSS Based Pop-up Menus...
...without writing any code using Fireworks 8 and Dreamweaver

In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;

An example of a CSS menu
This tutorial takes only 25 minutes to complete. How to make pop up menus quick and easy

With Fireworks 8 you can now design a decent pop-up menu with an optional rollover. The pop-up menu can even have submenus (several menus deep). You can customize the color, the borders, the size of the menu itself and its positioning. There is a wizard driven command that gives you a ton of control over the look and feel of the menu.

Perhaps you are thinking, "wait, I've already seen this in previous versions of Fireworks". And I'd have to say that you were correct. But there is a major difference now, and that is the ability to make the menus using CSS instead of JavaScript. Not only can you use CSS now but the CSS can be in a separate Stylesheet. The options I believe are turned on by default but be sure to check by going to File | HTML Setup | General and check that the two CSS options are both checked.

You can also convert pop up menus you made in previous versions of Fireworks to the new CSS based menus. To do this you simply open the menu file, change the HTML setup to use CSS styles and export again.

To begin this tutorial open Fireworks with a new canvas or an existing site. If you'd like to use my file then open BBC.png from the zip file. This is only a mockup for a client and not a completed site. (see Figure 1)

How to make navigation using symbols
Add text and/or images
The first step is to add text links or image links that you want to use for the navigation. This example uses the font, Freestyle Script, size 52, color white, smooth anti-alias, and the word Service. (see Figure 2)

Using Symbols
Select your text or image (Service), press F8, name the symbol and select Button and click OK. Press F11 to open the Library. Notice your button symbol is there. Drag the button name from the Library to the canvas-2 times. Notice that the symbol "copies" have a little arrow in the bottom. This indicates that this button symbol is attached to the original. With a symbol, when you use edit it as seen next, it will change all instances of the symbol.

Editing Symbols
To edit a symbol, double click on Service to open the Button Editor. Click the Over tab and the Copy Up Graphic. Make changes to the over state and repeat for other states if desired. Click Done. All instances will be changed.

Link Names and Linking
I know I said if you edited the symbol all instances would be changed. The exception is that you can change the text on individual buttons. It wouldn't be much use otherwise. To change the names of additional instances of the symbol, select them and change the name in the Text field in the Property inspector. You can also add the link in the link field. Click Preview to see the rollover effects.

Tip: When adding links use relative links (you'll need to know the site structure).

Adding a Pop Up Menu
Adding the menu to the first button
Select Service, go to Modify|Pop-up Menu|Add Pop-up Menu. In the Content dialog box, add menu names and links (# is a null link). To indent a menu item (which is a sub of the menu above it), use the indent button (the second blue icon to the right of the + - icons).

Tip: If you aren't using a symbol then you need to insert a slice to your navigation element prior to adding the Pop-up menu.

Setting the menu Appearance
Select the Appearance tab. (see Figure 3) Here you set the menu colors, vertical or horizontal menus and HTML or text buttons versus an image. Also choose the button color and the text colors. In the bottom pane you'll see a preview of the menu.

Links and Styles
Select Image from the styles icons for an image link. To add a custom style, export from Fireworks and save in the Fireworks program files. Navigate to the Configuration folder then the Nav Menu folder and save. Your custom style will then show up in the editor.

Advanced Menu Options
Set the cell width and height or choose the automatic option to scale the menu automatically to the text. You can add padding and border effects if necessary. With no border you won't see a line between the links.

TIP: When I want the lines between links and no outside border, I make the border and highlight color the same as the background. This is what I did in the sample project.

Set the Position
In the Position dialog, select the position of the menu. (see Figure 4) This exercise is using the menu below the trigger. Select the submenu (the one to the side of the submenu) and click Done.

Edit the Position
In your document, select the button slice and you'll see a blue outline for the submenu. Click and drag the blue area to visually place the submenu. Right click on the slice and select Edit Pop-up Menu. Select the Position tab to see the placement change.

Tip: Repeat steps 5-10 for each separate link.

Prepare to optimize and export for use in Dreamweaver
You could optimize and export right from the client document (the comp file) but it would require a lot of work. This menu will be "floating" above the background elements in a DIV so I don't want the yellow bar or the image to show up with the navigation. It helps to know what your final use will be prior to exporting. Plus I like to keep my Fireworks menus in a separate file.

To remove the menus from the comp document, simply select the first menu, press the Shift key and select each of the other completed menus. Select Edit|Copy or Ctrl+C. Choose File|Open|New (black canvas) and paste (Ctrl+V). Save your file.

The sample file in the zip file is named menus.png and only Services is completed. (see Figure 5)

Optimize the image
Using menus.png, in slice view select the slice over the text and select the Preview tab. Open the Optimize panel (F6). In the Optimize panel select the file format. Since this is text GIF is best.

Set colors and Transparency
Select Index transparency to remove the background color. It will leave a bit of black on the edge but for our purposes that is fine. Use 64 colors, any less and the anti-aliasing won't be as good. Set Matte to none.

HTML setup
Choose|File|HTML setup. In the General tab be sure the 2 CSS options are checked. In the Table diaglog, select "Space with a single table, no spacers" and select "Use Canvas color". Click OK.

Export the menus
Select File|Export, the export should be set to HTML and Images so you get the CSS menus and the JavaScript. Be sure slices is set to "Export Slices" and do not check "include areas without slices". Export to you root folder.

Files to upload to your server
You should export all your graphics from Fireworks into your sites root folder. The export folder we just completed is in the BBC site. (see Figure 6) Note the files that got exported. There is a JavaScript file and a CSS menu. The JavaScript file needs to be in every folder that has a page using the menu. If you don't do this, the menus won't work, this is a limitation of the Fireworks pop-up menus. They are CSS based but there is a small bit of JavaScript still utilized. These are not pure CSS menus but a huge improvement over previous versions in Fireworks and Dreamweaver. Also note the images folder. The rollovers and an arrow for the submenus were automatically exported. You may want to rename the images.

Putting the menus into a Dreamweaver layout
Define a Dreamweaver site
Before you start, copy the source.zip to your hard drive.

Go to Site|Manage Sites and click on New site. Name the site and navigate to the sites root folder (BBC). You'll need to also setup the Remote server before you can upload from Dreamweaver. (see Figure 7)

Setup the FTP
Click on Remote Info (Advanced tab). For Access select FTP. Fill in your host info (URL or IP address) as well as your FTP login information. Click OK when you are finished then Done to close.

Open the starter file

In the Files panel (F8) you see the site structure. Double click on bbc.html to open it. The purple box is what we'll be using. Don't worry, it won't stay purple!

Insert the pop-up menu
Click inside the purple box and select Insert|Image Objects|Fireworks HTML. Browse to the Export folder and select menus.png, click OK. The menu will now be in the purple div box.

Edit the CSS
To edit the style that makes the div purple, open the CSS styles panel (Shift+F11) and you'll see this sites styles. Menu.css was added by the Fireworks insert. Scroll down towards the bottom and select #menu. In the Properties for "#menu" area, click the background color box and click on the Trash can to delete it.

Preview in a browser
Press F12 to preview in your default browser. Test the Services rollover. Do you see your menu? If not then you need to go to the Export folder of the BBC folder and copy the mm_ccc_menu.js file and paste into the BBC folder so it's with the bbc.html file.

That's all there is to building a CSS dropdown menu!

About Joyce Evans
Joyce J. Evans is a training veteran with over 10 years of experience in educational teaching, tutuorial development, and Web design. She has presented at conferences such as Macromedia MAX 2003 and TODCON. Joyce has authored books including Macromedia Studio MX 2004 Bible, Dreamweaver MX 2004 Complete Course, and others. Joyce is a Team Macromedia volunteer and her work is also featured in the Macromedia Design/Developer center. Her Web site is www.JoyceJEvans.com.

In order to post a comment you need to be registered and logged in.

Register | Sign-in

Reader Feedback: Page 1 of 1

I've tried your instructions but the final result is the pop up menu overlaps itself and appears way below the button it is supposed to be connected to. I've adjusted positions in Fireworks and followed your instructions for dreamweaver, but it does not change. This has me more confused than ever.

Where can I download the source code for this article? I have the paper WebDDJ and it is extremely frustrating that the source code for articles is so hard to find.

In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;

In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;

In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;

In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;


Your Feedback
Theo wrote: I've tried your instructions but the final result is the pop up menu overlaps itself and appears way below the button it is supposed to be connected to. I've adjusted positions in Fireworks and followed your instructions for dreamweaver, but it does not change. This has me more confused than ever.
Eric Knipp wrote: Where can I download the source code for this article? I have the paper WebDDJ and it is extremely frustrating that the source code for articles is so hard to find.
SYS-CON Australia News Desk wrote: In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;
Web Developer's & Designer's Journal wrote: In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;
AJAXWorld News Desk wrote: In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;
AJAXWorld News Desk wrote: In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;
Latest Cloud Developer Stories
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering cons...
ScaleMP is presenting at CloudEXPO 2019, held June 24-26 in Santa Clara, and we’d love to see you there. At the conference, we’ll demonstrate how ScaleMP is solving one of the most vexing challenges for cloud — memory cost and limit of scale — and how our innovative vSMP MemoryON...
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, vi...
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To s...
Subscribe to the World's Most Powerful Newsletters
Subscribe to Our Rss Feeds & Get Your SYS-CON News Live!
Click to Add our RSS Feeds to the Service of Your Choice:
Google Reader or Homepage Add to My Yahoo! Subscribe with Bloglines Subscribe in NewsGator Online
myFeedster Add to My AOL Subscribe in Rojo Add 'Hugg' to Newsburst from CNET News.com Kinja Digest View Additional SYS-CON Feeds
Publish Your Article! Please send it to editorial(at)sys-con.com!

Advertise on this site! Contact advertising(at)sys-con.com! 201 802-3021



SYS-CON Featured Whitepapers
ADS BY GOOGLE