SharePoint 2013 Hosting :: Share Point 2013 Top Navigation Responsive Design

Microsoft SharePoint 2013 is a collaboration platform for customized Web services. SharePoint 2013 offers a simplified user experience and added enterprise social media capabilities, which expand upon previously offered capabilities for website management that include shared calendars, blogs, wikis, surveys, document libraries and shared task lists. SharePoint 2013 includes a community forum for users to engage in and categorize discussions, a microblogging capability and enhanced search capabilities.

Responsive design has become a big thing these days. And this is totally understandable, as the motto “build once, display anywhere” is what we’ve always wanted. Or at lease what we should have aspired to. There is an entire discussion going on about responsiveness and a lot of frameworks that help you do this and that. The point of this post (although first of its series) is not to talk about the generics, but to give an example of how to make the top navigation responsive.

The viewport that requires most customization is the mobile viewport. The size of it is the first factor that we should take into consideration. So the top navigation menu should become a collapsing navigation menu. The theory says that, when the viewport becomes to small to contain all the menu elements, then the control should become a single line or a single icon that provides a one-click action through which the menu is expanded. Submenus will also be hidden, and the main menu should provide the same type of collapsing functionality for the flyouts.

In our example, we will consider the one level SharePoint top navigation that will convert into a mobile menu once the viewport size calls for it. No javascript, no SharePoint device channel or alternate master pages. All CSS. Let’s get a glimpse of what we are aiming for:

First, we must modify the master page file to wrap the top navigation element into a nav element and add a checkbox in front of it that will act as a button.

<nav id=”topnav” role=”custom-dropdown”> <!– nav wrapper –>
<input type=”checkbox” id=”ccMobileButton” /> <!– button –>
<label for=”ccMobileButton” onclick=”void(0)”> <!– button label –></label>
<div  class=”ms-dialogHidden”  id=”ccNav”>
<div  class=”ms-displayInline ms-core-navigation ms-dialogHidden”> <!– sharepoint top nav –>
<PublishingNavigation:PortalSiteMapDataSource ID=”topSiteMap” runat=”server” ………../>
<SharePoint:AspMenu ID=”TopNavigationMenu” runat=”server” EnableViewState=”false” DataSourceID=”topSiteMap” ………../>
</div></div>
</nav>

After adding this, a checkbox will appear on top of the navigation. It should be hidden with CSS.

/* hide mobile menu */
nav[role=”custom-dropdown”] input[type=checkbox] {
display: none;
}
nav[role=”custom-dropdown”] label {
display: none;
}

Refreshing the browser at this point will leave the page looking just like SharePoint. Now for the CSS magic part. I don’t like it when, sing my 10 inch tablet, I browse to a site and I am presented with the mobile view. The width of the screen together with the high resolution can certainly accommodate the usual design of the site. So I styled the mobile view for mobile phone, using a media query that is applied to screen narrower than 440px. The mobile targeted styling should be wrapped in the following media query:

/*use Media Query to apply additional styling for smaller viewports*/
@media (max-width: 440px)

{

}

And now let’s get down to business. First, we are hiding the checkbox itself, and only displaying the label associated with it. This label is empty, but the magic of CSS will leave it looking like a mobile menu. As you already know, clicking the label associated with a checkbox has the same effect as clicking on the checkbox itself, so this is exactly what we want to do. We are choosing to work with a checkbox, so that the menu appears and stays on the screen until we deselect the checkbox. We don’t want the user to scroll down with their finger on the screen and lose the menu.

#topnav label{
display: block;
}

#topnav label:after {
position: absolute;
content: “\2261″;
}

#topnav label {
font-size: 1.6em;
cursor: pointer;
user-select: none;
display: inline-block;
background: #2397D6;
margin-left: 0.6em;
color:white;
border-left:none;
padding:0em 1.3em 1.5em 0.5em;
}

Now, refreshing the browser we should see a blue mobile menu square with 3 white lines on it, standing above the top navigation. Time to turn the navigation into a vertical menu. Remember, I am working with a one level navigation here, but if dynamic elements exist that can either be displayed on this menu by default or displayed on a click action or, for the sake of minimalism, just hidden. After making the menu vertical, we are hiding it by placing it out of view, to the left of the viewport.

/* display navigation as list and hide it to the left */
#ccNav{
left:-1000px;
position: absolute;
}
#topnav ul.root{
display:block;
}
.ms-core-navigation ul li {
display: block;
padding-right: 20px;
left:0;
top:0;
}

And now the magic happens: once the checkbox is selected, the top navigation is displayed.

#topnav input[type=checkbox]:checked ~ #ccNav{
background: #8e8f8f;
left:0.9em !important;
right:0em;
}

Remember, all the code above is wrapped in the media query that triggers it only if the width of the browser is lower than 440px. I have made some additional modifications in order to display the mobile menu icon on the same line as the page title. Otherwise it was looking out of place. Here they are:

#topnav
{
position:relative;
}

#pageTitle
{
padding-left:2em;
line-height:1em;
}
#main
{
position:relative;
z-index:-10;
top:-2.5em;
}

Throughout my CSS code I am using relative sizes, so that every padding and font and width is displayed properly on any device.