Glossy Accordion menu and page redraw

[Olimak2]

1) Script Title: Glossy Accordion menu

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

3) Describe problem: A question actually. I wish to use the menu so that when I click on a lowest level element, I redraw the page with some new material (specific to the element I clicked on), but I also wish to show the menu again in the same configuration as when I clicked on that element. Is this possible?

[ddadmin]

By redraw, do you mean have the page reloaded, or simply update the page with new content (without reloading it)?

[Olimak2]

I am intending to use it in a site made with Yola Pro, and it would seem simplest (when I click on the link) to redraw the page completely, as long as the menu structure would persist across the redraw. If I could get Yola to simply add content to the page, without a redraw, that would be my preferred, but I don't yet know if I can do it.

Thanks.

[ddadmin]

Well I can only speak of how to reload the page when an item within the menu is clicked while retaining the menu state, as I don't know the other details with Yola Pro and what additional data you want shown.

In general to get the page to refresh when a sub menu item is clicked on, you might add a JavaScript function like the following inside those item's parent container like so:

<script type="text/javascript">

function refreshpage(e){
	var evt=e || window.event
	if (typeof evt.target=="undefined")
		evt.target=evt.srcElement
	alert(evt.target)
	if (evt.preventDefault)
		evt.preventDefault() //cancel default loading of link
	else
		return false  //cancel default loading of link
}

</script>

<div class="glossymenu">
<a class="menuitem" href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">CSS Examples</a>
<div class="submenu">
	<ul onClick="return refreshpage(event)">
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
	</ul>
</div>
<a class="menuitem" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a>
<a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a>
<div class="submenu">
	<ul>
	<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
	<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
	<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
	<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
	<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
	<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
	</ul>
	<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
</div>
<a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a>		
</div>

Here the function merely causes the browser to alert the URL of the clicked link while disabling the loading of the link. The idea should be there though, which is to do something specific based on the link that's clicked on, then reload the page by calling:

window.location.reload()

As far as getting the Accordion menu to retain its state when the page reloads, as long as you have persistence enabled inside your initialization code, it should do that already:

<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", "clickgo", 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"
})

</script>