Add submenu animation to default css menu
Posted: Thu Oct 06, 2011 1:47 pm
I don't know if anyone has done this before, but I really like the functionality and depth of the horizontal css menu that comes with cmsms. I recently added some jquery effects to modernize it slightly. This will add subtle animation to the submenus, causing them to expand, rather than just appear, on hover. Here are the steps:
1) Install the JQuery Tools module.
2) Add the following to your Global Metadata (found under Site Admin):
That's it!
I only have this on my development server, and have not done any cross-browser testing, but it works great on Firefox 7.0.1. I will try to publish an example someday. My apologies if this has been done before, possibly better, by someone else, but I've been working with cmsms for a long time, and haven't had the opportunity to contribute very much. Wanting to give something back to a great community.
Thanks to script by “Kriesi” Budschedl at http://www.kriesi.at/archives/create-a- ... via-jquery for the basic jQuery script, and CalGuy and Nuno's great JQuery Tools module.
1) Install the JQuery Tools module.
2) Add the following to your Global Metadata (found under Site Admin):
Code: Select all
{JQueryTools action=incjs}
{JQueryTools action=ready}
{literal}
<__script__ type='text/javascript'>
function mainmenu(){
$(" #primary-nav ul ").css({display: "none"}); // Opera Fix
$(" #primary-nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</__script>
{/literal}I only have this on my development server, and have not done any cross-browser testing, but it works great on Firefox 7.0.1. I will try to publish an example someday. My apologies if this has been done before, possibly better, by someone else, but I've been working with cmsms for a long time, and haven't had the opportunity to contribute very much. Wanting to give something back to a great community.
Thanks to script by “Kriesi” Budschedl at http://www.kriesi.at/archives/create-a- ... via-jquery for the basic jQuery script, and CalGuy and Nuno's great JQuery Tools module.