Takken Fight: Making Drop Down Menus

Shown above is a new drop down menu we have added to our "Passy World" website. We created these menus using Dreamweaver's Spry functionality.

Making a Spry Drop Down Menu Using Dreamweaver

Dreamweaver has very useful "Spry" functionality, which allows a quick way of building a set of drop down menus. We have used Dreamweaver DW CS3 to create our menus shown in the image above, but this can probably be done in newer versions of DW as well.

This first video shows the basics of how to make a Spry drop down menu.

Here is a more detailed Video on Horizontal Spry Menus.
(Don't worry laddies and lasses, you will get used to this guy's accent quickly).

After pressing Play, make sure you increase the resolution from 360p to 720p and go full screen to get a very clear high definition video.

Here is a follow-on video about how to customise the Spry Menu.

After pressing Play, make sure you increase the resolution from 360p to 720p and go full screen to get high definition imagery that shows the CSS code clearly.

Watch this video very carefully, and do exactly what the guy says, especially when putting in your own repeating gradient backgrounds.

On our Passy World site, we decided we would make an APDiv to put the menu inside, so that we can easily mouse drag and reposition it on our page using Dreamweaver.

We then inserted a Spry Menu Bar into the APDiv, and adjusted it (as per the YouTube videos we had watched), to have all the headings we wanted across the top of our page.

This process automatically created a new "Spry Assets" folder in our site definition, that we then needed to upload to our live website, along with our new copy of the Index Page.

The CSS modifications were a bit tricky, and for some of the links we had to go into code view and manually add target="_blank" to make each listed link open as a new page.

We created a gradient see-through background "blueGrad130x40.PNG" using Fireworks, as per the Scottish guy's video, and used this as our background for the menu bar. It is very important to set this background to "Repeat" or we end up with white bits on our longer submenu names.

We also had to make all background colors transparent, and replace all the "SpryMenuBarDown.gif" and "SpryMenuBarDown.gif" images for backgrounds, with our own "blueGrad130x40.PNG" image.

Also on each new link we make for a menu item, we need to click on the text for the menu item, paste in the link, and then underneath this box in proerties, set target to "blank" so that is opens in a new page.

With the CSS it is a matter of trial and error, try changing things to bright red and preview in a browser, to work out what part of the bar they effect. Eventually we got something we liked, but it took about 2 hours to figure it all out.

The CSS changes all get written automatically to a file called: "SpryMenuBarHorizontal.css" in the "SpryAssets" folder, and this whole folder needs to be migrated along with Index.html, and the menu image "blueGrad130x40.PNG", to our live website in the USA.

Here is the final CSS that we ended up with for the Passy World Spry Menu:

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Click here to open or save the “Spry Menu CSS Code” PDF

There was only one minor problem with the upload to our live site. Eg. Because the "PWorldImages" folder does not live under a "PworldHome" folder on the real site, and so we had to go and edit all the paths in the CSS code and remigrate it.

We also found out how to remove the annoying white border around our website by setting up this code in the Index page HTML:

Testing of the new Homepage with Spry menu was done in Firefox, IE, and also Safari on the iPad, and they all came up okay.

Click the following link to check out our new Spry Menu on the Passy World homepage for yourself:

http://www.passyworld.com/

This "Passy World" website is one that we are slowly developing so show how Dreamweaver and Fireworks can be used for website building.
It also supplies some quick and easy links to some of our Facebook photos.

Here are some links to some other blog posts related to the building of our Passy World site:

Design-homepage-in-fireworks.html

Make-homepage-in-dreamweaver.html

Make-contact-us-webpage.html

Making-an-iframe-web-page.html

Finally, here are some additional videos we found for making Tabs and Menus in Dreamweaver by coding your own HTML and CSS, rather than using the built in Dreamweaver Spry functionality.

They claim that these type of menus are faster than the DW Spry ones. The videos certainly offer a good insight into how the CSS works to style up lists into nice menus, and are definitely worth watching for learning value.

Making Tabs in Dreamweaver using CSS

This video shows how to make a set of horizontal tabs that can link to other pages.
It uses raw HTML code and CSS code, and is very clearly explained step by step.

Not sure if this is exactly what we could use on our Passy World page, but it is interesting. Here is the Part 1 of 2.

And here is the second part of this video.

Making a Menu with Drop Down Links using CSS

This video shows really well how to use raw HTML and CSS, (instead of inserting a Spry), to create a Horizontal roll over drop down list menu.
The tutorial is in two parts. Here is Part 1.