lapucca
asked on
My accordion menu isn't working
Hi, I'm trying to make my left vertical menu(http://www.labctsi.org/index.php/cct/community_advisory_committee/) , under committee, to be like the accordion menu here:
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
Attached is my code for this. However, I'm not sure where to put the left and down .png files for this to work?
The CSS file is copy from the site above. Below is one of the CSS code regardnig the image.
background: #eef4d3 url(left.png) center right no-repeat;
Nothing happens now when I position cursor over the "Center Advisory". I wonder if it's becuase it can't find the left and down .png files.
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
Attached is my code for this. However, I'm not sure where to put the left and down .png files for this to work?
The CSS file is copy from the site above. Below is one of the CSS code regardnig the image.
background: #eef4d3 url(left.png) center right no-repeat;
Nothing happens now when I position cursor over the "Center Advisory". I wonder if it's becuase it can't find the left and down .png files.
$(document).ready(function() {
$("ul.sf-menu").supersubs({
minWidth: 8, // minimum width of sub-menus in em units
maxWidth: 25, // maximum width of sub-menus in em units
extraWidth: 0 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish();
});
//slides the element with class "menu_body" when mouse is over the paragraph
$("#committeeMenu li.menu_head").mouseover(function()
{ $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
</script>
<div id="mainContent">
<div id="secondaryNavigationColumn">
<div id="navcontainer">
<h2>OCE Menu</h2>
<ul id="navlist">
<li><a href="http://www.labctsi.org/index.php/cct/">Home</a></li>
<li><a href="http://www.labctsi.org/community">Resources/Services</a></li>
<li><a href="http://www.labctsi.org/index.php/cct/all_news/">News</a></li>
<li><a href="http://www.labctsi.org/index.php/cct/all_events/">Events</a></li>
<li><a href="http://www.labctsi.org/index.php/cct/about_us/">About Us</a></li>
<h2>Committees</h2>
<div id="committeeMenu" class="menu_list">
<li class="menu_head">Center Advisory</li>
<div class="menu_body">
<li id="active"><a href="http://www.labctsi.org/index.php/cct/community_advisory_committee/">Advisory Committee</a></li>
</div>
<li><a href="http://www.labctsi.org/index.php/cct/community_health_providers/">Community Health Care Providers</a></li>
<li><a href="http://www.labctsi.org/index.php/cct/community_leadership_council/">Community Leadership Council</a></li>
</div>
</ul>
</div>
</div>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
oops, sorry, I guess what you listed in your reply are the modification you made. Thank you and I will try that now.
ASKER
oops, sorry, I guess what you listed in your reply are the modification you made. Thank you and I will try that now.
No worries lapucca,
Hope it works for you
Hope it works for you
ASKER
Hi remorina,
Thank you for the amazing and thorough help! I'm still not that experience with the web front end coding yet. However, with your help I got up running at a test page, http://www.labctsi.org/index.php/cct/index_Test
I have another question about this. It would be great if you can just have a look at this question, ID: 25595910
Thank you.
Thank you for the amazing and thorough help! I'm still not that experience with the web front end coding yet. However, with your help I got up running at a test page, http://www.labctsi.org/index.php/cct/index_Test
I have another question about this. It would be great if you can just have a look at this question, ID: 25595910
Thank you.
ASKER
Many thanks for your help. I have applied all required changes except the CSS changes so it's not not showing the accordion menu at the site. Since the site menu is created by someone else so i want to be very careful about making modifications to it. Can you let me know what changes you made to this CSS file? Thank you.