How to create a menu marker like the one at theboutons.com ?

**440bx** · 14 April 2010, 04:17 PM

Hello,

In my efforts to learn Xara Xtreme Pro I came across Gary Bouton's website theboutons.com. There I saw the neatest menu marker/slider/selector I've seen.

I was wondering if the little slider above the menu buttons was done in Xara or using something else. If it was done in Xara, I sure would love to see a tutorial or anything that would give me some idea on how to do it.

If anyone can help me figure out how it was done, I'd be most grateful.

John.

**Dr_Who** · 14 April 2010, 09:36 PM

Looks like flash to me ... very cool...I WANT ONE

**handrawn** · 14 April 2010, 09:55 PM

Gary's a member here: Gare

If one of you with PM's active asks him, he may tell you

worth looking at his book forum too [and the book of course], but this request would be off topic there no doubt

http://www.talkgraphics.com/forumdisplay.php?f=65

**bcire68** · 15 April 2010, 08:05 AM

This can easily be done in Xara Xtreme Pro. I did this in XWD6 but the method is more or less the same. Take a look at my example.

Eric

**ChrisBro** · 15 April 2010, 08:27 AM

I can see what you have tried to do Bcire and it is a goo attempt but it is not the same as Gary's not as "fluid" movement wise, Im inclined to think that Gary's is maybe flash I sure he will chime in soon enough and tell us

Chris

PS

I agree it is a very cooollll effect.

**covoxer** · 15 April 2010, 08:31 AM

No it's not a flash. It's JS.

**bcire68** · 15 April 2010, 08:51 AM

Chris,

I don't understand what you mean by 'fluid movement wise'.

As far as I can tell (on my computer at least) the menu bars function exactly the same. Namely, you mouseover a button, and the mouseover effect is shown. This takes the exact same amount of time to show up on Gary's website as mine. In all fairness though this may be a limitation of the antiquated browser that I am forced to use at work (IE6). I will view gary's site again from an updated browser when I get off work to see if there is any difference.

Eric

Ah...I see what you are talking about. That menu doesn't even show in IE6. I was replicating the one at the bottom of the page. I was able to use someone else's PC with FF to view the website and now I see the menu at the top of the page.

**slavelle** · 16 April 2010, 12:32 AM

It's not Flash. It's javascript. the site is based on Joomla 1.5, using the theme called "Hyperion" from Rocket Themes. The menu uses rokmenuslide.js

I didn't see anywhere on their site where it is available seperately, which means that you would need to be a member of their template club to get it. I'm sure there are more dishonest ways to get it...but it looks like it might be based on mootools or some variation, so if you looked around enough, you could probably find something similar in either that or the jquery library.

I waste a lot of time looking for this stuff!

**440bx** · 20 April 2010, 07:17 AM

@bcire68 - thanks for the example.

As others pointed out, it isn't quite the same as what Gary has on his website but, for a newbie like me, it is still very useful.

Also, Gary sent me a public domain version of that nifty feature which I will be glad to share with anyone that is interested. It is done in Javascript and needs a little work to make it as nice looking as Gary's version.

John.

**440bx** · 20 April 2010, 07:37 AM

I figured, why wait till someone asks for it, here is the link to the page that contains the archive to the menu that uses the same technique as the menu in theboutons.com

http://www.consideropen.com/blog/200...animated-menu/

Credit should be given to Gary. He gave me the link.

Just in case the link stops working in the future, I've attached the zip file you will find at the above link.

If someone takes it upon themselves to enhance it to look more like the slider found at the boutons.com, I'd love to get those enhancements (I know next to nothing of Javascript, otherwise I'd make the enhancements myself - thanks)

John.