How to create a cross-browser drop-down menu with Dreamweaver in minutes
This is going to be short and the main purpose is to let you know Dreamweaver CS4 has a built-in functionality letting you create a good CSS-based drop-down menu in minutes. I’m not sure at what version Dreamweaver started to have this built-in drop-down generator. Perhaps it was from CS3.
The dropdown is CSS/text-based, very easy to customize and maintain and works well with different browsers even when you have a big Flash or image banner right underneath.
If you want to create a drop-down menu from a pull-down list, check out this post: Create a Pull-Down List/Drop-Down Menu
Use the Insert menu
All you need to do is go to menu Insert > Spry > Spry Menu Bar. Dreamweaver/Spry will display a pop-up asking you whether you want a vertical or horizontal menu. After selecting, you just need to play with the Properties panel in Dreamweaver to specify the number of levels your menu is going to have as well as how many sub-item under each main item and so on. Dreamweaver will create a web file [.html, .php, .asp...] , a CSS file [.css] and a Javascript file [.js] and put these 3 files in a folder. If you’ve already managed your website(s) with Dreamweaver [with Site > Manage Sites...], these 3 files will be put inside a folder under one of your managed website.
Changing the drop-down properties
Briefly from the image above from the left to the right, you can specify:
- The instance name of your drop-down menu: the instance name is the id [used in the accompanied CSS and Javascript] of your menu. You can have more than one instances of drop-down menu on a page. Each instance will have a separate id.
- The properties of your first level: number of items, name and url of each item. You can easily add or delete any item by using the plus + or minus - sign. Initially and by default Dreamweaver automatically names individual items as Item 1, Item 2…, and you can easily change these name in the Properties Panel
- The properties of your second level: The same as above
If you’re familiar with CSS, you can easily edit the CSS file such as changing the menu background colors, mouseover colors, text colors, menu width and so on.
Again, hope this helps! Feel free to post your question/comment.
Dreamweaver/Spry is pretty good. I think it was available since CS3. Work pretty well and easy to skin/change colors of the navigation with CSS.
Thanks for the update. I was not aware that Spry is part of the CS4 package.
Everyone else has these huge tutorials. This guy lets you know its built in and super easy !
Thanks alot
Very helpful information without trying to sell it to me.
Thanks a lot I had the information needed to to do the navigation menu in seconds!!!!!!!!!!!!!!!
To be honest all the other websites did not give me the information I needed.
hi thanks alot,
but one problem in drop down horizantal menu, i need it should come drop up when over the button….because I given menu bar at the bottom of the web page….
any one know how to customize the code..
plz send me mail to this id : pavie003@gmail.com
thanks..
Hi,
I’ve added a spry horizontal drop down menu to a button on my top navigation bar. I have an image immediately underneath. How do I get the menu to go over the image? right now it’s pushing the button upwards so not inline with the other buttons. Any help will be appreciated. E-mail me on nasifab@hotmail.com.
thx
Thanks alot.
Thank you very much,
i really need it.
The serif site http://www.serif.com has multiple columns for its dropdown menus. Could Dreamweaver do that? I would love to be able to code that for our website – it’s so smart
Best wishes
Margaret
Hi Margaret,
The menu you’re looking for is called Mega Menu. Although it’s possible to develop it with Dreamweaver, the process is not as easy as doing a 1 or 2 layer dropdown with Spry. Plus, after you develop it, your menu may not work well cross browser/platform. In this case, I’d suggest you google “mega menu” and choose one that’s best suited. The one I saw using the most is based on jQuery: http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
Hope this helps and good luck!
Thank you very much, I’ll have a look at that.
I do have Dreamweaver as part of an Adobe package but I only use it to make a code (like a table to save the bother of s and s ) to paste that into my page.
Best wishes
In case anyone is interested I found a nicce CSS only mega-menu in an English publication
http://www.myfavouritemagazines.co.uk/web-design-essentials/?force_sid=88d3f6814b9dd3a2bb793a1bdcd1884c&
and have adapted it
http://hampsteadparishchurch.org.uk/data/test_header.php
It is not in full use yet
Thank you very much, i really need it.
I’m making an e-Form and I’m looking to have a drop down menu, that when each item is chosen, it will display different option to fill in. What is this called in DW CS4 and anyone have something I can go by? Thanks
Thank you very much, I’ll have a look at that. I do have Dreamweaver as part of an Adobe package but I only use it to make a code (like a table to save the bother of s and s ) to paste that into my page. Best wishes
hi,
i have a website to learn arabic language
i need to make drop down menu, can anybody help?
http://www.studyarabic.eu
thanks
hi all,
this tutorials is very good,
i never forgot your turorials.
I’m making a website with a drop down menu, and I got it to work but there are so many links that it forms two lines when you open it in different browsers. Is there any way to set it to be a permanent width so it stays only on one line?
Hi,
I have read many times that Ajax menus do not allow search engine robots to go through them and access the pages that are depend on them. As Dreamweaver spry menus are based on the Ajax technology, I guess it is the same problem for the search engine robots : they won’t be able to go the Dreamweaver spry menus. Am I right ?
@François:
With some understanding of Ajax, here’s my take: I think search engine robots will have no problem accessing pages linked from the menu. The reason is the menu – the one I show above – is hard-coded on the page, and not stored on an external file, so the robots will “see” everything in the source. If the menu were stored on an external file and called/loaded by Ajax/javascript, robots would have problem accessing the pages.