fixed dropdown menus

Website Under Construction

Over the last year I have made significant changes to my website to increase the integration between the main photography part of the site, and my blog. One of my goals was to make the depth of my website more apparent and more accessible from all of the sites main pages through the use of drop down menus.

The blog part of my site is driven by WordPress and uses a home-grown highly customised theme. Developing and maintaining drop down menus in this part of my site has been relatively easy; adding new content to my blog follows along quite nicely without any further work. In a word - sweet!

The core of the main photography part of my site is derived from TTG Pages, TTG Highslide Gallery and, soon to be added, Highslide Gallery Pro. These Adobe Photoshop Lightroom Web module plugins from Matthew Campagna at theturninggate.net go a long way to helping me evolve and grow my site. Achieving my goal over this part of my site means modifying each and every page produced by the three plugins I use. Because of the existing plugin architecture this has meant some compromises overall but I feel the advantages have been worth it. When The Turning Gate releases the latest set of plugins based on the new HTML5 standards (TTG Core Elements 3) maintaining this side of my site should become just as effortless.

Over the past few months I have had several inquiries as to how I made my drop down menus so I thought I would try and put together a short how-to on what it took to get this to happen, and here it is.

All of the functionality you see here and that I use on my website comes from the great folk at javascript-array.com. They have several short but brilliant javascript tip and tricks.

Before you dive in download the exercise files – that way you can follow along. These files also contain all the CSS and JavaScript updates you will need to make.

One note to all you MAC users out there. I have used a MAC but I don't own one. While owning a MAC would be really nice I have way to much $$$ invested in Windows based software and to switch would be more than I can afford. I used my Windows XP system to develop this how-to so if anything is unclear, please leave a comment – this way we will be helping the other MAC'sters out there!

Part one - Objectives and Recommendations

Part two - Overview & HTML updates

Part three - Styles and Javascript updates

Next steps

Some of you may have noticed that under the gallery and blog menu options the drop downs seem to come directly from content found inside my galleries and my blog – and you're right. Generating the drop down menus under these two top level menu options is done "on-the-fly". If I add a new gallery it will automatically appear at the top of the list; if I add another top-level blog category it will automatically be added to the drop down list.

This is done using server side PHP scripts and will be the topic of my next how-to – dynamic drop down menus.


3 responses to “fixed dropdown menus

  1. Hi there! Thanks for your excellent tutorial. But I’m trying to implement this tutorial on my TTG horizon website, but not working. What am I doing wrong?

    • I don’t use TTG Horizon but I can’t imagine it would be to hard to port this.

      Is your web site live where I can look at it? if so where?

      ;-j

  2. UPDATE!

    Matthew Campagna from The Turning Gate suggested I add two addition properties to the #menu style and add a #gallery style with two properties. The css-updates.html file in the exercise files has been updated and the updates noted with comments.

    Thanks Matt.

Leave a Comment

Your email address will not be published. Required fields are marked *


Get Email Updates

Support

It takes money to run a website. If we have been of assistance to you, if you have found useful information on our website, or if you have enjoyed using the free Photoshop Creative Commons plugin, please consider helping to defray our costs by making a secure PayPal donation. We do not receive any of your personal information or financial data.

Disclosure

john bishop images receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, john bishop images carefully chooses affiliates based upon the quality of services and products these entities provide to our users. They must provide significant value-add. john bishop images is independently owned and the opinions expressed here are our own.