Extending WordPress MegaMenu

4 Views

My boss and I, at the behest of a client, are seeking a way of extending MegaMenu. Currently, our menus are set up to show a static featured product thumbnail from an arbitrary product page (see screenshot). This is brought into the menu via a featured page widget (recall that WP MegaMenu is regarded a widgetized sidebar).

The client has asked that the product thumbnail change dynamically corresponding to any of the product category links in the menu being hovered over. We know this is a non-trivial request and any jumping-off points that can be offered are welcome.!

Read More

enter image description here

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. I will preface by saying I haven’t looked at the megamenu code base, but I think I can make some assumptions about how you might want to tackle this.

    1. Attach an event to all links under megamenu

      $('a.dc-mega').mouseover( function(){ ... });

    2. I don’t understand your ‘featured page widget.’ Is this part of megamenu? From docs it doesn’t look like it. Is this another WP widget that can somehow be embedded in megamenu? If so, how? Is this your own code? Regardless you will want to get the links page id. This may be included in megamenu. Looking at their docs I think it is included in the list item id. So you could retrieve id from there.

      var pageID = $(this).parent('li').attr('id');

    3. Use AJAX to retrieve the image and replace the current image. Server side you can use

    . 

      $.ajax({
      url: "test.html",
      success: function(){
         //replace image
      }
    });