First ModX Site and in need of help!

Having seen other ModX sites I was impressed and decided to have a go to create my own site. Everything has gone ok, except for a problem with the menu which is driving me nuts! If you can help me out, please drop me a line and save me from going crazy!

The site can be viewed here: http://www.gall-thomson.co.uk/web/

As you can see the top menu all hovers and functions ok, but I want the selected/active tab to remain in the hover colour, so it’s obvious you are looking at that page. And then when you click on (for example) Marine Breakaway Couplings, that has sibling pages, they appear in the second level menu below. However, when you click on them, they disappear, and I want them to remain where they are and also be selected in colour. I hope this makes sense and you can help.

Thank you, Jamie

Here is my current wayfinder script in the template:
<div id="menu">
[[Wayfinder? &startId=`0` &level=`1`]]
</div>

<div id="content">
<div id="menu2">
[[Wayfinder? &startId=`[*id*]` &level=`2`]]
</div>

And here is the CSS colour script:

#menu
{ background: #83BF93;
color: #339966;
}

#menu li a
{ background: #83BF93;
color: #FFFFFF;
border-color: #339966;
}

#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ background: #339966;
color: #FFFFFF;
}


#menu2
{ background: #339966;
color: #339966;
}

#menu2 li a
{ background: #339966;
color: #FFFFFF;
border-color: #339966;
}

#menu2 li a:hover, #menu li a#selected, #menu li a#selected:hover
{ background: #1798E9;
color: #FFFFFF;
}


And finally the CSS style template:
/* navigation menu */
#menu
{ height: 30px;
width: 786px;
margin-top: -30px;
position: relative;
}

#menu ul{margin: 0px auto;}

#menu li
{ float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
}

#menu li a
{ display: block;
float: left;
height: 22px;
text-decoration: none;
padding: 6px 12px 2px 12px;
}

/* navigation menu2 */
#menu2
{ height: 30px;
width: 786px;
margin-top: 0px;
position: relative;
}

#menu2 ul{margin: 0px auto;
}

#menu2 li
{ float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
}

#menu2 li a
{ display: block;
float: left;
height: 22px;
text-decoration: none;
padding: 6px 19px 2px 19px;
}

Quote from: jamiemcdine at Jun 30, 2010, 07:25 AM

but I want the selected/active tab to remain in the hover colour,

You should explore your page by "view source code" or "inspect element" (in FF ou Chrome)
You should see the <li> for the "selected/active tab" has a class "active", so, in your css file you can try something like...



And you should see that the <div id="menu2> is empty on the page "petal Valve Type" for example, so it could mean there’s a problem with the params you give to Wayfinder...

Hope this helps you

Click on a link, and then view the code. You’ll see that the "active" class is on the one you clicked. Just style that with CSS, and use any color you want.

As to the disappearing links, this is a constant problem with certain menu scenarios. What I do is to use a different template for the items that are in a folder. Off the top of my head, you may want to just duplicate the current template, but use *parent* instead of *id* as the start. That’s the general idea, anyway. There are other ways to do this, too, but I find this way pretty easy.

Cheers

thanks for your help... although I tried both suggestions and neither has worked. Am running on a Mac using Firefox to browse and dreamweaver to edit the css. hope that shouldn’t make a difference. Find it odd that the css doesn’t work in particular.

I’ve got the colour selection working in the css now - it required this coding:
#menu li.active a
{ background: #339966;
color: #FFFFFF;
border-color: #339966;
}

So now, if someone can help me with how to get my second level menu to remain in place when selected (only functions on the pages ’camlock couplings’ or ’marine breakaway couplings’) as I have no idea how to alter the Wayfinder code, and the previous suggestion didn’t work. Thanks for looking and helping!