Glossy Accordion Menu

[adam2308]

1) Script Title: Glossy Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-glossy.htm

3) Describe problem: I have created a new page on my website (not yet visible through the website) as a test page for the above script - http://littlewigan.pwp.blueyonder.co...rdion_menu.htm. My problem is that when i click on a header with a submenu underneath it doesn't open the link attached to that header.

For example if you click on 'apartments' it opens up the sub-menu but it doesn't go to the page hyperlinked to 'apartments'

Regards,
Adam.

[jscheuer1]

That's how it's supposed to work.

[adam2308]

oh right... maybe i've understood this script wrong, i was hoping to use it as a neater left hand nav system than the one i currently use.

I was wanting it to work like this for example http://www.totesport.com

Also i was hoping this would solve my issue with when people translate my site into another language the left hand nav woulod translate too.

If this script is no use for what i am after, is there another more suited for my needs?

[jscheuer1]

That would mean that you would have to have persistence on and that the menu would have to be on all pages. Once you have that, edit the script here:

$('.'+config["headerclass"]).bind(config.revealtype, function(){
			if (config.revealtype=="mouseenter"){
				clearTimeout(config.revealdelay)
				var headerindex=parseInt($(this).attr("headerindex"))
				config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
			}
			else{
				$(this).trigger("evt_accordion")
				return false //cancel default click behavior
			}
		})

Change it to:

return true //cancel default click behavior

Let me know how that works out. I haven't tested it.

[adam2308]

I've put the menu on each of the pages in the site and change the script as you mentioned.

This has fixed my original problem, for example clicking on 'Apartments' opens the page hyperlinked to that text and also opens the submenu of different apartments below in the menu.

However, there still seems to be some issues:

* If you click home from the home page (not likely, i know), you get a 404 error.
* Photo Gallery page doesn't have '+' or '-' symbols against headers with sub-menus
* Clicking a header with no submenu (for example 'home') from contact us page leaves the contact us sub-menu open.

Have a play around going from page to page using the left hand nav, you may find more issues.

http://www.bulgaria2rent.com

Cheers.

[jscheuer1]

There is no:

http://www.littlewigan.pwp.blueyonder.co.uk/index.htm

from your source code:

<a class="menuitem" href="index.htm">Home</a>

That should be:

<a class="menuitem" href="index.html">Home</a>

However, since that appears to be hard coded and you don't want the page to change when the user is already on the index, it could be:

<a class="menuitem" href="javascript:void(0);">Home</a>

on index.html. Perhaps even:

<a class="menuitem">Home</a>

But that will cancel hover effects (if any) for that item in some browsers.

The problem on the photo gallery page is at least (there could be other issues) a conflict between jQuery and prototype. See:

http://www.dynamicdrive.com/forums/s...78&postcount=2

to resolve that.

With persistence on, you are going to get the expanded sections carried back to pages that have no expansion of their own. To change that, this may work - On those pages with no expansion of their own, just after the config, set the cookie to empty, ex:

<script type="text/javascript">


ddaccordion.init({
	headerclass: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})
ddaccordion.setCookie(config.headerclass, '')
</script>

Alternatively, instead of doing that, you could turn persistence off, and use the:

defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content

property on each page to set its expanded state when it loads.

[adam2308]

I'm sorry John. What do you mean by persistence?

[jscheuer1]

The:

persiststate: true, //persist state of opened contents within browser session?

property. To turn it off, set it to false - then you can use the:

defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content

property to set the expanded menu (if any) for each page. This would be better than relying upon the cookie (persiststate: true), as some browsers will not allow the cookie, others may not react to it as expected.

[adam2308]

thanks john. i've done that too the pages with no sub-menus and they are working fine. I am still having trouble with the pages with sub-menus, the results seem to be very temperamental.

[jscheuer1]

Turn persistence off on all pages. Use the defaultexpanded property on each page to indicate which item (if any) should be expanded on that page.