WordPress Dreamweaver Dropdown Menu

About WordPress Dreamweaver Dropdown menus.

I love Dreamweaver’s Drop down menu. The menu is great for Search Engine Optimization (SEO). I am a beginner programmer and anything that can help me along I absolutely love. This “How-to” revolves around your “pages” in WordPress.  Once you follow my step-by-step instructions you will realize how slick these menus are as you don’t need to keep editing the menu file independantly of the content. You will need to make sure that you use your own SpryAssest or these ones that I have zipped up for you enjoyment: spryassets.zip

How does dreamweaver’s menu work anyhow?

Dreamweaver’s menu relies on Un-ordered lists, SpryAssets (Adobes own javascript), and CSS using very specific classes and ID’s.

My assumptions & post legend:

All code will look like:

<h1>This is a title</h1>

If I have to wrap code the indication will be on the next line using: my Line wrap symbol

<--LW-

When ever you see ” ./”  that means the root of the site.

I assume that you installed wordpress to the root of the site and not in a directory like WordPress or “Blog”

How do I install your WordPress Dreamweaver Dropdown Menu?

I recommend that if you are just starting out to use my directory structure. The reason why I suggest this setup is that it will make the drop down menu available to multiple themes if you so choose.

Where do I put the SpryAssests?

You will be putting the SpryAssests in th root .\ directory.

Where Does menu.php go?

menu.php goes in the theme directory you are working on. For example you are working on the Default Theme, you would copy it to .\wp-contents\themes\Default\

How does you theme know how to use menu.php?

Well there are 2 things that you need to do.

1.) Include the menu.php in the theme design.

Go to where you want you want the menu to show up in the code:

<?php include menu.php  ?>

** NOTE ** Make sure not to include the spaces between the ?’s.

2.) Include the propper calls for the Spryassests CSS and javascripts.

Go to the header.php file and add:

<link href="./includes/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="./includes/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

Go to the footer.php file and add this just above the </body> tag:

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
<--LW- {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
<--LW- imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

How to get sub-menus.

Because I did say that this is a drop down menu we have to make sure that we use WordPress in such a way that the software will automatically create the drop down menus for you. In wordpress when you are creating pages you have the option of making the page a “main page” or a page that is a “member” of a main page. As one would guess any Page that is posted as a main page will be displayed as Top most part of the menu. If you make a page a sub-catagory of a page that page would be part of the actual drop down menu. For example look at my menu. You will notice that the first item in the menu is “About Us”.  It then has Jared’s Resume, Delila’s Resume, etc…

About us is a “main catagory” item. I told the other items to use “About Us” as thier parent in the Edit a Page screen in wordpress.