Dreamweaver Drop Down Menu Tutorial

In this tutorial I am going to show you how to take one of our drop down menus and install it with Dreamweaver. We are not going to create a drop down menu from scratch. Instead I will walk you through how to take one of our drop down menu templates, and install it with your Dreamweaver site. In this tutorial I am using Dreamweaver CC but the process will be almost identical for other versions of Dreamweaver.

Note:

If you would like to create beautiful Dreamweaver menus with a drag and drop interface, check out our Dreamweaver Menu Extension.

Find a Menu Template

Take a look at our library of free and premium menu templates. We have a variety of structures and styles available:

Once you find a menu template you would like, click the Build button to customize the menu in our Menu Maker.

Customize your Menu

Now that you are in the Menu Maker you will have a lot of options to customize the design and structure of your menu. On the left-hand side, you can drag and drop to rearrange your menu items and create sub menus. Most of our menus also have color options so you can pick a custom color to match your Dreamweaver website. If you need help using the Menu Maker, click the help icon in the bottom right corner of the screen.

Dreamweaver Drop Down Menu Tutorial

Download your Menu

Once you have customized your menu to your liking, click the download button at the bottom of the screen to download a .zip file of our menu. After unzipping the .zip file you should now have a folder called cssmenu. The files inside this folder should look like this:

Dreamweaver Drop Down Menu Tutorial

Some of our menus use images and some don't. If you don't see a folder called images then your menu does not use images. If your menu uses images then you will need to follow an extra step we will go over later in the tutorial.

Import the CSS File

Now that you have downloaded your menu we need to import the CSS file into your Dreamweaver page. Open up the page in Dreamweaver that you would like to install your menu on. Inside the CSS Designer windows, there should be a panel called Source. If you do not see the CSS Designer window you can open it up by clicking the menu item Window > CSS Designer. Click the '+' plus icon in the top right corner of this panel and choose the menu item that says Attach Existing CSS File

Dreamweaver Drop Down Menu Tutorial

Once you click this menu item a popup window will appear. Now click the Browse button and navigate to the customized menu you just downloaded. Choose the file called styles.css and then click open. You will most likely get a pop up saying that the file you have just chosen is outside the root directory of your site. You will want to click yes to copy the file into the root directory of your site.

Dreamweaver Drop Down Menu Tutorial

Once this is finished you should see a new link to the CSS file in the header of your page. You will have to be in Code View mode to see this, so switch to Code View if you are not already in it.

Dreamweaver Drop Down Menu Tutorial

Drop in the HTML

Now that we have the CSS file imported to our Dreamweaver page we can drop the menu HTML into the page and everything should come together. Head back to the cssmenu folder you downloaded and then open up the file called instructions.html in a browser. You should see a working example of your menu along with some generic instruction to install the menu. Ignore the instruction and skip to Step 3 where is says to copy the HTML. Select all of the HTML inside that box and paste it into your Dreamweaver page where ever you would like your menu to show up.

Simple as that! Now Save your page and preview it in a browser. If everything went according to plan you should see a shiny new drop down menu.

Optional: Import Images

If your menu uses images you will see a folder called images in the downloaded menu folder. We need to move the images folder into the root directory of your site. You can do this by simply dragging the images folder into the root directory of you Dreamweaver Files panel. If you don't see the files panel you can open it up by clicking the menu item Windows > Files. When you've done this your root directory should look like the image below:

Dreamweaver Drop Down Menu Tutorial

If the root directory of your site already has a folder called images, then you can just move the individual image files into this folder.

Conclusion

So that's it! If you are reading this then congratulations on your new Dreamweaver drop down menu. If you don't understand one of the steps please ask me in the comments section and I will get back to you. We have put a lot of work into this site and if you are using it for free please consider giving us a link on your site. You will get lots of karma and the web gods will look favorably upon you!

Drop Down Menu by CSSMenuMaker.com