Expand menu on click

Discuss the development and implementation of Joomla! modules here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
sungkhum
Joomla! Intern
Joomla! Intern
Posts: 63
Joined: Wed May 24, 2006 1:51 pm

Expand menu on click

Post by sungkhum » Sat Jan 24, 2009 11:59 pm

Hello,

I've been having trouble getting a module that will use my current template menu css and expand the submenu on click without reloading the page (right now you click on it and it expands after reloading the page). Can anyone help me with this?

I am using the madeyourweb-ext-1024 template on Joomla 1.0.15

The javascript currently being used in the template allows for the hover:

Code: Select all

      sfHover = function() {
var sfEls = document.getElementById("topmenu").getElementsByTagName("li");
      	for (var i=0; i<sfEls.length; i++) {
      		sfEls[i].onmouseover=function() {
      			this.className+="sfhover";
      		}
      		sfEls[i].onmouseout=function() {
      			this.className=this.className.replace(new RegExp("sfhover\\b"), "");
      		}
      	}
      }
I also found some code that looks very alike, but uses a click to expand a menu - but I don't know javascript enough to be able to combine the two in Joomla.

Code: Select all

function menuFix() {
    var sfEls = document.getElementById("TopMenu").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onclick = function() {
            if(this.className.indexOf("sfhover") < 0)
            {
                //Expend this
                this.className+=(this.className.length>0? " ": "") + "sfhover";

                //Close Others
                var sfEls2 = document.getElementById("TopMenu").getElementsByTagName("li");
                for (var i=0; i<sfEls2.length; i++) {
                    if(sfEls2[i].className.indexOf("sfhover") >= 0 && sfEls2[i] != this)
                    {
                        sfEls2[i].className=sfEls2[i].className.replace(new RegExp("( ?|^)sfhover\\b"),"");
                    }
                }
            }
            else
            {
                this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
            }
        }
    }
}
window.onload=menuFix;
Any help would be much appreciated!

My site is: http://www.actioncambodia.org

Thanks!
-Nathan

Locked

Return to “Modules”