All Levels Navigational Menu : links buggy with the customized onClick driven version

**Alban** · 01-17-2009, 10:06 AM

1) Script Title: All Levels Navigational Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem:

First, thanks to DynamicDrive for this very good script, and for the rest as well.

In this thread I found the gracious custom script allowing the onClick event to be used to display menus instead of the rollover one.

The OnClick works, which is the nice part. But life is not nice.

My sub-sub-nested items links don't work anymore.

The links are there, they show on hover in the status bar, but clicking on them doesn't load the linked page. Menu disappears, and nothing.

The sub-nested items /do/ work though.

Let me put that in code :

PHP Code:


<div id="ddtopmenubar" >

    <ul>

    <li><a href="#" rel="ddsubmenu_1"> Example </a></li>

    </ul>

</div>

<script type="text/javascript">

ddlevelsmenu.setup("ddtopmenubar", "topbar")

</script>

<ul id="ddsubmenu_1" class="ddsubmenustyle">

    <li>

        <a href="#"> Example </a>

        <ul>

            <li><a href="http://">Working !</a>

                <ul>

                    <li><a href="http://">Not working !</a></li>

                </ul>

            </li>

        </ul>

    </li>

</ul>

What do you think ?

Worth noticing that I'm using the 2.0 version and not the 1.5 the custom script is using.

Thanks so much if you can help

**ddadmin** · 01-18-2009, 12:15 AM

Sure. To modify All Levels Menu v2.1 so the headers are toggled onClick, use the attached modified .js file.

**Alban** · 01-18-2009, 01:51 PM

Thanks a lot. Very glad to receive your help.

I must be doing something wrong, because it doesn't work here though.

I get the very same result I had before.

In any case, I've attached a file you might want to rename as html and drop in a basic folder of the script to get things tested.

The 1.1.1 and 2.1 items don't work. The 3 one does, though.

Here's the file content :

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

    <head>

        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <link rel="stylesheet" type="text/css" href="ddlevelsmenu-base.css" />

    <link rel="stylesheet" type="text/css" href="ddlevelsmenu-sidebar.css" />

    <link rel="stylesheet" type="text/css" href="ddlevelsmenu-topbar.css" />

    <script type="text/javascript" src="ddlevelsmenu.js">

    

    /***********************************************

    * All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)

    * This notice MUST stay intact for legal use

    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

    ***********************************************/

    

    </script>        



        <title>

Test

        </title>



    </head>

    <body>



    <div id="mc">



            <div id="menu_c">

                <div id="ddtopmenubar" class="mattblackmenu">

                    <ul>

                    <li><a href="#" rel="ddsubmenu_products"> Example </a></li>

                    </ul>

                </div>

            </div>

            <script type="text/javascript">

            ddlevelsmenu.setup("ddtopmenubar", "topbar")

            </script>

            <ul id="ddsubmenu_products" class="ddsubmenustyle">

                <li>

                    <a href="#"> Example 1 (Not Working )</a>

                    <ul>

                        <li><a href="#"> Example 1.1</a>

                            <ul>

                                <li><a href="http://">Example 1.1.1</a></li>

                            </ul>



                        </li>

                    </ul>

                </li>

                <li>

                    <a href="#"> Example 2 (Not Working )</a>



                    <ul>

                        <li><a href="http://">Example 2.1</a>

                    </ul>

                </li>

                <li>

                    <a href="http://"> Example 3 ( Working )</a>



                </li>

            </ul>

    </div>

    </body>

</html>

**ddadmin** · 01-19-2009, 09:15 AM

Testing your page, it does work for me actually. That is, the first two sub menu headers (Example 1 and Example 2) when clicked on do not go to a URL, but instead reveals the additional sub menu they contain. Example 3 contains no sub menus, so when it's clicked on, the user is taken to the specified URL. That's how the modified script is expected to work, since you wanted the menu headers- specifically those with additional sub menus- to respond onClick instead of onMouseover.

**Alban** · 01-19-2009, 09:35 AM

Intriguing.

The onClick event works perfectly, thanks again to you, since day one. It's just that the submenu nested items don't.

But you tell me that when you click on the Example 1.1.1 link, it actually works and browser tries to load the page ?

PHP Code:


                                <li><a href="http://">Example 1.1.1</a></li>

If so, there is really something I don't get because these links do not work here

**ddadmin** · 01-19-2009, 10:19 PM

Ah yes you're right, I didn't bother to check whether the very last menu item's link works or not, which it doesn't. I took a stab at this earlier this morning, but couldn't find an easy workaround. I'll try and find some more time later today, and if I find a solution, post the modified .js file here.

**ddadmin** · 01-21-2009, 06:28 AM

Ok, try the below attached .js file, which should have fixed the aforementioned non hyperlinking issue (hopefully).

**Alban** · 01-27-2009, 09:47 AM

Thanks a lot, it seems to work flawlessly ! Thank you very very much.

[ I missed the notification email, and didn't want to urge you, sorry for replying late

]