It’s inevitable that you start working on something, get almost done with it, then realize it isn’t going to work as well as you originally thought.  It’s happened quite a bit with SMS and we’ve always turned around to figure something else out that works better than the original idea (menus out of the database is a great example).  Well, you can now add Neptune (aka the SMS Toolbar) to that list.  I’d shared a few screenshots on the forums about the shape Neptune had taken for SMS 2.6.  The people I talked to seemed to like what they saw.  Awesome!

Over the course of a few days though, I started thinking about putting the new menu structure into place in the Cobalt series which is one of the many steps that has to happen as we move toward the testing phase.  I put the first pieces into place, and well, it was ugly, but I expected that  because of the way things were built (necessary because of the plugin I was using).  I started messing around with things and found myself screwing around with little things more and more, to the point that I gave up.  A few days later, I was thinking about it and realized a couple of things.  First, it’s way too hard for a basic HTML/CSS person to do and do well.  The forums would be flooded with questions about doing this, that or the other thing.  Strike one.  Second, it was very limited in that it would only be able to be placed on the left side of a page, otherwise, there was some major (and pretty advanced) CSS needed to make it behave correctly.  Strike number two.  Finally, there was an issue where the entire process wasn’t entirely intuitive.  Strike three and you’re out.

That left me in the unenviable position of having to rethink the strategy behind this feature.  Believe me, it’s not a position I enjoying being in.  So where to from there?  I stirred over the idea for a few days and didn’t come up with anything until I was poking around my Facebook account and noticed a little flyout menu at the top.  That immediately drew me back to a conversation that’d happened on the forums a couple weeks ago where someone suggested a drop down menu.  The problem with the web is that terms can easily get lost.  Someone suggested drop down menus, but in terms of web development, drop downs are usually the HTML select elements.  The idea of using something like that right in the main navigation left a sour taste in my mouth right away, but seeing the flyout on Facebook got the wheels turning.

It took a lot of searching, but it turns out there’s a jQuery plugin that does exactly what I was looking to do.  I plugged everything in and it got ugly really fast as there were a lot of problems with overlapping styles.  But after wading through code and stylesheets for a few days, I finally managed to get something working that was exactly what I wanted.  A small arrow to the right of the menu signals a submenu, and after clicking on it (clicking was very important … I hate accidentally mousing over something and having a menu flyout), the submenu appears.  On top of that, it allowed me to increase the number of link options from 6 to 10.  Plus, it’s less obtrusive than the previous iteration.  Finally, it’ll be far easier to tweak this menu for different skins (if someone so chose to do that).

For anyone interested, the new jQuery plugin being used is called clickMenu.  Below is two images of the new iteration of Neptune as it stands in the default skin.  Haven’t gotten around to tossing this into the Cobalt series yet, and it’ll probably be a few weeks, but this is the start of things.