PDA

View Full Version : Second level of nested accordion doesn't work



ConklinWeb
04-27-2009, 09:26 PM
1) Script Title: accordion menus (nested)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem: We're using the accordion menus nested 3-deep on our site at www.conklintest.com. The menu has 2 levels for About Conklin and Start a Business, and 3 levels for Shopping Cart and Product Info. On Firefox 3, the 2nd-level menus expand to show the third-level menus okay but when you click a link from the 3rd-level menu (for example, Shopping Cart, Crop Products, AgroVantage Overview), and go to a new page, the expanded menu does not persist into the new page.

We used the code for Bullet List Accordion Menu with nested levels EXACTLY as written on your site, word for word, and the latest version of ddaccordion.js. persiststate is "true" in your code. We named the lists and headers the exact same names you have them in your code.

The pages are assembled from a database by ColdFusion. The left menu is a separate object, with its own css stylesheet.




/* CSS Document */
/*Used by Conklin's publicMenu driven by ddaccordian.js and jquery-1.2.6.js*/

.arrowlistmenu{
width: 198px; font: bold 12px Arial;
/*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
color: white;
background: #002776 url(../images/icon/bg_blueGradient.gif) repeat-x bottom left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform:inherit;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
}

.statusicon { /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../images/icon/bg_blueGradient2.gif);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/
background:#D7EDC9; /* !important*/
margin-left:10px;
}

.arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/
background:#B8DEFA; /*!important*/
margin-left:10px;
margin-bottom:8px;
font-weight:bold;
}

.arrowlistmenu ul li a{
color:#003399; /**/
background: url(../images/icon/arrowRight_gray.gif) no-repeat center left; /*custom bullet list image*/ /*arrowbullet.png*/
display: block;
padding: 3px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
}

.arrowlistmenu ul li a:visited{
color:#3366FF;
}

.subexpandable{
background-color:#B5DF9C;
/*background: url(../images/icon/plus_gray.gif);*/ /*custom bullet list image*/
}
a.subexpandable {
display:block;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
background-color:#F3F3F3;
}



The 3rd-level subcategoryitems lists are separate files for each menu, listed as includes in the menu html:


<ul class="categoryitems">
<cfinclude template="cartAG.cfm">
<cfinclude template="cartAN.cfm">~

[CODE]

The 3rd-level Animal Products menu, with links that go to specific pages, looks like this:


<cfoutput><li><a href="##" class="subexpandable statusicon">Animal Products</a>
<ul class="subcategoryitems">
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&amp;cLine=03" shape="rect">Canine</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&amp;cLine=04" shape="rect">Equine</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&amp;cLine=02" shape="rect">Feline</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&amp;cLine=05" shape="rect">Food&nbsp;Producing Animals</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&amp;cLine=06" shape="rect">Other&nbsp;Animals</a></li>
</ul>
</li>
</cfoutput>



I've done quite a lot of messing around with the css for the menu, and if that's where the problem is I am completely at a loss as to what needs changing. I tested a page with no stylesheets and had the same problem with the lack of persistence. The person who set up the first menu has left the company and I don't have the programming chops to fix this. I would very much appreciate any help on this.

ddadmin
04-28-2009, 07:48 AM
The problem from I can tell is simply that your links inside the 2nd level menu are defined without the "www" prefix inside the URL. In JavaScript, example.com and www.example.com are treated as separate entities, so when you go from www.example.com/page1.htm to www.example.com/page2.htm for example, the persistence does not carry over as a result.

If your site is mainly accessed with the "www" prefix in front, then you should modify all links inside your menus so that they have the "www" prefix in front of them.

ConklinWeb
04-28-2009, 07:39 PM
The problem from I can tell is simply that your links inside the 2nd level menu are defined without the "www" prefix inside the URL. In JavaScript, example.com and www.example.com are treated as separate entities, so when you go from www.example.com/page1.htm to www.example.com/page2.htm for example, the persistence does not carry over as a result.

If your site is mainly accessed with the "www" prefix in front, then you should modify all links inside your menus so that they have the "www" prefix in front of them.

I tried using absolute file references with the www in the url but that hasn't solved the problem. Here's the Crop Products include from the Shopping Cart:




<cfoutput><li><a href="##" class="subexpandable statusicon">Crop Products XXX</a>
<ul class="subcategoryitems">
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=01" shape="rect">Seed&nbsp;Treatment</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=02" shape="rect">Starter&nbsp;Fertilizer</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=05" shape="rect">Foliar&nbsp;Fertilizers</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=03" shape="rect">Micro&nbsp;and&nbsp;Secondary Nutrients</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=04" shape="rect">Slow&nbsp;Release Fertilizer&nbsp;Additives</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=06" shape="rect">Adjuvants</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=07" shape="rect">Plant&nbsp;Growth Regulators</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=08" shape="rect">Forage&nbsp;and&nbsp;Silage Treatments</a></li>
<li><a href="http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&amp;cLine=09" shape="rect">Lawn&nbsp;and&nbsp;Garden</a></li>
</ul>
</li></cfoutput>

As you can see, the list item link in the categoryitems unordered list doesn't go to a url, it simply opens the ul.subcategoryitems menu. The first-level dropdown menu does not persist after one clicks a link to a page in that section either. Try clicking on the About Conklin header and then any link in that menu and you'll see that after the new page loads the entire menu collapses back to showing just the h3 menuheader links. This is the case on both Firefox and IE.

ddadmin
04-28-2009, 10:09 PM
On your page (http://www.conklintest.com/), I don't see the sub menu links under "Crop Products" changed to "www" actually. What I said should fix the issue. For example, if you start at:

http://www.conklintest.com/

Then go to:

http://www.conklintest.com/cart/catalogCategory.cfm?pLine=01&cLine=05

Notice how on the later page, the sub menu is expanded already.