PDA

View Full Version : How to put single linked items in the Bullit list accordion menu????



hansthart
10-10-2011, 07:56 PM
1) Script Title:

Bullit list accordion menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

3) Describe problem:

Hi,

I am trying to transform the 'Bullit list accordion menu' to fit my site and colors. CCS wise it is working alright, but I am struggling with two things:

?- Below I have given an example of the intended menu-tree. What do I need to do to have main items 1-5 and 7-9 show up like the menuheaders, but being links and not being folding open items? So, they would look like a button that would fold open when clicked, but instead nothing is unfolding, they are direct links to a next page.

?- In this tree, I would like to have item 6 as the only opened item on the index.html page when people land on my homepage. I don't understand what settings I need to make, to choose which item will be the opened one on the index.html page. I think I do understand though how to work this when linking to a next page, since you have described this on demo page. Just not for the initial homepage / index.html page opening.


Thanks for the feedback. Keep in mind, I am just starting with this kind of stuff, so not too familiar with java programming and such. Please give full and clear explanations if possible, just like the script has been done, really nice and tight written it is! Thanks again.

Hans 't Hart
Netherlands

Example tree:

1-Verzekeren? Doen!
2-Spoedgeval
3-Inschrijven
4-Bestellen
5-Nieuws!
6-Over ons

Even voorstellen

Algemene informatie

Tarieven

Routebeschrijving

Contact

Stage lopen bij ons[/INDENT]
7- Orthopedie Botchirurgie
8- Kennelbegeleiding
9- Eregalerij
10-Bibliotheek

Medisch


-Hondenleven


-Overig

Voeding (was voedingsadviezen)

Kliniekverhalen

Dieren en zo


- Puppyzaken


- Konijn


- Cavia


- Hamster


- Chinchilla
11-Overig

Dierenambulance

Verloren & Gevonden

Links

ddadmin
10-12-2011, 07:20 PM
Headers that do not contain sub menus should simply not carry the designated CSS class name shared by those that do. If you look at the menu in this demo (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm), for example, you'll notice that menu headers 1, 2, 3, and 5 are just ordinary headers with no sub contents. Looking at the menu's source, you'll see how they don't carry the CSS class in red:


<div class="glossymenu">
<a class="menuitem" href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >CSS Examples</a>
<div class="submenu">
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
</div>
<a class="menuitem" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a>
<a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a>
<div class="submenu">
<ul>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>
<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
</div>
<a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a>
</div>

The CSS class "submenuheader" is the shared class of menu headers with sub content, as defined by you inside the initialization code of the menu:


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
"