Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Archives for Programs

Dec 28, 2008 By Jared Heinrichs Leave a Comment

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.

Filed Under: Adobe Dreamweaver, Wordpress

  • « Previous Page
  • 1
  • …
  • 16
  • 17
  • 18

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2019 Winnipeg Web Design