Advanced Search

Results 1 to 8 of 8

Thread: Problem with Smooth Navigational Menu

  1. #1
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default 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

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,621
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.
    Last edited by traq; 09-11-2009 at 03:57 AM.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  3. #3
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,621
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  5. #5
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  7. The Following User Says Thank You to ddadmin For This Useful Post:

    xyperxex (09-12-2009)

  8. #7
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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)

  9. #8
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •