Need help with Collapsible/Expandable Menus

[jjfletch]

The script below allows me to create expandable/collapsible menus. What I'm trying to figure out, and have been brutally unsuccessful thus far, is how to expand the menus upon an initial visit.

For example, on the home page, I have a link to "Colors" and a link to "Groceries". When a user clicks on "Colors, they are taken to a page with the collapsible menus:

Colors
Groceries​

If they were to click on Colors, the menu would expand and the user would see:

Colors
- Red
- Blue
- Yellow

Groceries​

What I want is for the user to see the expanded version upon initial visit.

I should also mention that the site is primarily written in php, and the url is already passing variables to my php script. So, the url that includes the collapsible menus is, for example,

http://abc.someurl.com/index.php?colors=red&groceries=milk

Can someone please tell me how to grab the "red" out of the URL, and then write an if/else statement for it?

<!-- BEGIN COLLAPSIBLE MENUS -->
 
<script language="JavaScript">
<!--
function SymError()
{
  return true;
}
 
window.onerror = SymError;
var SymRealWinOpen = window.open;
 
function SymWinOpen(url, name, attributes)
{
  return (new Object());
}
 
window.open = SymWinOpen;
 
//-->
</script>
 
<script type="text/javascript">
 
// Node Functions
 
if(!window.Node){
        var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
 
function checkNode(node, filter){
        return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == 
filter.toUpperCase());
}
function getChildren(node, filter){
        var result = new Array();
        var children = node.childNodes;
        for(var i = 0; i < children.length; i++){
                if(checkNode(children[i], filter)) result[result.length] = children[i];
        }
        return result;
}
function getChildrenByElement(node){
        return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
        var child;
        var children = node.childNodes;
        for(var i = 0; i < children.length; i++){
                child = children[i];
                if(checkNode(child, filter)) return child;
        }
        return null;
}
function getFirstChildByText(node){
        return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
        for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
                if(checkNode(sibling, filter)) return sibling;
        }
        return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}
 
 
// Menu Functions & Properties
 
var activeMenu = null;
 
function showMenu(){
        if(activeMenu){
                activeMenu.className = "";
                getNextSiblingByElement(activeMenu).style.display = "none";
        }
        if(this == activeMenu){
                activeMenu = null;
        }else{
                this.className = "active";
                getNextSiblingByElement(this).style.display = "block";
                activeMenu = this;
        }
        return false;
}
function initMenu(){
        var menus, menu, text, a, i;
        menus = getChildrenByElement(document.getElementById("menu"));
        for(i = 0; i < menus.length; i++){
                menu = menus[i];
                text = getFirstChildByText(menu);
                a = document.createElement("a");
                menu.replaceChild(a, text);
                a.appendChild(text);
                a.href = "#";
                a.onclick = showMenu;
                a.onfocus = function(){this.blur()};
        }
}
 
 
if(document.createElement) window.onload = initMenu;
 
</script>  
 
<!-- END COLLAPSIBLE MENUS -->

 

[BillyRayPreachersSon]

If your site is written in PHP, you should do this server-side in PHP, rather than client-side in JavaScript.

That way, people with JavaScript disabled will still be able to get the benefit of menu highlighting (assuming your whole menu isn't written out using JS, of course).

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jjfletch]

I've gotten further. How can I show that a menu is an activeMenu without having clicked on it? Please see "THIS IS WHERE I'M STUCK" in the code below:

var curURL = window.location.href;
var key = new Array();
for (var i=0;i<curURL.replace(/^.+\?/,'').split('&').length;i++) {    
        key[curURL.replace(/^.+\?/,'').split('&')[i].split('=')[0]] = curURL.replace(/^.+\?/,'').split('&')[i].split('=')[1];}

alert(key['groceries']);
alert(key['colors']); 

switch (key['groceries']) {    
case 'milk':        
[COLOR=DarkOrange]// THIS IS WHERE I'M STUCK[/COLOR] 
break;    case 'bread':        
// do stuff        
break;   
case 'cheese':        
// do stuff        
break;    
default: break;
}

 

[BillyRayPreachersSon]

Then you don't agree that doing this server-side would be best for your users?



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]