I created a drop down menu with Dreamweaver CS3 ( I am waiting to upgrade soon. )

Your directions were great. When I F12 the page to preview it, it looks awesome!

However, when I upload the page, does not look the way it should or function at all.

I have searched the internet high and low for answers to no avail.

Do you have any suggestions, or a quick fix?

Thank you so much for you help.

Shari

Hi Shari,

When you create a drop-down menu with the Spry features in Dreamweaver, Dreamweaver generates the HTML and CSS code, as well as the scripts that make it all work.

Those scripts are usually saved in a folder with a name like SpryAssets and you need to upload the scripts for your drop-down menu to work.

Look in the Files panel for a new folder created by Dreamweaver that has .js files in it (these are JavaScript files). Upload the entire folder to your server with the HTML page that has your drop-down menu and everything should work on the server, just like it does on your hard drive.

You can learn more on my site about creating a drop-down menu in Dreamweaver, as well as editing a drop-down menu in Dreamweaver.

Hope that helps you solve the problem,

Janine

Could you please show me how to change a standards-based vertical navigation bar into a Spry menu bar? In other words, how to add submenus to a standards-based vertical navigation bar?

Regards,
Coddie

PS: I’m working on a template.

HTML Code:
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
</ul>

Change to

<ul id=”MenuBar1″>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 1</a>
<ul>
<li><a href=”#”>Item 1.1</a></li>
<li><a href=”#”>Item 1.2</a></li>
<li><a href=”#”>Item 1.3</a></li>
</ul>
</li>
<li><a href=”#”>Item 2</a></li>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3</a>
<ul>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3.1</a>
<ul>
<li><a href=”#”>Item 3.1.1</a></li>
<li><a href=”#”>Item 3.1.2</a></li>
</ul>
</li>
<li><a href=”#”>Item 3.2</a></li>
<li><a href=”#”>Item 3.3</a></li>
</ul>
</li>
<li><a href=”#”>Item 4</a></li>
</ul>

Hi Coddie,

Unless you know JavaScript, HTML, and CSS very well, doing your own editing of a menu like the one you show in the email will be very challenging.

If you don’t wish to learn how to write all of that code, I suggest you consider using the Spry navigation options in Dreamweaver. Here’s an article on how to create a drop-down menu in Dreamweaver:
http://www.digitalfamily.com/dreamweaver/Spry-Tutorials/spry-drop-down-menu.html

Hope that helps and I wish you all the best,
Janine

I am almost all the way through your Dreamweaver videos on Kelby Training, and they are great. Thanks.

One thing I have not seen yet (and don’t see in the lesson titles I have left) is how to create a drop-down or fly-out menu in Dreamweaver.

I have searched online and found a lot of conflicting information on how to do it. Since you are such a good instructor, I thought it would be great if you presented that technique somehow/somewhere. Thanks for any help you could give to the rest of us on that topic!

Thanks,
Doug

—–

Hi Doug,

Thank you so much for your kind words about my videos at KelbyTraining.com.

How to create and edit drop-down menus with Dreamweaver’s Spry feature is a topic I want to address, but I haven’t had a chance to get into those advanced features yet in my videos. There is a lot to cover when it comes to Web design, but I do hope to add some video lessons on these features in the future.

I do have a couple of written tutorials on the topic that may help you; the following URLs will take you right to them.

How to create drop-down menus (or fly-out menus)  in Adobe Dreamweaver

Tips for editing a drop-down or fly-out menu in Dreamweaver

Two things to keep in mind.

First, these tutorials were done with Dreamweaver CS4, but the features did not change in version CS5, so they should work with either program.

Second, drop-down menus combine XHTML, CSS, and Javascript, which makes them considerably more complex to work with than many of the other features in Dreamweaver, especially when it comes to making sure your pages look and work well in many different Web browsers.

The Spry features in Dreamweaver offer a great shortcut to creating Javascript, but they’re not perfect, and if you run into problems, they can be complex to troubleshoot (I tell you that not to scare you off, just to warn you). In general, if you keep the drop-downs at the top of the page, they seem to work better than if you try to integrate them in the middle of a page design. Also make sure you don’t have any Flash files that may overlap with the drop-downs, or the menus will get lost behind the Flash file.

Finally, to make sure you drop-down menus work well across different computers and browsers, consider using the services in this tutorial on my site.

I sincerely hope that helps you and I wish you all the best with your Web designs,
Janine

I created a tabbed panel on one of my pages. When I preview it in a browser, the page has this restriction message about scripts and ActiveX controls at the top, and a pop-up window asking if I’m sure I want to run this active content.

What can I do to have the page appear without the ActiveX restriction?

Andrew

Hi Andrew,

That “error” is designed to protect you from the fact that when you execute a script or ActiveX control on your computer, you run the risk of getting a bad virus or unleashing some malicious program.

All that is to say that Internet Explorer is trying to protect you — in this case, from your own script.

The good news is you don’t have to change anything and most people who visits your site on the Web won’t see the error.

This error message only appears when you preview pages on your computer that have active content (drop-down menus, panels, and other interactive features that require scripts).

Beware that IE offers many security settings and there are many reasons users do sometimes see this error message on live web pages, especially if you’re using scripts to download active content to a user’s machine.

You can test it yourself by publishing the page and viewing it in the same browser on the server that you used to view it on your hard drive. If you only see the error when you view the page on your computer, you can assume your visitors will not have a problem with your content.

I hope that helps you as you build your site and I wish you all the best,
Janine

I went through your Total Training video series to get a basic understanding of Dreamweaver. A friend was taking DW classes at a local college (very expensive) at the same time I was working through your tutorials and I feel I know the program better than he does. Thanks for your excellent instruction.

I have since created a site using the vertical Spry menu in CS3. I had a couple of issues with the way content displayed in IE7 and was able to figure out workarounds on all of my pages except where I had SWF movies. For some reason the movies play very low on the page. It is almost as if there is a placeholder above the movie that is the same dimension as the movie, pushing it to the bottom of the page. I have researched on the Web for a solution and have come to realize there are many issues with Spry and IE, but I have not been able to find an example or fix for my particular problem. I would greatly appreciate any light you could shed on this.

Thanks for taking time to answer questions. This is my first site and I am sure I could have done many things better, but I have learned, and continue to learn, a great deal from you and your resources.

Thanks,
Todd

Hi Todd,

Thank you for your kind words about my videos. I checked out your site and I see you’ve run into a common problem because the Spry menu you created is conflicting with the video files on some of your pages.

I wish there were an easy solution. Since I created my Dreamweaver video, I’ve spoken with several other web designers about the problem of Spry menu conflicts when they overlap any kind of Flash files (and other video formats as well). Unfortunately, the solution most people are using these days is to try to avoid the problem by making design choices that don’t require these types of features to bump into each other.

For example, on the pages where you have video just to the right of your vertical Spry menu, you could add some text or a still image (GIF, JPEG, PNG) above the video so the menu is overlapping text or an image and the video is pushed down the page below the menu. That way it should play without conflict. It’s always nice to give a little explanation about a video anyway, because not everyone can play videos on the web and some people like to read about a video before they play it.

Hope that helps you find a solution for your site about your work in Panama.

Thanks,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Well, I guess the more you suffer and make mistakes, the more you learn. . . I’ve had a fun 4th holiday getting introduced to Spry. On the good side, my site looks lightyears better than before. I can actually look at the code and understand it.

“Please” let me run one question by you regarding the Spry horizontal menu bars. Touchtunes uses a placed image for its menu bar items and a separate hover-state image. The submenus are a solid light-grey box and the hover state is an orange bar. My problem is that any top-row item that has a submenu below it also gets assigned the submenu class. That only allows me (3) states: 1. for the HorizontalItemBar, 2. HorizontalItemBar hover, and 3. Submenu. I can’t do a hover for the submenu if I can’t reassign some of the top-row items as HorizontalItemBars.

All I’m looking for from you is to let me know that it should work and that I’m doing something wrong with the CSS styles. If I’m doing something wrong, I’ll kill myself to eventually figure it out.

Thank you,
Chris B.

Hi Chris,

If you want to have more control over these kinds of menus, consider getting one of the Dreamweaver extensions for creating menus. You’ll find instructions for how to search, download, and install extensions to add new features to Dreawmeaver in this tutorial .

If you search the Adobe Exchange site I referred to in the tutorial, you’ll find more menu-creation tools that may help you with more options.

The other option is to learn to write CSS and JavaScript yourself, but that’s definitely the long road home. . .

All my best,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.