PDA

View Full Version : Accordion Menu Help



lex2000
02-13-2008, 12:50 AM
1) Script Title: Accordion Menu Script

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

3) Describe problem: I'm trying to create a navbar which contains 3 expandable items and two items that don't need to expand at all. However, I still want the two items that aren't expanding to display the selected state that the expandable items show. Those non-expanding items also need to link to their respective pages.

Has anyone done this, or know how it can be done?

This (http://spacebetween.com/navtest.html) is what I have so far.

Nile
02-13-2008, 12:55 AM
All you would have to do is create another class with css and copy and paste the current one that the real thing is using, this way, you can have what you want with out the js making it expandable.
Hope it helps :)

lex2000
02-13-2008, 01:04 AM
I'm not sure I understand what you mean by "the current one that the real thing is using". Could you please clarify? Thanks a lot.

Nile
02-13-2008, 02:03 AM
OK, copy the whole CSS code and pace it under the CSS code that you copied, then change the name of the classes(.something). Then go to your list(<li>), and cnage the class.

ddadmin
02-13-2008, 02:20 AM
Lex, can you rephrase what you're trying to accomplish, perhaps with a link to a working example of what you have so far? Right now I don't quite understand your question.

Nile
02-13-2008, 02:40 AM
@admin
He has a link right here:
http://spacebetween.com/navtest.html
(if you read his post it was there)
He wants the expandable things only on some of the links and on others just a link.

lex2000
02-13-2008, 05:26 PM
ddadmin - I have a navbar with 5 items. The top one, 'Home', doesn't contain subitems, but I want it to be highlighted when the user clicks on it and goes to that page. The following three buttons are expandable (and functioning). The bottom button needs to behave the same as the 'Home' button. How do I use the Accordion Menu script so that I have expandable and non-expandable buttons?

There is a link to the functioning menu in my original post.

lex2000
02-13-2008, 05:29 PM
Then go to your list(<li>), and cnage the class.

But the non-expandable items won't have lists, will they?

lex2000
02-13-2008, 05:42 PM
So, something like this?

Original class:


.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 11px Arial, Helvetica, sans-serif;
color: #044990;
background: url(../images/nav_button.png) no-repeat center left;
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
margin-top: 0px; /*top spacing between header and rest of content*/
text-transform: uppercase;
padding: 5px 0 5px 50px; /*header text is indented 50px*/
cursor: hand;
cursor: pointer;
}

New class:


.staticnav-item {
font: bold 11px Arial, Helvetica, sans-serif;
color: #f90;
background: url(../images/nav_button.png) no-repeat center left;
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
margin-top: 0px; /*top spacing between header and rest of content*/
text-transform: uppercase;
padding: 5px 0 5px 50px; /*header text is indented 50px*/
cursor: hand;
cursor: pointer;
}

ddadmin
02-13-2008, 09:26 PM
I may be oversimplifying things here, but if all you're trying to do is get the "Home" item "Home" to show the "expanded" header style, just give it the CSS class "openheader",. since that's what the actual expanding header items are using to achieve the look:


<h3 class="menuheader openheader" style="cursor: pointer"><a class="staticnav-item href="#" onClick="">Home</a></h3>

lex2000
02-13-2008, 09:46 PM
I only want the Home nav item to show that style when that item is clicked and when it's on the associated page.

I realize this is a bit out of the scope of this script, I was just hoping someone would have done this and could provide a quick answer.

Thanks.

lex2000
02-14-2008, 06:21 PM
Okay, so I was able to find another script to use on those nav items that don't need to expand. Unfortunately, it's another .js to load and another javascript call in the HTML, but it's doing what I need without conflict.

The only thing I'm having trouble with now regarding the Accordion Menu is the fact that one of the nav items is always expanded by default regardless of the page to which I navigate. I have persiststate set to false. What could be causing this?

ddadmin
02-14-2008, 10:19 PM
The only thing I'm having trouble with now regarding the Accordion Menu is the fact that one of the nav items is always expanded by default regardless of the page to which I navigate. I have persiststate set to false. What could be causing this?

Make sure the below setting in Accordion Menu is set to blank as follows:


defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content

lex2000
02-14-2008, 11:38 PM
Thanks. That did it.