Log in

View Full Version : Accordion Menu script (v1.3)


aoa015
06-02-2008, 06:18 PM
1) Script Title:Glossy Accordion Menu 1.3(highlight submenus)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

3) Describe problem:

Hi I have managed to integrate the above script (Glossy Accordion Menu), the blue color menu, on my website.

The problem is or what I am trying to do is highlight the menu or the submenu lists to mark where the person is, or which page they are in. At present it only highlights when the mouse is over any of the list, and disappears when mouseout of list.

I want the list item to be highlighted depending which page they are in, so one can easily tell which link they have clicked on because the list item will be highlighted with a background color.

I really need help on this feature on my menu. Any help will be highly appreciated.

Thank you
ddadmin
06-02-2008, 10:02 PM
If you mean have the menu item corresponding to the current page be selected, this really doesn't have anything to do with the script per say. What you're basically asking is how to apply some CSS class (ie: ".selected") to the link within the content DIVs that match up with the current page's URL. There is no mechanism within the script to do this matching, no. How it's usually done is via server side means, by dynamically adding ".selected" inside the HTML of the link that matches the current page's URL. There isn't a reliable way to do the match up using JavaScript, since many variations of a URL can in fact all mean the same URL, like:


http://www.dynamicdrive.com
http://www.dynamicdrive.com/index.html
http://www.dynamicdrive.com?page=index
aoa015
06-03-2008, 09:44 AM
Thank you for the advice.

I have managed to fix the problem with "document.getElementById('').className='';
===============
<head>

<style>
A.OnMenu{
display:block;

line-height:20px;
text-decoration:none;
color:#FFFFFF;
background-color:#B0A28D;
font-size: 11px;
padding-left:5px;

}

</style>

<script type="text/javascript">
var docloc=""+document.location;
if(docloc.indexOf("filename.jsp")>-1) {
document.getElementById('b28M').className='OnMenu';
//document.getElementById('').innerHTML=(obj.alt=='*'?'':obj.alt);

}else {
document.write("test");
}
</script>



<body>
<ul>
<li><a id="b2AOA" href="filename.jsp">About a</a></li>
<li><a id="b28M" href="filename.jsp">8 months - 2 years</a></li>
<li><a id="b23M" href="filename.jsp">3-5 years</a></li>
<li><a id="b26M" href="filename.jsp">6-8 years</a></li>
<li><a id="b29M" href="filename.jsp">9-13 years</a></li>
</ul>
</body>