PDA

View Full Version : Accordion Menu nesting troubles



accphotography
02-25-2009, 01:34 PM
1) Script Title: Glossy Accordion Menu

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

3) Describe problem: I'm trying to make this menu multi-leveled (it's two automatically, I'm trying to get three) but it's not working out. I've read every thread I can find on the subject and I've spent alot of time looking at the code of my pages and of the "bullet" code but I can't seem to locate the problem. There *are* some difference between my code and the "bullet" code but the CSS code is so different from the "glossy" code and I need some features of the glossy. I'm sure this is probably a simple solution, but I'm obviously just totally overlooking it.

Help? :o

html code:

<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<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" 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: false, //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: ["none"], //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"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
if (state=="block" && isuseractivated==false){ //if header is expanded and NOT as the result of the user's action (click or mouseover)
header.style.fontWeight=700
header.style.borderBottom="1px solid #cfcfcf"
}
}
})

ddaccordion.init({
headerclass: "submenuheader2", //Shared CSS class name of headers group
contentclass: "submenu2", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" 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: false, //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: ["none"], //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"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
if (state=="block" && isuseractivated==false){ //if header is expanded and NOT as the result of the user's action (click or mouseover)
header.style.borderBottom="1px solid #cfcfcf"
}
}
})

</script>

<script type="text/javascript">
(function($){
$(function(){
$('.submenuheader').click(function(){
var l = this.href;
setTimeout(function(){window.location.href = l;}, 300);
});
});
})(jQuery);
</script>

<script type="text/javascript">
(function($){
$(function(){
$('.submenuheader2').click(function(){
var l = this.href;
setTimeout(function(){window.location.href = l;}, 300);
});
});
})(jQuery);
</script>

</head>
<body>
<div id="leftcolumn">

<div id="mainmenu">Main Menu</div>

<div class="glossymenu">

<a class="menuitem" href="1.php">One</a>
<a class="menuitemheader submenuheader" href="2.php?submenuheader=0">Two</a>
<div class="submenu">
<ul>
<li><a href="3.php?submenuheader=0">Three</a></li>
</ul>
</div>
<a class="menuitembelow" href="4.php">Four</a>
<a class="menuitem" href="5.php">Five</a>
<a class="menuitemheader submenuheader" href="6.php?submenuheader=1">Six</a>
<div class="submenu">
<ul>
<li><a class="menuitemheader2 submenuheader2" href="7.php?submenuheader=1&submenuheader2=0">Seven</a>
<div class="submenu2">
<ul>
<li><a href="3.php?submenuheader=1&submenuheader2=0">Three</a></li>
</ul>
</div>
</li>
</ul>
</div>
<a class="menuitembelow" href="8.php">Eight</a>
</div>



I tried to paste my CSS code too but the message was too long. You can view it from the site: http://www.accphotography.com/GE/phptrial/ddmenu1/index.php

Also, is there any way to get the code to highlight or bold the page you are actively on even if it's not a header?

Thanks a million,

ACC

ddadmin
02-26-2009, 12:18 AM
It's difficult to judge what you're trying to accomplish style wise by looking at your page at the moment. Do you have trouble getting the script to work correctly with just one level of sub menu (instead of nested)? If not, try putting that up on a test page with a link to it here, and we can show you how to add in the nested level(s).

accphotography
02-26-2009, 01:41 AM
It does work just fine with just two levels *nod*.

http://www.accphotography.com/GE/phptrial/ddmenu2

Thanks SOOO much for looking into this for me. I'm sure I'm messing something up but I've been pulling my hair out all day and really don't want to start from scratch with the other menu style and modify it.

ACC

ddadmin
02-26-2009, 02:46 AM
Looking at your example, I noticed that your main menu items are straightforward <a> elements, while the items in your sub menu are list elements (<il><a>). This inconsistency could pose a problem when you wish to add nested levels to the menu- ideally it should be a consistent layout- all list elements from top to bottom, or <a> elements with the sub menus being <a> elements as well.

With that precaution, using the example you provided above, to add a sub menu to say "Three", the menu's HTML would look something like:


<div id="mainmenu">Main Menu</div>
<div class="glossymenu">
<a class="menuitem" href="http://www.accphotography.com/GE/phptrial/ddmenu2/1.php">One</a>
<a style="border-bottom: 1px solid rgb(207, 207, 207); font-weight: 700;" headerindex="0h" class="menuitemheader submenuheader" href="http://www.accphotography.com/GE/phptrial/ddmenu2/2.php?submenuheader=0">Two</a>
<div contentindex="0c" class="submenu">
<ul>
<li><a href="http://www.accphotography.com/GE/phptrial/ddmenu2/3.php?submenuheader=0" class="subsubmenuheader">Three</a>
<ul class="subsubmenucontent">
<li><a href="http://www.accphotography.com/GE/phptrial/ddmenu2/3.php?submenuheader=0">3.1</a></li>
<li><a href="http://www.accphotography.com/GE/phptrial/ddmenu2/3.php?submenuheader=0">3.2</a></li>
</ul>
</li>
</ul>
</div>
<a class="menuitembelow" href="http://www.accphotography.com/GE/phptrial/ddmenu2/4.php">Four</a>
<a class="menuitem" href="http://www.accphotography.com/GE/phptrial/ddmenu2/5.php">Five</a>
<a headerindex="1h" class="menuitemheader submenuheader" href="http://www.accphotography.com/GE/phptrial/ddmenu2/6.php?submenuheader=1">Six</a>
<div style="display: none;" contentindex="1c" class="submenu">
<ul>
<li><a href="http://www.accphotography.com/GE/phptrial/ddmenu2/7.php?submenuheader=1">Seven</a></li>
</ul>
</div>
<a class="menuitembelow" href="http://www.accphotography.com/GE/phptrial/ddmenu2/8.php">Eight</a>
</div>

While the initlization code at the top would look something like:


<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: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" 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: false, //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: ["none"], //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"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
if (state=="block" && isuseractivated==false){ //if header is expanded and NOT as the result of the user's action (click or mouseover)
header.style.fontWeight=700
header.style.borderBottom="1px solid #cfcfcf"
}
}
})

ddaccordion.init({
headerclass: "subsubmenuheader", //Shared CSS class name of headers group
contentclass: "subsubmenucontent", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" 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: false, //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: ["none"], //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"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
if (state=="block" && isuseractivated==false){ //if header is expanded and NOT as the result of the user's action (click or mouseover)
header.style.fontWeight=700
header.style.borderBottom="1px solid #cfcfcf"
}
}
})

</script>

Again, this may not work flawlessly though due to the inconsistent structure of your menu. If it doesn't, I suggest just telling me which one of the menu themes listed on this page (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm) you wish to see an example of nested levels using.

accphotography
02-26-2009, 04:27 AM
Thanks a million for helping!

I tried what you showed but I'm getting the same problem I had before. I know you said that was probable considering my code. So I went in and made everything <li>s (I think, *blush*). For some reason the 3rd level won't push the accordion down. I'm not sure if this is a CSS, JS, or HTML error. Or maybe I didn't correctly fix the <li>/<a> problem? Any ideas? *shrug*

Here is the new HTML code:

<div id="mainmenu">Main Menu</div>
<div class="glossymenu">
<li><a class="menuitem" href="1.php">One</a></li>
<li><a class="menuitemheader submenuheader" href="2.php?submenuheader=0">Two</a></li>
<div class="submenu">
<ul>
<li><a href="3.php?submenuheader=0" class="subsubmenuheader">Three</a>
<ul class="subsubmenucontent">
<li><a href="7.php?submenuheader=0">3.7</a></li>
</ul>
</li>
</ul>
</div>
<li><a class="menuitembelow" href="4.php">Four</a><li>
<li><a class="menuitem" href="5.php">Five</a><li>
<li><a class="menuitemheader submenuheader" href="6.php?submenuheader=1">Six</a><li>
<div class="submenu">
<ul>
<li><a href="7.php?submenuheader=1">Seven</a></li>
</ul>
</div>
<li><a class="menuitembelow" href="8.php">Eight</a><li>
</div>


I copied your JS script exactly so I doubt that is the problem.

Link again so you can see what it's doing:
http://www.accphotography.com/GE/phptrial/ddmenu2

ETA: If it's just easier, I think the Glossy is closest to what I'm trying to create. I'm also trying to get it where the headers open both their menu and a page, but I managed to get that done. The bottom line is I am trying to duplicate the menu on this page without using tables or Joomla (and hopefully using an include and cookie(s) so I can change the menu on the fly): http://www.groomelite.com/portal/

I'm sorry I'm such a noob. I'm trying my best to learn. Thank you so very much for your time!

ACC

accphotography
02-26-2009, 05:48 PM
I got it!!! I don't have any idea how I did it, but it was 4am and I hadn't slept in 48 hours and was about to keel over. I told myself "one more change, just try this and then you can sleep". Whatever I did worked. I don't even know what it was. LOL!

http://www.accphotography.com/GE/phptrial/ddmenu2

I couldn't have done it without your help DDadmin though. Thanks a million!

I have a couple more minor questions maybe someone can help me with:

1: When I attempt to validate my code, I get the following error:
Line 103, Column 20: document type does not allow element "UL" here; assuming missing "LI" start-tag. <ul class="submenu"> I can't understand what's wrong here. I just have <li>s in between a <ul class> tag (not a single thing else). That's how it's *supposed* to be isn't it? I tried removing the class to see if that would help, but it didn't. Ideas?

2: In Firefox the menu shows perfectly, but it shows a bit differently in Internet Explorer (what's new). Specifically right now I am curious about the difference in thickness and placement of the border around "three" and "four" (which are nested under "two"). Any ideas as to what might be causing that or how I might fix it?

I think that's it! I am so excited I finally got a menu that basically does what I needed it to do! I wish the "persist state" worked with header links though. I'm a bit sad there is no way for the menu to actively show where the user is.

Thanks DD. You guys save the day yet again!

ACC

accphotography
02-27-2009, 06:18 AM
Ok... not entirely solved. It works on the test page, but will NOT work on the real page. At first I though I was missing a file or something, but I've now been able to recreate the problem on the test page as well.

Real site:
http://www.accphotography.com/GE/

Test site:
http://www.accphotography.com/GE/phptrial/ddmenu2

It seems that whenever I add a menu option that has a similar structure to another menu option neither work. Is there something in this script that can't be repeated? based on what I've seen from the examples I don't think that's the case, but something fishy is up here.

You can see on the test site that the bottom menu option (Seven.2) is an identical replica of Seven (just changed the text and the submenuheader id # for the ? url) and neither work. But just above "two" is a three level and works just fine.

What am I doing wrong here?

Here's the test code:

<ul class="glossymenu">

<li><a class="menuitem" href="1.php">One</a></li>
<li><a class="menuitemheader submenuheader" href="2.php?submenuheader=0">Two</a></li>
<ul class="submenu">
<li><a class="subsubmenuheader" href="3.php?submenuheader=0&amp;subsubmenuheader=0">Three</a>
<ul class="subsubmenucontent">
<li><a class="subsubmenucontent" href="4.php?submenuheader=0&amp;subsubmenuheader=0">Four</a></li>
</ul>
</li>
</ul>
<li><a class="menuitembelow" href="5.php">Five</a></li>
<li><a class="menuitem" href="6.php">Six</a></li>
<li><a class="menuitemheader submenuheader" href="7.php?submenuheader=1">Seven</a></li>
<ul class="submenu">
<li><a class="submenu" href="1.php?submenuheader=1">One-2</a></li>
</ul>
<li><a class="menuitembelow" href="8.php">Eight</a></li>
<li><a class="menuitemheader submenuheader" href="6.php?submenuheader=2">Seven.2</a></li>
<ul class="submenu">
<li><a class="submenu" href="2.php?submenuheader=2">One-2.2</a></li>
</ul>
</ul>


Sorry to be such a bother.

ACC

ddadmin
02-28-2009, 09:11 AM
It's easy to get lost working with nested lists, even in HTML isn't it? :) Looking at the HTML on your test page (ddmenu2), specifically:


<li><a class="menuitem" href="1.php">One</a></li>
<li><a class="menuitemheader submenuheader" href="2.php?submenuheader=0">Two</a></li>
<ul class="submenu">
<li><a class="subsubmenuheader" href="3.php?submenuheader=0&amp;subsubmenuheader=0">Three</a>
<ul class="subsubmenucontent">
<li><a class="subsubmenucontent" href="4.php?submenuheader=0&amp;subsubmenuheader=0">Four</a></li>
</ul>
</li>

</ul>
<li><a class="menuitembelow" href="5.php">Five</a></li>
<li><a class="menuitem" href="6.php">Six</a></li>
<li><a class="menuitemheader submenuheader" href="7.php?submenuheader=1">Seven</a></li>
<ul class="submenu">
<li><a class="submenu" href="1.php?submenuheader=1">One-2</a></li>
</ul>
<li><a class="menuitembelow" href="8.php">Eight</a></li>

<li><a class="menuitemheader submenuheader" href="7.php?submenuheader=2">Seven.2</a></li>
<ul class="submenu">
<li><a class="submenu" href="1.php?submenuheader=2">One-2.2</a></li>
</ul>
</ul>

At a glance I see that some of your nested lists are not structurally valid. You have ULs that don't have a parent LI:


<li><a class="menuitemheader submenuheader" href="2.php?submenuheader=0">Two</a></li>
<ul class="submenu">
<li><a class="subsubmenuheader" href="3.php?submenuheader=0&amp;subsubmenuheader=0">Three</a>
<ul class="subsubmenucontent">
<li><a class="subsubmenucontent" href="4.php?submenuheader=0&amp;subsubmenuheader=0">Four</a></li>
</ul>
</li>
</ul>

It should be something like:


<li><a class="menuitemheader submenuheader" href="2.php?submenuheader=0">Two</a>
<ul class="submenu">
<li><a class="subsubmenuheader" href="3.php?submenuheader=0&amp;subsubmenuheader=0">Three</a>
<ul class="subsubmenucontent">
<li><a class="subsubmenucontent" href="4.php?submenuheader=0&amp;subsubmenuheader=0">Four</a></li>
</ul>
</li>

</ul>
</li>

Make sure all your nested ULs are properly nested. Not sure if that resolves all your issues, but start there.

accphotography
02-28-2009, 08:55 PM
Ok that did fix my HTML validation (yay!), but I'm still having the same problem. When there's just one two level <li> it works fine, but if I add a second two level neither of them work. Meanwhile the three level works fine the whole time (I haven't tried duplicating it, hmmm maybe I will). ETA: Duplicating the three level had the same effect, neither worked, but the two level worked fine.

Here's the new code with the fixed <li>s:

<ul class="glossymenu">

<li><a class="menuitem" href="1.php">One</a></li>
<li><a class="menuitemheader submenuheader" href="2.php?submenuheader=0">Two</a>
<ul class="submenu">
<li><a class="subsubmenuheader" href="3.php?submenuheader=0&amp;subsubmenuheader=0">Three</a>
<ul class="subsubmenucontent">
<li><a class="subsubmenucontent" href="4.php?submenuheader=0&amp;subsubmenuheader=0">Four</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="menuitembelow" href="5.php">Five</a></li>
<li><a class="menuitem" href="6.php">Six</a></li>
<li><a class="menuitemheader submenuheader" href="7.php?submenuheader=1">Seven</a>
<ul class="submenu">
<li><a class="submenu" href="1.php?submenuheader=1">Eight</a></li>
</ul>
</li>
<li><a class="menuitembelow" href="8.php">Eight</a></li>
<li><a class="menuitemheader submenuheader" href="7.php?submenuheader=2">Seven-Duplicate</a>
<ul class="submenu">
<li><a class="submenu" href="1.php?submenuheader=1">Eight-Duplicate</a></li>
</ul>
</li>
</ul>


Ok here's a page that shows it working correctly with one two level and one three level:
http://www.accphotography.com/GE/phptrial/ddmenu1

Here's a page that all I did was duplicate the working two level (copy and paste) and changed nothing but the target calls and now *neither* two level works even though I didn't *touch* the first one:
http://www.accphotography.com/GE/phptrial/ddmenu2/

This makes NO sense to me. I just feel like this HAS to have something to do with the code not liking something being duplicated, but Ii can't figure for the life of me what. *GAH!*

Thank you so much!

ACC

accphotography
02-28-2009, 10:16 PM
Another curious question: Will persistence not work if the menu code is not used on the pages themselves, but only as an include? Since the browser sees a server side include as actually IN the page, I would think it would still work, but it doesn't. I thought maybe it was that my headers were also links, but I tried making them just menus with the persistent on and it *still* didn't follow me. Yes, both my server and browser allow cookies and I have looked at my cookies stored in the browser to see if the menu was producing one, and it indeed is, it's just not following me. *shrug*

ACC

accphotography
03-02-2009, 01:42 PM
I've basically got it operating the way I want it to now! YAY!!!

I've deleted the test folders (organization freak here) and now only have the working menu up. In the event anyone's ever looking to accomplish the same thing, here ya go:
http://www.accphotography.com/GE/

I would post the code as well, but it's really long (lots of items) and will probably put me over the limit.

Thanks so much for your help!!

ACC