Alain de Klerk – Alain's SharePoint Bloggings

SharePoint offers OOTB navigation such as the Top Link Bar and the Quick Launch. Using jQuery and animations you can create a more appealing way of navigation for your SharePoint site. In this post I describe how to leverage the Links list using the Client Side Object Model in JavaScript to provide a fancy way of navigating your site.

Both the jQuery and CSS used in this post are borrowed from Adrian Pelletier. You can view a live demo of the animation on his site. Below is a screenshot of the end result:

To replicate this navigation on your own SharePoint site you can follow the steps below. This solution does not depend on any server-side code and should work for SharePoint on premises and 365 cloud environments.

First of all, add a Links list to your site. If you already have a Link list on your site you can use that one.

Add a new Picture column –named Icon- to this Links list.

Add a copy of jQuery to the Asset Libray of your site, I recommended using the Production version of jQuery as it is minified to reduce page load. Add a image file to the Asset Library to act as the shadow beneath the icons. You can download my image here or create your own image. Last, add a new file HTML file to the Asset Library: FancyLinks.html

Your Asset Library should now contain (at least) three files:

1. jQuery-x.x.x.min.js
2. Icons-shadow.png
3. FancyLinks.html

Now add the following HTML, JavaScript and CSS to the FancyLinks.html. I prefer SharePoint Designer as a web editor, but you can use whatever text editor you want to add this content.

<DIV class="FancyLinks">
	<ul class="FancyLinkList" id="FancyNavigationLinks">
	</ul>
</DIV>

<Script src="/SiteAssets/jquery-1.7.1.min.js"></Script>

<script>
	//Delay execution of this script until SP.js is fully loaded
	SP.SOD.executeOrDelayUntilScriptLoaded(initializeFancyLinks,'SP.js');

 	function initializeFancyLinks()
 	{
		//retrieve the current client context
		var clientContext = new SP.ClientContext.get_current();
		var web = clientContext.get_web();
		var list = web.get_lists().getByTitle('Navigation');

		//retrieve the items from the list using CAML, ignore folders
 		var query = new SP.CamlQuery();
	 	query.ViewXml = '<View Scope="RecursiveAll"> ' +
						'<Query>' +
							'<Where>' +
								'<Neq>' +
									'<FieldRef Name="FSObjType" />' +
									'<Value Type="Integer">1</Value>' +
								'<Neq>' +
							'</Where>' +
						'</Query>'
					'</View>';
 		this.links = list.getItems(query);

 		//Load the links async
		clientContext.load(this.links, 'Include(URL,Comments,Icon)');
		clientContext.executeQueryAsync(Function.createDelegate(this, this.get_Links_onSuccess), Function.createDelegate(this, this.get_Links_onFailure));                    

 	}

 	function get_Links_onFailure(sender, args)
 	{
 		alert(args.get_message());
 	}

 	function get_Links_onSuccess(sender, args)
 	{
		//enumerate query result
		var linkEnumerator = this.links.getEnumerator();
		while (linkEnumerator.moveNext()) {

			var link = linkEnumerator.get_current();
			var comment = link.get_item('Comments');
			var url = link.get_item('URL').get_url();
			var description = link.get_item('URL').get_description();
			var iconUrl = link.get_item('Icon').get_url();

			$('#FancyNavigationLinks').append("<LI title='" + comment  + "'><A style='background:url(" + iconUrl  +") no-repeat' href=" + url  + ">" + description + "</A></LI>");
		}

		$(".FancyLinkList li").append('<img class="shadow" src="/SiteAssets/icons-shadow.png" alt="" width="81" height="27" />');

	    $(".FancyLinkList li").hover(function() {
	        $(this).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
	        	$(this).find("a").animate({ marginTop: "-10px" }, 250);
	        });
	        $(this).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
	    },function(){
	        $(this).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
	        	$(this).find("a").animate({ marginTop: "0px" }, 250);
	        });
	        $(this).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
	    });
	}
</script>

<Style>
		.FancyLinkList {
			text-align: center;
			list-style: none;
			text-indent:-9999px;
		}

		.FancyLinkList li {
			margin-right: 15px;
			width: 80px;
			height: 80px;
			position: relative;
			float: left;
			z-index:1;
		}

		.FancyLinkList a, .FancyLinkList a:visited, .FancyLinkList a:hover {
			margin: 0 auto;
			width: 64px;
			height: 64px;
			overflow: hidden;
			border: 0;
			display: block;
			position: relative;
			z-index: 2;
		}

		.FancyLinkList li img.shadow {
			margin: 0 auto;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 0;
		}

</Style>

Add a Content Editor Web Part to your site’s landing-page and link its content to FancyLinks.html using the Content Link parameter.

Now everything is in place. Navigate to your (newly created) Links list and start adding new items to the list. As a quick-start you use the same images I did as icons:

• http://<site>/_layouts/images/STPS.PNG
• http://<site>/_layouts/images/stgb.PNG
• http://<site>/_layouts/images/STRP.PNG
• http://<site>/_layouts/images/AccessCharitableContributions.png

Head back to the SharePoint landing page and enjoy your new SharePoint navigation.