[Solved]Accordion Menu Active Class

463 Posts

Tyreal2012 Reply #1, 18 years ago

Hi Folks,

we had a site built byu a freelancer for us, and the client has come back with a request to add a highlight to the active page class.

now ive never done an accordion menu before, and i was wondering how this could be achieved.

the site is www.infocard.co.uk (theire development server the client provided)

the css is

#menu {
	padding: 35px 0 0 8px;
	border-left: 1px solid #cccccc;
}

#menu li{
	background:url(../images/menu-separator.gif) no-repeat 100% 100%;
	width: 131px;
	

}

#menu a{
	display: block;
	width: 125px;
	padding: 0 -0 0 12px;
	font:12px/24px "Arial", serif;
	color: #2A3B8F;
	line-height:20px;
}

#menu2 li a {
	font-size:10px;
	padding-top:-5px;
	
}

#menu2 li a{
display: block;
width: 125px;
padding: 3px 0px 5px 12px;
line-height:15px;
font-weight:bold;
}


#menu a:hover{background: url(../images/arrow.gif) no-repeat 0 6px;}

the wayfinder templates are
innerTpl


<ul[+wf.classes+] id="menu2">
	[+wf.wrapper+]
</ul>

OuterTpl

<ul id="menu"[+wf.classes+]>[+wf.wrapper+]</ul>

i appreciate any help that can be provided.

thanks

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 18 years ago

If you do a "view source" you’ll see that the active menu item and its parent has class="active" added to its <li> element. Just style the .active class to whatever you want in your CSS.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

2,314 Posts

anonymized-26931 Reply #3, 18 years ago

Hi there,

here’s the google translation of a mootools accordion
http://translate.google.de/translate?u=http%3A%2F%2Fwww.partout.info%2Fakkordeon-menu.html&hl=de&ie=UTF-8&sl=de&tl=en

best regards, j

463 Posts

Tyreal2012 Reply #4, 18 years ago

Thanks both,

Susan, i tried the li .active and that didnt work.

Sharkbait - thanks for the link but unfortunately it just goes completely over my head understanding wise.

thanks

Tyreal

230 Posts

MacConin Reply #5, 18 years ago

you can add something like

.active {background-color:#ff00ff; color: white }

to your .css

edit: typo corrected

CONIN Werbeagentur . Köln
http://www.conin.de

241 Posts

bob1000 Reply #6, 18 years ago

To style the active li element the correct syntax is li.active (No space) but maybe that was just a forum typo.

Determining the correct element to style depends on how you want the highlighted menu item to appear. Different text colour, different background colour, background image? Changing the colour of the li.active element will have no effect because it will be overwritten by the colour of the link inside the li.

How do you want the highlighting to appear?

463 Posts

Tyreal2012 Reply #7, 18 years ago

Nope wasnt a typo - might explain why it didnt work.

typically client decided not to go with the highlighting, but i will continue to try and get it to work on our test area

thank you everyone for your help.