PDA

View Full Version : Implementing a Sub-Menu into a List of Content-Glide Links



telephonefield
01-12-2010, 03:47 PM
1) Script Title: Incorporate Drop Down Menu using Content Glider

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

3) Describe problem:

Not so much a problem as a theoretical question. I have built a small site using Content Glider for all the main Pages or Sections. While I'm aware it could be considered incorrect to use the script this way, the small size of the site makes it easy for me to edit the entire site in one .html page, and it's this advantage I don't want to lose.

Now here comes the problem: They now want a sort of sub-menu to come down under only TWO of the main points (separating what I have on one page and in one content glide div, into multiple ones.)

What is the EASIEST way to do this without resorting to multiple .html files and without having to completely destroy the Content Glider I've implemented and styled?

How would I create small sub-menus under the links 'KANZLEI' and 'PERSONEN' and keep them connected to the same Glider? Some kind of Accordion Sub-Menu would be great, if it won't conflict at all with the Glider.

http://www.cidcom.at/demo/buder_herberstein/home.html

The simplest solution might be to just have the sublinks always shown and leave the Section headers as plain Text, but then I'd have a difficult time styling sub-menu items vs. main-menu items.

ANY help or ideas are greatly appreciated as I am not a coder and have learned this all on my own.

telephonefield
01-13-2010, 09:16 AM
Would there be anything inherently wrong with this HTML code


<div id="p-select" class="glidecontenttoggler">

<a href="#" class="toc_TOP" id="kanzlei_open" onmouseover="mopen('kanzlei_sub_menu')" onmouseout="mclosetime()">Die Kanzlei</a>

<div id="kanzlei_sub_menu">

<a class="toc" href="#">Geschichte</a>

<a class="toc" href="#">Besondere Kenntnisse</a>

<a class="toc" href="#">Sprachen</a>

<a class="toc" href="#">Zielsetzung</a>

<a class="toc" href="#">Image</a>

</div>

<a href="#" class="toc_TOP" id="kanzlei_open" onmouseover="mopen('personen_sub_menu')" onmouseout="mclosetime()">Die Personen</a>

<div id="personen_sub_menu">

<a class="toc" href="#">Gabriele Herberstein</a>

<a class="toc" href="#">Erhard Buder</a>

<a class="toc" href="#">Dan Badea</a>



</div>

<a href="#" class="toc">Die KooperationsbÜros</a>

<a href="#" class="toc">Die Publikationen</a>

<a href="#" class="toc">Der Puzzlestein</a>

<a href="#" class="toc">Kontakt</a>

</div>


... combined with this Javascript in the head?


<script language="Javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</script>

ddadmin
01-13-2010, 10:22 AM
I'm a little confused from your initial post what you're trying to set up actually. I gather the summary of it is the below:


How would I create small sub-menus under the links 'KANZLEI' and 'PERSONEN' and keep them connected to the same Glider? Some kind of Accordion Sub-Menu would be great, if it won't conflict at all with the Glider.

So basically, are you looking to modify say the link "KANZLEI" so when it's clicked on, sub content appears below it? What should happen when the user clicks on one of the links within this sub content?

FYI I'm not aware of any conflicts with having both Content Glider and Accordion menu (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm) on the same page.