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&cLine=03" shape="rect">Canine</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=04" shape="rect">Equine</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=02" shape="rect">Feline</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=05" shape="rect">Food Producing Animals</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=06" shape="rect">Other 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.
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&cLine=03" shape="rect">Canine</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=04" shape="rect">Equine</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=02" shape="rect">Feline</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=05" shape="rect">Food Producing Animals</a></li>
<li><a href="#session.ccCart#/catalogCategory.cfm?pLine=02&cLine=06" shape="rect">Other 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.