VegUISiteKit - Implementing the pulsating menu

Argh, will never get over this name, but it's too late and i decided to stick with it. The pulsating menu is a navigation menu for your website that consists of multiple icons that grow when the mouse pointer hovers over them and can be clicked to navigate through the site.

When developing the VSK libraries i try to stick to a simplistic design as i want the vsk stuff to be very easy to implement - so hopefully this should be a fairly short tutorial.

Make sure you include the pulsating menu library in your webpage and all the other required VSK libraries. You can find out which vsk libraries the pulsating menu is dependent on by checking the online documentation or the library's page.

If you dont know how include the vsk libraries make sure you read this tutorial before proceeding.

Alright let's look at the icons first. As i said each icon will represent a menu node or menu point if you will. You will need two versions for each icon - which btw could be a jpeg, gif or any browser supported graphic file. The first version is a small version of the icon, this is the image that is displayed when the icon is in the shrunk (normal) state.

The second version of the icon should be a higher res version that will be displayed when the icon is fully grown - ie when the mouse has hovered above it long enough. The way it works is that as soon as the mouse enters the icon it starts to grow and as soon as it has grown to it's full size the low res image is replaced by the high res image.

The sizes of the icons themselves are up to you, whatever fits your webpage. In our example the small icons will be 16x16 pixels and the grown icons will be 32x32 pixels.

So now that this is out of the way lets get started by building the HTML part of the menu.


Alright, what do we have here. A table. One column for each icon and one image element for each icon. Note that the script will see any image element in the table as a potential menu node so only use them for that.

The a element will make sure clicking the icon will cause the browser to navigate to a new page. You might want to set the border css attribute of the image elements to none though as most browsers will display a border around the icons if you dont.

There is something you need to know about the name of the icon files. The filename for the shrunk state should always end with the number 1 (as in blog1.jpg for example) and the filename for the grown state should always end with the number 2 (as in blog2.jpg for example).

We are almost done, all we need to do now is to initialize the menu


Argument one and two are the width and height of the shrunk icon, arguments 3 and 4 are the width and height of the grown icon and the last argument is the node id of your menu element.

That's it basically, it doesnt get much simpler than that for such a cool effect :)

Related Posts

• No related posts

---

Your Comment

name:*
email-address:
Are you human?

Comments to this post: (3)

RSS Feed for comments

---

Jon Williams
on 17 Feb, 2008 - 22:02:47

Hello,

thanks for a great & free product you have released here - I'm using it in my new website design, and very much appreciate your work.

just thought I'd let you know that I think theres a little mistake on your page:

'VegUISiteKit - Implementing the pulsating menu'

at the bottom of the page:

code: js

pmnu_init(16,16,32,,32,'menu');

- one too many commas after the 1st 32

I'm a bit new to javascript & webdesign, so I followed your instructions, and cut&paste the above code into my doc, but could'nt figure out why it was'nt working.
eventually I spotted the extra comma, but was beginning to think the script might be at fault as I couldnt find where I'd gone wrong (& after succesfully getting your drop down menu working too) of course, once i removed it, the menu worked great

thought you might like to know this, as others may cut&paste that code as I did, and may assume your script does'nt work, give up, and go elsewhere for a new script - bad feedback, etc

thanks again,

JW

Report this comment

---

vegu
on 17 Feb, 2008 - 22:55:55

Hi jon,

Thanks for pointing this error out, i have corrected it :)

Report this comment

---

Jon Williams
on 17 Feb, 2008 - 23:30:41

no problem, you can delete my comment if you like, i would have sent a private email, if I had found out how to.

cheers,

Jon

Report this comment

---

---