locked
How to add javascript fade in/out to the ootb top navigation RRS feed

  • Question

  • Hi folks, I'm finding it difficult to find much info on how I can override some of the default OOTB javascript behaviours in SP2010. I have styled the top navigation bar as part of a custom masterpage which works great but what I need to acheive is to fade in the second level of navigation when one of the main <li> items is hovered over.

    I.e. when I hover over a top level link called staff, I want the corresponding sub menu to fade in rather than just appear as it does by default. Is there any core javascript methods that I need to look for and override?

    Thanks

    Saturday, March 31, 2012 10:39 PM

Answers

  • This was the simple script that did the trick...

        $('ul.dynamic').css('display', 'none');
    
        $('li.static').hover(
            function () {
                $(this).children('ul.dynamic').stop(true, true).fadeIn('slow');
            },
            function () {
                $(this).children('ul.dynamic').stop(true, true).fadeOut('slow');
        });


    • Marked as answer by Entan Ming Thursday, April 5, 2012 1:35 AM
    Wednesday, April 4, 2012 10:39 AM

All replies

  • This seems fairly complex!

    The default behaviour of the top menu is the same as for any ASP Menu control. Therefore, you need to override the behaviour of the underlying asp menu control (there is no separate javascript written for that behaviour that can be overridden).

    You need to implement Animation Extender.

    But, only thing to be cautious about is the way you get the reference your menu in sharepoint.


    Regards, Huzefa Mala, MCTS

    Please mark the post that answered your question as the answer, and mark other helpful posts as helpful, so they will appear differently to other users who are visiting your thread for the same problem.

    Sunday, April 1, 2012 5:11 AM
  • Ok thanks for the information. If there is no javascript then how can the submenu visibility be toggled on hovering over the element... is this done via code? The asp menu control seems to generate <ul> and <li> tags and I just assumed I could plug into them. 

    I'm just not sure how the hover events can be controlled without using any client side scripting language?

    Sunday, April 1, 2012 1:56 PM
  • The scripts are packaged with the menu control. If you create a simple asp menu in a ASP.NET application you can see the same hover effect. When you view source of the page you will be able to see all the scripts that the menu control brings along with it.

    For an asp menu the fade in effect is given using the animation extender.


    Regards, Huzefa Mala, MCTS

    Please mark the post that answered your question as the answer, and mark other helpful posts as helpful, so they will appear differently to other users who are visiting your thread for the same problem.

     
    Sunday, April 1, 2012 5:07 PM
  • Thanks for the above, however I got a solution using simple jQuery.
    Tuesday, April 3, 2012 8:58 PM
  • Can you provide more information about how you implemented it as it will be helpful for everyone!

    Regards, Huzefa Mala, MCTS

    Please mark the post that answered your question as the answer, and mark other helpful posts as helpful, so they will appear differently to other users who are visiting your thread for the same problem.

    Wednesday, April 4, 2012 4:35 AM
  • This was the simple script that did the trick...

        $('ul.dynamic').css('display', 'none');
    
        $('li.static').hover(
            function () {
                $(this).children('ul.dynamic').stop(true, true).fadeIn('slow');
            },
            function () {
                $(this).children('ul.dynamic').stop(true, true).fadeOut('slow');
        });


    • Marked as answer by Entan Ming Thursday, April 5, 2012 1:35 AM
    Wednesday, April 4, 2012 10:39 AM