SharePoint SummeryLinks Webpart JQuery modifications – Make it into a “drop down” menu

Here is a small JQuery piece of code that you can use to minimize the space required on a page with summary links webpart. This will collapse the links listing under the webpart title. To make the links visible again you have to press the webpart title again.

 

jQuery(“table .dfwp-list”).slideUp();

jQuery(“table .dfwp-list”).closest(‘table’).hover(
function(){
jQuery(this).find(‘.dfwp-list’).slideDown();
},
function(){
jQuery(this).find(‘.dfwp-list’).slideUp();
});

The JQuery code above is tested on SharePoint 2010. The most important piece in this code is the CSS class named dfwp-list. When targeting this class you are targeting an UL LI HTML structure where the links exist. With a little modification you can use this code to add the each LI borders, colors and other styling to make it look more like a drop down menu.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s