You may also be interested in: SharePoint-based solutions by B&R Business Solutions
Editor's note: Contributor Benjamin Niaulin is a SharePoint Specialist at Groupe GSoft Inc. Follow him @bniaulin
A good navigation experience can make the difference in your SharePoint deployment’s adoption and experience by the users. Many will agree, if you are looking at a website and cannot figure out where to click to find relevant information, you probably will not come back.
Many factors can play in a good navigation. Designers of navigation have used the Three-Click Rule for many years. The rule suggests that users should never have to click more than three times to get to their destination. Many more factors can play in our success for a well-designed Navigation menu in SharePoint. One of them, branding, has been the main topic in my series on the Global Navigation. This time, I am going to throw myself into the Quicklaunch. The Quicklaunch is that other piece of navigation you find on the left of a SharePoint Site.
This navigation menu typically shows the visitor what he or she can visit on the site. The actual content, meaning the links in the menu, can be managed by the Site Administrator through the Look and Feel section of the Site Settings.
In this menu you can add two types of content, Headings and Links.
Headings are similar to folders or containers of links in your menu. They are SharePoint’s way of grouping links together.
Links are of course links to anything; documents, pages, sites, external sites, etc.
It’s important for us to understand the difference between the two because we will want to brand these items accordingly.
Getting ready for the challenge
If you have been following the Global Navigation branding series, then you’ll know that I will use the Content Editor Web Part to test our branding. By adding this web part, one can actually enter CSS (method of applying designs on web pages) directly in the HTML source editor inside and only apply branding on a single page. This is great for testing and learning. All the information on how to get set up can be found here: Learn to brand from the start
Remember, I am not a graphic designer and my knowledge on CSS is very basic. The goal of these series is to explore SharePoint branding and make it available to anyone. I strongly recommend you read 5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours.
I use a very simple technique to do my research. Find the CSS classes applied around an object in SharePoint and give it a flashy background! This allows me to see where the CSS is actually applied. Our first step is to check the CSS Chart again, pull out all the classes applied and start with a few set on the larger container around the menu.
|ul.dynamic, li.dynamic, a.dynamic
||.s4-sn li.static > a|
||.s4-sn li.static > a:hover|
Once again, I feel overwhelmed by the number of classes available. But, wait a minute, I see a lot that I recognize… .menu a.static li.selected
I believe we used them in our Global Navigation series. Actually if you remember, I had applied li.static for my Global Navigation with a yellow background and it had affected my Quicklaunch. This was in my Journey into the menu items.
Although we covered a few of these already, I am not going to assume they work the same way in the Quicklaunch. In the next article, after a few trials and errors, I will choose 2 or 3 classes that make sense and see what we can do with them.
Seen any cool Quicklaunch menus?
Meanwhile, has anyone seen some branded Quicklaunch menus you think are awesome?
Brand SharePoint Series: