This is a quick and simple trick to turn a long SharePoint global/top navigation drop down (a.k.a. fly-out) menu into an easier to read, two or more column display. All you need is a little CSS.
The Challenge
You are using SharePoint’s global/top navigation (managed or structured) and a drop down menu has grown so long it resembles a holiday meal grocery list for 30 people.
The Solution
Add this blob of CSS to your custom CSS file, making width adjustments as necessary to alter the size of the drop down box and to create a two, three, four or more column design. The comments explain what each declaration does and are not required in final code.
ul.dynamic {
width: 300px !important; /* !important needed to override generated inline style - update overall width here */
box-shadow: 0 0; /* OPTIONAL: Removes default shadow on drop down menu */
}
li.dynamic {
line-height: 1.5em; /* OPTIONAL: Adds some leading (space between navigation items) */
float: left; /* Magic to make this technique work */
width: 50%; /* Use 50% for 2 columns, 33.333% for 3 columns, 25% for 4 columns, etc. */
padding: 1%; /* OPTIONAL: Pads out the navigation items */
box-sizing: border-box; /* Prevents the width vs. padding math game and alters default box model rendering */
}
The result:
Note: If you have modified the current/left/quick launch navigation to include drop down menus, then you will need to expand the selectors above to include a parent class, such as .ms-core-listMenu-horizontalBox.
Wha, wait! This almost looks like a mega menu
Yup, and at SPTechCon Austin this year I will step this up and demo a CSS only solution to convert the global/top nav into what I have coined as “mega-menu-ish”. I’ll do this demo in my conference session, “92% of Branding SharePoint is CSS, So Why Are You Living in a Master Page?” and afterwards will post a summary on this blog.
The Drawback
This technique won’t play well with another “drill down” level of navigation, as there is no usability-friendly way to show another fly-out from a columnized drop down menu without the use of JavaScript.
How to Use this CSS
If you need a hand getting started with custom CSS for SharePoint, please check out these posts:
