Problem with Smooth Navigational Menu

1) Script Title: Smooth Navigational Menu

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

3) Describe problem:
Currently I am using this script to load another php page in an <iframe>. However, the menu is supposed to hide/fade when I have clicked on any menu item. Unfortunately this is not the case - the menu remains visible.

How can I fix this behavior? Is there a method I would need to call in order to make the menu layer invisible?

Thanks,
Erwin

Fixed your link.

Are you referring to the submenus (flyouts) not disappearing? One thought is that you might have an older version of jquery...? It may also have something to do with using it in an iframe - I've never tried that, so I don't know if there might be any issues.

Please post a link to your site so we can see the problematic code.

thanks for the quick reply.

actually I also tried it without iframe. I just put a javascript function call inside the "href" tags. I was hoping that similar to other menu library, a click would hide the visible layer.

Is there some kind of function call i can use inside a javascript function that would set the visibility of the item layer to false. or is the library designed to refresh the whole page when an item was clicked?

thanks in advance

You want to have a javascript function in the menu item that, once clicked, hides the entire menu? Am I correct?

Do you have a test page set up that shows what you are doing / what you would like to do?
Please post a link to your site/page so we can see your code.

Yes, that's what I'm trying to do exactly. However my page is not ready yet, and so I cannot post it here yet. However, I'll try my best to give you a picture of what I am doing.

My page contains a menu (using Smooth Navigational Menu :) ). This is how the anchor tag looks like:

HTML Code:

---

<a href="viewlist.php" target="frame_content">View List</a>

---

or

HTML Code:

---

<a href="#" onclick="loadpage();return false" >View List</a>

---

So far, I don't have any problem with these links (both work), since the iframe "frame_content" gets loaded with the correct data. However, since the whole page is not being refreshed (only the iframe gets refreshed), the menu layer is still there. I would always have to mouseout from the layer before it becomes invisible.

Probably, I could also call the function that gets called by the mouseout event from inside my javascript loadpage() function. However I don't know the function name or the line of code that hides the menu. Perhaps you could point me in the right direction?

Thanks for the help. I really appreciate your responding to my inquiries.

Well, the function:

Code:

---

                        function(e){
                                var $targetul=$(this).children("ul:eq(0)")
                                $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
                                if (smoothmenu.shadow.enable){
                                        if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
                                                this.$shadow.children('div:eq(0)').css({opacity:0})
                                        }
                                        this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
                                }
                        }

---

inside the .js file is what hides a sub menu when you mouse out of it. You can try have clicking it do the same thing by also assigning the above function to the click event. The attached .js file shows this.

Hi,

Here's one the menu <li>

HTML Code:

---

<li><a onclick="loadPage(event);return false;">View List</a></li>

---

And here's the code snippet of the javascript function loadPage()

Code:

---

function loadPage(e)
{
    // some codes here to load the iframe with the desired page
    ...

    // this is supposed to hide the menu
    var $targetul=$(this).children("ul:eq(0)");
    $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime);

    // just to test if ddsmoothmenu object exists
    alert(ddsmoothmenu.transition.outtime);
}

---

Unfortunately, the hide part still doesn't work. I have my Error Console open, and there is no error of any kind. The alert(ddsmoothmenu.transition.outtime) even alerts the correct data, so I'm pretty sure that ddsmoothmenu object is available within the loadPage function. Probably the onmouseover event is preventing the menu layer from becoming hidden?

Currently you have already provided "onmouseover" and "onmouseout" events to each <li> objects, right? Is it also possible to add an "onclick" event there? So that every time an item is clicked, the menu automatically gets hidden (just like in typical applications menu)?

(I haven't tried using jquery, but I'll start reading about it now, and probably play around with ddsmoothmenu.js)

oh crap! I didn't see the file that you have attached (with the click event). I already tried it and it's working exactly as I wanted. Probably it would be better to have this feature available for this library, as this would make the menu look even better.

Thanks for the help man! I'll start working on my page right now. Thanks again.