The Mega Menu


As I look back through my notes on the design of our Intranet I am amazed at what we achieved in (what I consider) a very short 7 months. SunGard didn’t simply build a SharePoint 2010 farm and add a few webparts, we designed a complete user experience. That would not have been possible without the collaboration of many groups within SunGard – primarily ISS and Corporate Marketing. They led the way with the branding and the wireframes, which left my development team time to focus on the functional aspects and together we merged our efforts into an amazing solution. One example of how that collaboration worked was in the custom navigation system we built for the intranet: The Mega Menu.

Once we had SharePoint 2010 running on our development servers and saw how the top (global) navigation worked we quickly determined it would not be suitable for how SunGard is structured – and how quickly that structure can change. We wanted a way to group and organize the many divisions and departments of SunGard by their functional areas. It had to be dynamic and easy to update – and at the topmost level we wanted it to be as simple as possible so it would be clear to the users where they needed to go.

(The Mega Menu – Top Level, Home Page)

The Mega Menu sits immediately below the Header/Searchbar and overrides (via feature staple) the native global navigation. The first two menu options, HOME and MY SITE are fixed. Home always returns you to the intranet home page and My Site takes you to your personal page on SharePoint. When you are in your personal site or the My Site, the top navigation expands, adding links for MY NEWSFEED and MY PROFILE:

The last two menu options are part of the dynamic menu system. Their contents are managed by a custom SharePoint list, stored in the root site collection. As users mouse-over these menu options they expand into the Mega Menu:

The Mega Menu can have anywhere from 1 to 4 columns, and within those columns there is no limit (other than screen space and your personal sanity) to the number of categories or items you can have. In this example, The Our Company menu presents the many departments and businesses organized by category and division. Users simply click on the option and are taken to that site’s home page.

The menu system is extremely easy to edit – since it is a normal list in SharePoint. Options can be added, removed, or moved as necessary:

(View of an entry in the Mega Menu items list)

The Mega Menu adds value by allowing us to present a logical view of our Intranet. It makes it easier for our users to find the content they are looking for and contributes to their positive experiences with the system. It’s another example of how SunGard is expanding and enhancing SharePoint 2010 – and a testament to how flexible the platform truly is.

Coming up… I’ll talk about how SunGard is integrating SalesForce Chatter into its Intranet – via custom-designed webparts and enhancements to the SharePoint Ribbon.

Want to know more – look for me at the SharePoint Conference next week in Anaheim and chat me up on all things SharePoint. Follow me on twitter for updates from the conference: http://twitter.com/#!/marcrdavis

Advertisements

2 thoughts on “The Mega Menu

  1. The layout of your mega-menu gives me great food for thought!

    I am designing navigation for our intranet, and I had initially setup a navigation menu that uses drop-downs. I have a narrow width set so have already run out of space. it is UGLY…

    Is there a “Mega-Menu” article link that you used in setting up your SP lists that you could share?

    Thanks ahead!
    PegH.

    • Hi PegH, Glad you liked the article. We didn’t follow any specific example – the Mega Menu appearance as you see it was designed by SunGard’s marketing department during the design process. We then took the design and created the jquery/javascript and connections to SharePoint to make it work.

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