Accordion Menu Help

[lex2000]

1) Script Title: Accordion Menu Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.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 is what I have so far.

[Nile]

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]

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]

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]

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]

@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]

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]

Then go to your list(<li>), and cnage the class.

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

[lex2000]

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]

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>