Skip to content

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 5

Time for the last post in the series about how to customize the global navigation in SharePoint 2013. In this post, you get two new examples of how you can customize the navigation with the help of CSS. This will work for SharePoint 2013, Online or Onprem when using structural navigation.

Nav-Red

Add a nav tag in the master page

I added a nav tag as a container for the SharePoint top menu control. The nav tag is a new tag in HTML 5 and the element should be used for major navigation blocks in the html file. It’s a semantic tag that tells the browser or other reading software such as a search engine that it’s a navigation, compared to a div that just don’t say anything about its content. The CSS is dependent on this nav tag, so if you want to cut & paste, you need to add the nav tag in the master.

<nav>
<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="SPNavigationProvider"
id="topSiteMap"	runat="server" StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu ID="TopNavigationMenu"
Runat="server" EnableViewState="false" DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true" UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2" AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2"	SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>			
</nav>

CSS for the red navigation

In this first example, I use the CSS:after selector to get an arrow and set it’s position relative to it’s parent element, in this I can set the arrow to a selected element with out the use of a image.

#pageTitle{
display:none
}
nav ul li {
background:#dd4433;
border-left: 1px solid #c73d2e;
text-align: center;
height:55px;
}
nav ul li a {
font:16px/36px Arial, Helvetica, sans-serif;
color: #fff;
width:140px;
height:46px;
}
nav{margin:5px auto}
nav ul.root > li.static > ul.static{
border-left:1px #ee4e3d solid;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox li.static >  .ms-core-listMenu-item{
margin-right:10px;
padding-top:7px;
margin:0px 0px 0px 0px
}
nav .ms-core-navigation .ms-core-listMenu-item, nav .ms-core-navigation .ms-core-listMenu-item:link, nav .ms-core-navigation .ms-core-listMenu-item:visited{
color:#fff;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox ul.static > li.selected > a > span > span{color:#fff}
nav ul li a:hover{color:#000}
nav li{border-right:1px solid #ee4e3d}
nav li:last-child{border-right:0px solid #ee4e3d}
nav li.selected:after{
content:'';
position:relative;
width:0px;
display:block;
left:60px;
border:10px solid transparent;
border-top:8px solid #d43;
}

CSS for the blue navigation

For this blue navigation I use a smooth CSS gradient and a portion of border radius to get the rounded corners. If you want to adjust the width to be stretched relative to it’s content, you can use the out commented paddings instead of the fixed width if you prefer.

Nav-Blue

nav {
overflow:hidden
}
#pageTitle{
display:none
}
nav ul li {
background: #618ba4; /* Old browsers */
background: -moz-linear-gradient(top, #618ba4 0%, #406a82 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#618ba4), color-stop(100%,#406a82)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #618ba4 0%,#406a82 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #618ba4 0%,#406a82 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #618ba4 0%,#406a82 100%); /* IE10+ */
background: linear-gradient(to bottom, #618ba4 0%,#406a82 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#618ba4', endColorstr='#406a82',GradientType=0 ); /* IE6-9 */
border-left: 1px solid #7395a8;
border-right: 1px solid #406275;
text-align: center;
height:55px;
}
nav ul li a {
font:16px/36px Arial, Helvetica, sans-serif;
color: #fff;
width:140px;
height:46px;
/*padding-right:20px;padding-left:20px*/
}
nav ul li:last-child {
border-right: none;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
nav {
margin:1px auto;
border-radius:5px;
}
nav ul.root > li.static > ul.static{
border-left:1px #406a82 solid;
}
nav div > div > ul.static > li.static a:hover{
background: #406a82;
height:46px;
}
nav div > div > ul.static > li.static > ul.static > li:hover {
background: #406a82;
}
nav div > ul.root > li.selected a:hover {
background: #406a82!important;
height:55px;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox li.static >  .ms-core-listMenu-item{
margin-right:10px;
padding-top:7px;
margin:0px 0px 0px 0px
}
nav .ms-core-navigation .ms-core-listMenu-item, nav .ms-core-navigation .ms-core-listMenu-item:link, nav .ms-core-navigation .ms-core-listMenu-item:visited{
color:#fff;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox ul.static > li.selected > a > span > span{
color: #fff;
}

Take a look at the previous posts here:

I hope you had joy of this posts in the series! Please drop a comment if you have any question.

/ Christian

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 4

Just as in the previous post, here you got some more examples about how you can spice up the global navigation by add some CSS3. In this post I have included five different kind of link effects animations for you to try out. I’ve used tympanus great piece of work ‘Subtle and modern effects for links or menu items’ tympanus.net/Development/CreativeLinkEffects/ and slightly modified this to work with the markup and CSS of SharePoint 2013.

This is an example of how you can work with CSS3 2D transform methods like translate and scale on pseudo elements (before and after). Take a look at my video on you tube to see this five examples in action!

GlobalNav2013tympanus

Let’s start

You need to add a nav tag in your custom master and some CSS in your exteral CSS file, linked from the master page file. You can change the class name for the nav element to one of this five examples, the available numbers are 1,4,7,12 or 19. For example change cl-effect-1 to cl-effect-4 etc. You can download all the CSS and the navigation control here as well.

Add a nav tag in the master page

I added a nav tag as a container for the SharePoint top menu control. The nav tag is a new tag in HTML 5 and the element should be used for major navigation blocks in the html file. It’s a semantic tag that tells the browser or other reading software such as a search engine that it’s a navigation, compared to a div that just don’t say anything about its content.

<nav class="cl-effect-1">

<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="SPNavigationProvider"
id="topSiteMap" runat="server" StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu ID="TopNavigationMenu"
Runat="server" EnableViewState="false" DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true" UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2" AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2" SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
			
</nav>

And the CSS

/* ---------- NAVIGATION ---------- */
#pageTitle{display:none!important}
/* general */
nav a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
nav a:hover,
nav a:focus {
outline: none;
}
/* effect type */
/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
font-weight: 900;
font-size:25px
}
.cl-effect-1 a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.cl-effect-1 a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
/* Effect 4: bottom border enlarge */
.cl-effect-4 a {
padding: 0 0 10px;
}
.cl-effect-4 a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #0072C6;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.cl-effect-4 a:hover::after,
.cl-effect-4 a:focus::after {
height: 5px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
/* Effect 7: second border slides up */
.cl-effect-7 a {
padding: 12px 10px 10px;
color: #566473;
text-shadow: none;
font-weight: 700;
}
.cl-effect-7 a::before,
.cl-effect-7 a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: #566473;
content: '';
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
transform: scale(0.85);
}
.cl-effect-7 a::after {
opacity: 0;
-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: top 0.3s, opacity 0.3s, transform 0.3s;
}
.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
top: 0%;
opacity: 1;
}
/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}
.cl-effect-12 a:hover::before,
.cl-effect-12 a:hover::after,
.cl-effect-12 a:focus::before,
.cl-effect-12 a:focus::after {
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
}
/* Effect 18: cross */
.cl-effect-18 {
position: relative;
z-index: 1;
}
.cl-effect-18 a {
padding: 0 5px;
color: #b4770d;
font-weight: 700;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.cl-effect-18 a::before,
.cl-effect-18 a::after {
position: absolute;
width: 100%;
left: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: #0072C6;
content: '';
z-index: -1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
pointer-events: none;
}
.cl-effect-18 a::before {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
transform: translateY(-20px);
}
.cl-effect-18 a::after {
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
.cl-effect-18 a:hover,
.cl-effect-18 a:focus {
color: #fff;
}
.cl-effect-18 a:hover::before,
.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::before,
.cl-effect-18 a:focus::after {
opacity: 0.7;
}
.cl-effect-18 a:hover::before,
.cl-effect-18 a:focus::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Effect 19: cross */
.cl-effect-19 {
position: relative;
z-index: 1;
}
.cl-effect-19 a {
padding: 0 5px;
color: #b4770d;
font-weight: 700;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.cl-effect-19 a::before,
.cl-effect-19 a::after {
position: absolute;
width: 100%;
left: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: #0072C6;
content: '';
z-index: -1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
pointer-events: none;
}
.cl-effect-19 a::before {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
transform: translateY(-15px);
}
.cl-effect-19 a::after {
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(15px);
}
.cl-effect-19 a:hover,
.cl-effect-19 a:focus {
color: #fff;
}
.cl-effect-19 a:hover::before,
.cl-effect-19 a:hover::after,
.cl-effect-19 a:focus::before,
.cl-effect-19 a:focus::after {
opacity: 0.7;
}
.cl-effect-19 a:hover::before,
.cl-effect-19 a:focus::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(90deg);	
}
.cl-effect-19 a:hover::after,
.cl-effect-19 a:focus::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-90deg);	
}

I hope you had joy of this and please drop a comment if you have any question!

/ Christian

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 3

In this third post, I will show how you can spice up the global navigation by add some CSS3. If you ever wanted to add some of the new CSS3 attributes like box-shadow or transitions to make some cool effects like animations this is a post for you. Now let’s change the look & feel for the global navigation in SharePoint Server to your heart’s desire!

GlobalNavIII

This example is suitable for SharePoint Server onprem as well as for SharePoint Online. The navigation is built after a structured navigation, there’s no CSS to handle dropdowns. The following CSS code includes transitions, an animation effect that let an element gradually change from one style to another. With this technique you can give the navigation an extra layer of interactivity.

There’s a bunch of sites out there like CSS Deck, CSS-trick, SpeckyBoy, Smashing Magazine etc. where you can find snippets and tutorial to get going with the latest stuff on HTML 5 and CSS 3. Why not find an example and try to implement this in SharePoint. In this post I’ll show you how to take one of this example and modify this a bit to fit it into SharePoint’s markup. Take a look at this example: http://cssdeck.com/labs/large-pressable-css3-navigation now let’s implement this one!

First of all, let’s wrap the SharePoint:AspMenu with a nav tag. Open your custom master and just add this two lines, start and end using the new HTML5 tag (nav) or an old good div if you prefer.

<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="SPNavigationProvider" id="topSiteMap" runat="server" StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<nav id="nav">
<SharePoint:AspMenu ID="TopNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" SkipLinkText="" />
</nav>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>

And at last it’s time for the CSS:

.ms-core-navigation .ms-core-listMenu-horizontalBox li.static >  .ms-core-listMenu-item{
margin-right:1px
}
.ms-core-navigation .ms-core-listMenu-horizontalBox ul.static > li.selected > a > span > span{
color:#CFE1F1
}
#pageTitle{
display:none
}
#nav {
margin:4px auto;
overflow:hidden;
opacity:0.90;
border-radius:5px;
list-style-type:none;
}
#nav ul {
background-color:#2C4A70;
padding:0px 0px 1px 0px;
border-radius:5px;
}
#nav ul li {
height:55px;
}
#nav ul li a {
font:21px/52px Arial, Helvetica, sans-serif;
background-color: #0f6fb2;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(15, 111, 178)), to(rgb(34, 65, 112)));
background-image: -webkit-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
background-image: -moz-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
background-image: -o-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
background-image: -ms-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
background-image: linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#0f6fb2', EndColorStr='#224170');
color: #fff;
text-decoration: none;
box-shadow:inset 0 1px 0 #0081bd,inset 0 2px 0 #0078b0,inset 0 3px 0 #0070a3, 0 0 10px rgba(0,0,0,0.2);
box-sizing:border-box;
transition:all .2s ease-in;
-o-transition:all .2s ease-in;
-moz-transition:all .2s ease-in;
-webkit-transition:all .2s ease-in;
}
#nav ul li a {width: 140px}
#nav ul li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav ul li:last-child a {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}#nav ul li a:hover {
box-shadow:inset 0 1px 0 #0070a3,inset 0 0 30px 0 #142a4a;
text-shadow:0 1px 3px #143157;
border-bottom:5px solid #0e223d;
}
#nav ul li a span {
border-left:1px solid #143157;
border-right:1px solid #1563a3;
height:100%;
display:block;
text-align:center;
box-sizing:border-box;
}
#nav ul li:first-child a span { border-left: none}
#nav ul li:last-child a span { border-right: none}

Please drop a comment if you have any questions

/ Christian

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 2

In this second post, I will show how you can create your own markup for the global navigation. This could be a great option when you need to take advantage of HTML 5 tags and additional jQuery plugins that requires simpler markup than SharePoint gives you out of the box.
Alternative to create a complete new control via code, an easy way is to use a standard old good .NET repeater control, instead of the SharePoint:AspMenu control and let the repeater connect to a asp:SiteMapDataSource. To use a repeater control instead of the SharPoint:AspMenu is most likely something suitable for a public SharePoint site.

simple
The repeater gives you a possibility to simplify the markup and just render a minimum of UL and Lis where you can set you own names for IDs or classes.
In order to add a selected class for selected links in the navigation you’ll need to use code behind or java script to do this. The thing here is that JS this will be valid as long as the page is still open, as soon as the user goes to a new page the JS will be reset. To overcome this you can use a cookie or read the URL, parse it, and then add a selected class to the current navigation node or as in this solution just use jQuery with location.pathname to compare the selected link to what’s in the URL.

Ok, if you only need a plain navigation without any dropdown items, replace the old control with this stuff:

<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate"></SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<nav class="SpNav">
<ul id="SpNavUL">
<asp:Repeater ID="GlobalNavMenuItems" runat="server" DataSourceID="topSiteMap">
<ItemTemplate>
<li>
<asp:HyperLink ID="SpNavLinks" runat="server" NavigateUrl='<%# Eval("Url")%>' Text='<%# Eval("Title") %>'></asp:HyperLink>
</li>
</ItemTemplate>
</asp:Repeater>
<asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="CombinedNavSiteMapProvider" id="topSiteMap" runat="server" StartingNodeUrl="sid:1002" />
</ul>
</nav>	 
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>

And the CSS:

#SpNavUL, #SpNavUL ul {
margin:0;padding:0;list-style:none;
}
#SpNavUL{
margin: 0px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#SpNavUL:before,
#SpNavUL:after {
content: "";
display: table;
}
#SpNavUL:after {
clear: both;
}
#SpNavUL li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#SpNavUL a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
}
#SpNavUL li:hover > a {
color: #fafafa;
}
.SpNavActive{
color:#04acec!important;
}

And the jQuery:

$(document).ready(function(){
$(function() {
$('#SpNavUL a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('SpNavActive');
});    
});

If you need to display dropdown items in the repeater control you have to use a bit server side script in the repeater to get the child nodes. You need to enable code blocks via web config file to get this working and if you need to do this for a production environment, don’t forget to handle the changes for the web.config in a WSP. Note that you will not be able to modify the web.config file for a SharePoint Online site.

double

Download all the stuff here including how to do with a repeater that includes a drop down menu.

Stay in tune for the next post in this series about the global navigation in SharePoint 2013

Please drop a comment if you have any question or just ideas for the next posts!

/ Christian

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 1

It’s time for another blog series and this posts will be centered around how to customize and brand the global navigation in SharePoint 2013 online or on prem. In November 2010, I published three post in this subject for SharePoint 2010, and so far this posts together have generated 165.000 views and 166 comments. These blog entries has become a great success, and I am of course happy to be in any help when you are about to modify the navigation.

Creating a nice looking global navigation is a great way to improve the look and feel of the SharePoint site. A design that is well built and attractive will increase the usability and simply make the users happy! This post is based on a structural navigation in SharePoint 2013 server, and the focus is on the CSS parts. Let’s start with an easy example of how you can add some styling for the global navigation in order to get tabs in the navigation like the image below.

2013-globalnav

Three years have elapsed since the last time, so what has happened since SharePoint 2010 in terms of the global navigation?

  • The rendering markup from the navigation controls with class names has changed slightly
  • SharePoint 2013 is by default CSS3 and HTML 5 friendly
  • New jQuery framework and jQuery plugins to be used
  • Managed navigation that allows us to define the navigation based by Manage metadata

The OOTB markup for the global navigation looks like this:

HTMLnav

It’s still a complex markup and a lot of classes to deal with but let’s start with an easy example just to get going. I have added comments to the classes so you should be able to change for example colors and paddings by your needs. I’ll publish more examples in the next post.

/* --- Global navigation --- */
#DeltaPlaceHolderMain{
margin-top:30px;
}
.ms-breadcrumb-top{
background-color:#f2f2f2;
}
.ms-core-navigation > div > ul.root > li.static a:link, ul.root > li.static a:visited{
font-family:Arial; font-size:16px
}
/* links */
.ms-core-navigation > div > ul.root{
padding-top:8px;
padding-left:8px
}
.ms-core-navigation > div > ul.root > li a{
border:1px #fff solid;
padding:15px 20px 22px 20px;
font-size:15px;
}
.ms-core-navigation .ms-core-listMenu-horizontalBox li.static >  .ms-core-listMenu-item{
margin-right:8px
}
/* links not selected */
.ms-core-navigation > div > ul.root > li.static a:link, ul.root > li.static a:visited{
color:#222
}
/* links selected */
.ms-core-navigation > div > ul.root > li.static > ul.static > li.selected a:link, ul.root > li.static > ul.static > li.selected a:visited{
color:#222;
background-color:#fff
}
/* home link selected */
.ms-core-navigation div.ms-core-listMenu-horizontalBox > ul.static > li.selected a.selected{
border:1px transparent solid;
background-color:#fff
}
/* home */
.ms-core-navigation > div > ul.root > li.static > ul.static{
margin-left:0px
}
/* Hover */
.ms-breadcrumb-top .ms-core-navigation ul.static > li a:hover{
border:1px transparent solid;color:#222;
background-color:#fff
}

The next post in this series will cover

  • More branding examples you can download and use in your SharePoint environment
  • Using a ASP repeater control with jQuery to render custom markup
  • How to use jQuery for various UI effects
  • Branding example for a managed navigation

Please drop a comment if you have any question or just ideas for the next posts!

/ Christian

Design Manager in SharePoint – Part IV

Welcome to the fourth post in my series about the Design Manager in SharePoint 2013. Please read the previous posts before you read on.

Design Manager in SharePoint 2013 – Part I
Design Manager in SharePoint 2013 – Part II
Design Manager in SharePoint 2013 – Part III

If you followed the previous post you probably have a branding up and running in your developer machine or maybe in SharePoint online.

Snippets

So what is snippets? It’s a special markup that lets you add .net and SharePoint controls directly in your HTML page. You can add web parts, user controls or just any kind of .net control in your layout. It gives a way to separate code from the design. Ok, let’s take a closer look at the snippets. Go to the preview page and click at the Snippets link in top of the page. Let’s take a look at one of the snippets around, the snippet for the global navigation:

1

This snippet generates 3902 characters and if you just take this as it is you will have to work with a heavy cluttered HTML page not least in the fact that you’ll need a number of snippets onto the page. Well, let’s do something about it and clean it up to readable code. Take not that you don’t have to clean this up because SharePoint strips out the comment tags and all unnecessary stuff in this snippet, but if you working in the HTML document with your favorite text editor, the code over all with be easier and more semantic if you clean the snippets.

2

The corresponding master page that’s in sync with the HTML page will contain this:

3

So what can be cleaned up and what’s about all this SPM, MS and ME comments?
SPM = SharePoint namespace registration, you don’t have to use this close to the snippets and not more than one on the page. It’s enough to have the registration in the top of the page
MS = Markup Start, where a control or a place holder starts
ME = Markup End, where a control or a place holder ends

If you need to add web parts or user controls onto the HTML page, just wrap them the same way as described above, and don’t forget to add the register name space.
I have created a text file containing a pure SharePoint generated snippet for the global navigation and a cleaned version, so it’s just to compare. Download this file here
There’s are more comments you can use, read more about it this at MSDN

That’s all in this series!
/ Christian

Design Manager in SharePoint – Part III

Welcome to this third post in my series about the Design Manager in SharePoint 2013. Please read the previous two posts before you read on testing this post.

Design Manager in SharePoint 2013 – Part I
Design Manager in SharePoint 2013 – Part II

Assuming you have read my previous post about how to map the master page gallery and how to convert your branding assets with help of the Design Manger, you’re now ready to convert your branding assets. If everything works fine including adding snippets, the next step should be to style the snippets so they should have the same look and feel as your original HTML design.

You can download a complete example of a pure HTML branding as well as the result by the Design Manager conversion within a few cleaned snippets. You’ll find the links at the end of this post.

SOL

The next step after you have uploaded and converted your HTML mockup and added the snippets you need, is to create some override CSS classes to make the snippets looks like your mockup. That’s because the snippets inherit their style from SharePoint’s CSS files

For example, let’s say that your HTML looks like this for the top navigation:

<ul class="globalnavigation">
	<li>Services</li>
	<li>About Us</li>
</ul>

When you add the navigation snippet, SharePoint generates this markup:

DOM-explorer

In order to get the snippet to looks like your mockup you’ll need to add some CSS to override what SharePoint renders. Use IE developer toolbar for this task.

Version 0.1

This design is created specific for this blog post and are not fully tested in every scenario or in all browsers and versions, please see this as a first version, and of course, feel free to use it and modify it in the way you want.

I have uploaded this branding at my public SharePoint Online site with help of the WSP file, take a look here: http://swe-public.sharepoint.com

Download the HTML Mockup
Download the Design Manager Converted files
Download the WSP

You can upload the branding files with a WSP file in SharePoint, but if this is about SharePoint Online and a public web site, you will not find any link to the user solution page through the browser, you need to specify this in the URL field: https://-public.sharepoint.com/_catalogs/solutions a public SharePoint online is a bit limited compared to an Intranet site collection in the cloud, but we can count of an evolution in the future.

Next step, detaching the HTML file

I’ll write more about how you can detach the HTML file from its corresponding master page in the next article. Detaching is necessary if you want to include the branding in a Visual Studio branding feature or if you want do edit for example the master page with SharePoint Designer 2013.

Next post [Part IV]

There’s a lot of stuff to cover about the Design Manager, preliminary next up will cover more on snippets and how you can wrap ASP.Net and you own controls into an converted HTML page, how to include web part zones and how to detach the HTML file from its Master Page.

Christian

Design Manager in SharePoint – Part II

This is the second post in my series about the Design Manager in SharePoint 2013. Please read the first post before you go on to this post. Design Manager in SharePoint 2013 – Part I

Before uploading your design files to SharePoint, be sure you follow this recommendations:

  • Valid and XML-compliant HTML
  • No inline CSS, style tags will be removed by the design manager. Use an external CSS file
  • Use an external JS file referenced from the HTML file

I do also recommend you to have SharePoint in your mind when you creating the HTML outside SharePoint, create empty containers for the components and controls much as close to how SharePoint works. Add comments so you know where you should put the snippets etc.

When you upload your design files (HTML/CSS/Images/JS) to the Master Page Gallery, keep all your files in one single folder. In this example I have named my folder to HQ Design.

Map Master Page Gallery

Soon as your branding files are ready to be uploaded in SharePoint, map a network drive to the folder where the master pages lives, the Master Page Gallery (_catalogs). Take a look how to map a drive here: http://msdn.microsoft.com/en-us/library/jj733519.aspx this will makes it easier to upload and work with the branding files later on. The path would be something like \\YourSite\_catalogs\masterpage
netdrive
When you have map the master page folder, drop the folder with your branding files in this drive. Once this are done, it’s time to try out the design manager!

Convert an HTML file with the Design manager

  • Use the browser and go your publishing site’s site settings and click the link Design Manager
  • In the left navigation, click ‘4. Edit Master Page’
  • Click ‘Convert an HTML file to a SharePoint master page’
  • In the dialog, click at your folder (HQ Branding) and then click at the index.html file and click the insert button. If everything ok you should see the status ‘conversion successful’.
  • Click at the dots next to index, and the dots in the dialog and select Publish a Major Version. Select OK.
    PublishMaster
  • Open a new tab in the browser and go the start page of your site. Go to site settings and click Master page. Specify the new master page in both as site master and system master. Mark both reset check boxes and click OK.

Your branding should now be applied onto the SharePoint user interface. Use the browser to see the files, Site settings > Master pages and page layouts. Open your folder to view the files. It’s perhaps easy to get lost in the user interface now when the new branding are applied. Remember that everything related to the Design manager for example snippets will be found from the Design manager start page /_layouts/15/DesignMasterPages.aspx.

Then it’s just to click at your file to get it open in the preview mode. You’ll find the Snippets as a link right to the top of the page. Ok, now on to the next step, add the necessary SharePoint controls and content sections in your HTML file.
snippetsRibbon

Create snippets

  • Go to the preview page of your branding,  /_layouts/15/DesignMasterPages.aspx and click at the filename for example index
  • Click at Top Navigation and copy the HTML
  • Open your index HTML file in the master page gallery from the mapped network drive. You can use for example Dreamweaver or the tool of your choice.
  • Locate the section in the markup where you want to put the snippet and just paste the snippet here
  • Save the HTML file, open the browser and verify that your changes have been updated
  • You’ll also need to create some CSS for all controls you add onto the page, use IE developer toolbar or Firebug to see the HTML that renders and the name of the CSS classes
  • Once your done with the first snippet it’s just to get on with the next snippet, for example the Search Box

WSP

When you are done with your branding you can create a package of all your branding files into one single WSP file (User solution).

  • Use the browser and go to the Design manager
  • Click at the last step in the left navigation, Create Design Package
  • Click Create, now it can take some time to build this. After a while you will see a new link named ‘Your package is ready…’ Click at the link to download the file
  • The solutions you have created or uploaded can be found from Site settings > Solution /_catalogs/solutions/Forms/AllItems.aspx

Is Design manager the replacement for SharePoint Designer & Visual Studio?

As so often in the world of SharePoint, it depends. See the design manager as a new alternative to the traditional approaches, it’s up you and it depends of scenario. You don’t have to use the Design manager if you already are experienced with branding in SharePoint 2010 and before with SPD or VS, but it could be a great option for you when it comes to creations of quick mockups in SharePoint or if you just prefer to build the HTML wireframes outside SharePoint. I do also think the design manager is great and valuable for a public faced site upon SharePoint online because it’s possibilities to just upload the design as a user solution.

Next post [Part III]

In the next post I’ll publish a example branding including a few SharePoint components you can download and try out and I’ll upload a WSP of this as well. The next post will also include some tips & tricks about Snippets that I think can be useful for you.

Design Manager in SharePoint – Part III

Christian

Design Manager in SharePoint 2013 – Part I

Recently, I have shown the design Manager in workshops and other presentations and experienced that the audience is interested and want to get started and use this tool when designers should be developed, so I thought that writing a few blog posts in a series of two entries with the aim that you should be able to get started step by step but also you can download a complete example from a HTML based on the latest standards, including CSS and JS.

DesignManager

The design manager is a new feature in SharePoint (On-Prem – standard & enterprise and SharePoint Online) and provides a new approach for branding SharePoint 2013 interfaces. It is quite easy to work with and you will pretty quickly be able to create an awesome branding for your SharePoint environment without the need of longer experience of components in the SharePoint user interface such as NET controls or master pages in depth. Note that you can still create your branding as you did in previous versions of SharePoint by using SharePoint Designer or Visual Studio.

  • Create your branding outside SharePoint with tools like Dreamweaver
  • Import the branding files to SharePoint and it will be automatically converted to valid SharePoint master page format
  • Add SP controls like search box, site name
  • Import & Export the branding as an user solution (WSP)
  • Ability to create mockups based on templates

The following posts will include:

Part II

  • A concrete example: Design manager walkthrough step by step
  • When should you use the Design Manager and when you should use SharePoint Designer or Visual Studio instead

Part III

  • A complete downloadable example including a HTML, MasterPage, Page Layouts, CSS, JS and Images
  • Snippets and their syntax & some tips n tricks
  • References to more information about the design manager and links to other blogs in this topic

If you’re about to get started with the design manager or if you are considering which method to use for your SharePoint branding I hope you will enjoy the following posts. Stay in tune for the next post which will be published shortly

This series contains so far by this posts:

Part I (This post)
Design Manager in SharePoint – Part II

/ Christian

SharePoint Saturday Netherlands – Wrap-up

I just came back home and thought I just should write a few lines about SharePoint Saturday Netherlands. I’m still existed, had some fun days in the Netherlands, visited Rotterdam, Utrecht and Amsterdam.

The day before the conferences, I had a workshop about SharePoint 2013 for the SharePoint consulting group at CGI wish was a good warm-up for my session about customizations & branding at the SP saturday event. It was really crowded at my session and there was not seats enough, really cool to see that so many people are interested of branding not least because it is in the middle of the holiday season and on a weekend! The initial feedback I received from the audience was good, thank everyone for all the great questions and good discussion I had to a few afterwards.

For this event DIWUG published theire 10th SharePoint eMagazine, this is a free downloadable magazine with articles written by MCMs, MVPs and other authors from the SharePoint community. The target audiences are IT-pros, developers and end (power) users. All articles are written in English. You can download all editions from here.

I can really recommend the SharePoint Saturday NL if you have the chance to get there next year, a much well organised conference by the DIWUG crew.

Next, I will write some more demos for upcoming conferences, a highlight later on will naturally be SEF 2013 (SharePoint & Exchange forum) for the 10th time, and this time on a cruising ship between Stockholm and Helsinki. Don’t miss that if you have the chance..

See you!

Christian

Follow

Get every new post delivered to your Inbox.

Join 1,153 other followers