12.17.2004 - Focus Slide Menu
Long time no update...I'd like to say that it's because I've been hard at work doing something cool, but the sad truth is that I fell victim to the addictive drug that is World of Warcraft and I've been playing it in every moment of spare time I can find. I even have Kate addicted to it.
Honestly though, I've not had this much fun in an MMORPG since EQ first came out, and I smoked that crack pipe for four long years.
That said, I'm not posting to just inform you of how completely awesome WoW is - I actually have an experiment to post.
I was lurking in a dev forum who's location escapes me and reading a thread about an idea for a menu that would have a "lens" that would slide over the currently active menu item. Seemed like an interesting idea to me, so I tossed something together.
The Focus Slide Menu is a horizontal unordered list - when an LI is moused over, a DIV element that is created via script slides over it and...yeah, ok - not that exciting, but then what do you want from me? I've been hunting Murlocs all day.
* No one wants to serve dynamic js files just to set the current nav item, do they? :confused:
This wasn't meant as a criticism, just some possible improvements to make the script more robust and reusable.
p.s: your link to the css file is 404; you've set the href as focus_slide.csS
Slay some pixel gremlins for me :)
Posted by Andrew K. on December 18, 2004 @ 1:18 am
The SLIDE_STEP var is more of a speed setting, and I left it hard coded as a means to tweak the script for personal preference. The higher the number, the faster the slider moves, etc.
There is no SLIDER_DISTANCE var, so I'll assume you mean SLIDER_WIDTH - and you're right, I could calculate that based on its offsetWidth.
As for the active id, I don't think that would be an issue since the script only takes action on LI's it finds within the UL with an id of "mContainer" so no other LI's in the document will be affected by it. So, you could add more, or remove some and the script would still go about its business without any modifications.
Does that answer your questions or did I miss them completely? (link fixed, btw - thanks!)
Posted by Steve on December 18, 2004 @ 10:56 am
"There is no SLIDER_DISTANCE" -- oops! Glad you worked out what I really meant.
I think you may have misunderstood my point regarding the active li. I'm assuming that var is used to set which li the box is over upon load? If so, it would fit more easily with common "CSS menu" practice to have the script iterate through the li array (children of mContainer) and if one of those has an id of "current", "active" or whatever, it sets that array item as 'activeLI'. That way, the menu could still function like any other CSS list menu without javascript by indicating the current page through a style difference associated with '#mContainer li#active {...}'.
Another improvement I thought of is to make a wrapper function that triggers recalculation of the width. This could then be attached to any of the popular 'text size style switchers' so that the menu would still look good with larger text. If there was an onTextResize event to attach the calculation function to, that would be even better. Somehow I doubt it though, or it would have been used for sIFR.
I've got a crazy idea for this script (hint: client side XML/XSL + this + image cross fade); but there's no way I have time to tinker until the new year. Damn.
I'll keep you informed though :)
Posted by Andrew K. on December 18, 2004 @ 8:14 pm
Posted by Steve on December 20, 2004 @ 10:32 am
Posted by Paul on January 8, 2005 @ 8:55 am
Posted by Steve on January 8, 2005 @ 12:08 pm
Posted by Jason Borgmann on January 19, 2005 @ 9:41 am
You might also want to take a look at Pauls implementation here:
http://www.dmxcomputers.co.uk/
Posted by Steve on January 19, 2005 @ 10:42 am
Posted by ethan on September 12, 2006 @ 4:04 pm
Comments have been closed for this post.