 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUISiteKit - Implementing the animated menu
written by vegu on 16 Mar, 2007 11:57:00
The animated menu library allows you to have collapse-able sections on your page. Many collapse-able sections in a row make a menu. A section is collapsed / expanded when the header element that is linked to the section is clicked by the user. The collapsing and expanding is handled with the morph effect of the VSK library.The animated menu works in a way that assumes that a navigation menu has multiple sections and each section has a header that helps the user understand what the links in the section deal with.
A VERY simple menu could look like this for example:
code: html<div>News</div>
<div>
<ul>
<li>What's new?</li>
<li>News archives</li>
<li>Post news</li>
</div>
<div>Community</div>
<div>
<ul>
<li>Messageboard</li>
<li>Guestbook</li>
<li>Wiki</li>
</ul>
</div>
You see there are two sections and a header for each sections. Now for the animated menu to work we need to give them unique node ids.
The id of a section is always the id of the corresponding header with a _c appended to it's end.
code: html<div id="menu_news">News</div>
<div id="menu_news_c">
<ul>
<li>What's new?</li>
<li>News archives</li>
<li>Post news</li>
</div>
<div id="menu_community">Community</div>
<div id="menu_community_c">
<ul>
<li>Messageboard</li>
<li>Guestbook</li>
<li>Wiki</li>
</ul>
</div>
Thats all there is to it on the HTML side. It does not matter if the section comes right after the header in the node structure, the ids will make sure that the script can find the section that should be linked to header.
Now in order to initialize the menu we call the vsk_smnu_init() function somewhere after the HTML creation of our menu. It needs to be after because the menu elements need to exist in the document. To be 100% you could tie it to the onload event of the body, but thats not required in the browsers that are supported officially by VSK.
code: jsvsk_smnu_init('menu_news', 'menu_community');
The arguments are the node ids of the section header elements.
Related Posts
- No related posts
Your Comment
Comments to this post: (6)
RSS Feed for commentsShannon
on 13 Feb, 2008 - 19:01:02
Hey, there! Love these scripts. Thanks so much.
Would it be possible to set menus as closed by default? If so, would there be a way for only one of them to be open at a time?
Report this comment
vegu
on 17 Feb, 2008 - 23:09:55
Hi shannon,
Sorry it took me a while to reply to your comment, thanks for giving one of my scripts a shot.
Right now there is no built-in way to make sure menu's start out closed or to force only one menu to be open at any given time.
Work around for problem A (star menus out closed):
Check if cookie is set for the menu (since the cookie remember whether the user set the menu to be open or closed), if it is not set then close the menu.
Example:
/* === is important here for it to work */
if(vsk_cookie_get('smnu_menu_news')===null) {
V('menu_news').vsk_smnu_collapse(1);
}
Work around for problem B (only one menu open on a given time):
When the header of a menu is clicked have it close all other menus.
Example:
<div id="menu_news" onclick="V('menu_community').vsk_smnu_collapse(1);">News</div> <div id="menu_community" onclick="V('menu_news').vsk_smnu_collapse(1);">Community</div>
Hope this helps, all examples are with the tutorial code of this blog entry in mind. I didnt test it, but it should point you in the right direction.
Good luck,
vegu
Report this comment
Jon Williams
on 05 Mar, 2008 - 23:41:21
Hello,
Is there any way of initialising the animated menu with the sections in the collapsed state when a page is loaded?
Thanks,
Jon
Report this comment
Jon Williams
on 06 Mar, 2008 - 00:00:58
Hello again,
just noticed this question has already been asked, sorry!
I'm guessing that:
/* === is important here for it to work */
if(vsk_cookie_get('smnu_menu_news')===null) {
V('menu_news').vsk_smnu_collapse(1);
}
should go in the html doc, just before initialising the menu, is that right?
Thanks again, & much appreciation of your great scripts!
JW
Report this comment
vegu
on 07 Mar, 2008 - 03:18:26
This should be put inside the html doc after the menu has been initialized :)
It's a work-around that closes all menus except for those that have been opened manually by the users, they dont actually start out closed ;)
Ill try to add it as a feature on the next patch i do for this script.
thanks for checking it out!
Report this comment
Jon Williams
on 28 Mar, 2008 - 23:01:12
Hello again!
One further question related to the above: is there any way of maintaining the menu state once the page has been navigated away from?
If I navigate away from a page - and then use 'back' on the browser, it reloads the page with any animated menus in their previous expanded/collapsed state. If, however, on I use the pages navigation to go back, all menus are collapsed (as I'm using the code: if(vsk_cookie_get('smnu_menu_news')===null) {
V('menu_news').vsk_smnu_collapse(1);
}
)
so - is there any way to have menus collapsed as default and to maintain their state once a page is navigated back to?
I've tried to work out a script myself, but have failed (I tried to use "vsk_cookie_set" on the page navigating back from)
Thanks for your help,
Jon W
Report this comment
