View Full Version : Bullet List Accordion Menu problem with adapting to my links

07-23-2008, 07:47 PM
1) Script Title: Bullet List Accordion Menu

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

3) Describe problem: I have a couple little things i'd like to fix (I managed to fix the main one).

the site is published to a "hidden"/back area of the current site here :


QUESTION 1 : Sometimes when I open the site, one of the headers is expanded, and when I open the header one of the submenus is expanded. Can I change something so they are all closed on opening?

QUESTION 2 : This question is just appearance (I’d like to change it but its okay if I can’t). I would like the main headers to be closer together when all are closed. I’ve been trying to change the code, but I keep making the subheadings overlap the main headings. The best I can make it is below, I changed the “margin-bottom” (I tried a lot of different positive and negative values). It appears to move the main headers closer together but if I make them any closer, the “introduction” submenu overlaps the “about us” main heading.

I published an example in case it was needed:

I'm going to try to post code properly, so I hope it works :)

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: 16px Arial;
color: black;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: -1px; /*bottom spacing between header and rest of content*/
padding: 5px 0 5px 30px; /*header text is indented 30px*/
padding-bottom: 2px; /*bottom spacing between menu items*/
cursor: hand;
cursor: pointer;

QUESTION 3 : is the least important, I’ve tried to look through the forums, but I’m confused. The way I have the menu is that the “buttons” turn yellow when you are within the section of the site. For ease of use, I’d like to make the SUBCATEGORIES do the same thing when you are on the site. Its going to be a big site when its done, and used by people of all ages but mostly our demographic is like 50 – 100 year olds, so i’m trying to make it really clear. My impression from the forums is that its not possible with this menu, but things seem to change quick so I thought I’d ask. If I can’t do it I’ll just do the title in yellow across the top of the page.

On a side note, is there like a “help us keep going” fund/donation thing for dynamicdrive? I feel like a user because I can’t reciprocate help (considering before I offered to do the site, the computer programmers how were doing it were charging my dad over $200 (Canadian) to make it so we could hyperlink pictures) :)


07-24-2008, 06:10 AM
Wow that's a lot of questions! I'll try and answer some of them now, and get back later when I have more time.

QUESTION 2 : Yep, this has to do with persistence being turned on. To do what you're asking, try disabling that feature, plus make sure no headers are set to open by default in the initialization code:

collapseprev: false, //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

QUESTION 3 : Theoretically, to force only one header on the same level to be open at any time (so the previous one is closed if needed), you'd do this in the initialization code:

onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)

However, there is a bug with the current version that causes the above setting to not be honored if you're using the "click" mode of revealing. Before I can fix the bug, see this thread (http://www.dynamicdrive.com/forums/showthread.php?t=33906) for a temporary fix.

07-24-2008, 01:03 PM
Hi, thanks for the answers, they helped. I've been working on it all day, and managed to fix some of my questions by just playing with the code and trying different things until something worked. I edited my post and took out the questions I figured out.

I figured out my expanding and contracting problem was due to hyperlinking the subheadings (which I wanted). I went into the glossy accordian menu and addapted the submenu plus/minus togglehtml into this menu. It works exactly like I want now, but I'd like to have the pluses/minuses line up on the right edge of the menu (right justifyied). In togglehtml I added


which made the signs move to the right, but they don't line up with each other, which I would like.

Is there a right-justified code for html? I've googled it but I thnk I must be looking up the wrong terms.

07-24-2008, 01:19 PM
Is there a right-justified code for html? I've googled it but I thnk I must be looking up the wrong terms.

Its the same thing for positioning it left.
The below is an example

<div align="right">
Lipsum Lorem and stuff...
What align="right" is doing is the same thing that css does in text-align. Although you asked for an html way to do it. I'll give a few CSS ways to do it to. The css ways are much more convenient. 1) Because some people come saying how messy your code is. And thats something that I personally really hate. 2) Because if your giving the <div> or any other element an id or a class. Why not add the extra style? 3) Because you should. :)
Ways(please look at the comments:

text-align: right; //will position the text to the right

float: right; //will position the whole element to the right.

Only use the below if you want it to override an element

position: absolute;
right: -0px;
Only use the below if you want it to be next to and not override elements

position: relative;
right: -0px;

07-24-2008, 03:44 PM
Well, I got the html partly right - i had the align part but was missing the /div. But thats irrelavent because the css does what I wanted in the first place. I couldn't get it to work because I was using a +px value. I was just trying random things until something worked, and it happened to be the togglehtml part under ddaccordion.init. I'm not even sure how I got around to that, but its irrelevant because the css works great.

Does the "messyness" of the code effect how the page works in different browsers? I'm using IE7 (because thats whats on my computer) and so I know it works in that, but is there a way to tell if it will work in other browsers without having them on my computer? People on here are talking about browsers that i've never even heard of, so the compatability worries me a bit. This is probably the only site I'm ever going to make (oh the things I do for my parents), so I don't want to have to pay for a bunch of different browsers.

07-24-2008, 09:06 PM
What I've heard, I'm not expert. Is that it may not work in SOME browsers, but I say use the align="right" on the div, that will work in all browsers.