Drop-Down Fly-Out Navigation on my site

I’ve been dissatisfied with the navigation methods here on my site for a long time – I was very frustrated by the long, unwieldy category list from the sidebar – I’ve always organized by category, but the display of that navigation sucked, because it was hard to tell that there were categories and sub-categories, and the list was way long. The sidebar looked cluttered, and in general I didn’t feel like writing because I hated the way my site looked.

I knew the solution was to approach it differently; I needed a drop-down, fly-out menu bar along the top of the site. But I was afraid to tackle the task because tangling with the lack of support materials for Movable Type has been problematic in the past. (see the related categories at the bottom of this post.)
But I spent a bit of time with this post: “Creating Drop-Down Navigation with Movable Type” and worked it out. I knew I didn’t want to use the MooTools solution he offered, so I adapted his work and integrated it with this “Simple jQuery Dropdowns” solution, because I knew I want to use jQuery for some other rich behaviors on the site in the future.

Now the categories make more sense because you can see sub-topics and sub-sub topics. And it’s all neatly folded up along the top of the site. I had some testing problems in IE7 – dunno if I cleared them up completely yet or not. I may need to do some fixing there still.

Because it’s cleaner and neater, I didn’t mind adding some categories that I needed; stuff I’ve been writing/posting links about like feminist issues and photography, and yes, your favorite and mine — knitting. I still need to step back through old blog posts and move them to the appropriate categories, but going forward, things will land in their own spots.

And the change in categories helps me re-think and get excited about things that I used to write about that have fallen by the wayside.

The removal of that long category list down the side means I had a lot more room in the sidebar and you can see items there much better. Many of the pages aren’t as long now, and all of them can breathe more. I rearranged my ads a bit because those help pay for the site.

So I’m feeling fresh and clean and exciting, like a feminine hygiene ad. I may go walk on the beach. While knitting. And then I’ll tell you all about it.

This Post Has 2 Comments

  1. Stephanie

    And in my feedreader, right below your feminine hygiene ad paragraph was an ad for a phone with the tagline “It’s super thin.” Um, is it a phone or a maxi pad?!

  2. Wil

    I have IE7 and am having trouble navigating with the drop menus. Basically they disappear as I move my mouse. Also, the background is transparent, so it’s difficult to read. Wil

Leave a Reply to Wil Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.