SharePoint 2010 Navigation Right Click Trick

My favorite SharePoint 2010 trick is how to deal with the out of the box functionality of the global and left navigation links. As many frustrated SharePoint 2010 users have experienced, the functionality shown in the below image is annoying and not easily fixable. The image on the left shows what happens when you right click on the global navigation and the image on the right shows what happens when you right click on the left navigation. Clearly this is not the expected menu which appears.

SharePoint 2010 Right Click

After much research I have come up with an easy trick to deal with this. I have also discovered the underlying issue and will post the details below in the hopes that a permanent fix can be found. If you take careful note of the position of the (enlarged) cursor, you’ll see that it is positioned to the left of the link I want to open. By clicking slightly to the left (or right) of the link that you want to open, you will get the correct link menu!

SharePoint 2010 Right Click Trick

 

So why does this issue happen and why does this solution work? I believe the root of the issue is a design conflict between SharePoint 2010 and Internet Explorer. Utilizing Internet Explorer’s “F12 Developer Tools”, you can see that the text of the link is contained by not one but two span tags. I think it has something to do with this but I am currently unable to confirm. If anyone has any insight into this issue, please let me know!

IE F12 Dev Tools

Tim Ferro

 

SharePoint 2010 Hide Left Navigation

If you Google search the title of this blog post you will find numerous sites that tell you how to easily accomplish this via a simple CSS style change. Use a hidden content editor web part, just like my last post (except you don’t need jQuery), and add the following code:

<style>
BODY #s4-leftpanel { DISPLAY: none }
.s4-ca {MARGIN-LEFT: 0px }
</style>

Done. Simple. However, what if you want the ability to show and hide that on demand? Then you will need this handy JavaScript script code. Just like before, add a content editor web part to the page but this time don’t hide it. Add the following code and you will be able to show and hide the left navigation on demand:

<script language=”javascript”>
function toggle() {
var ele = document.getElementById(“s4-leftpanel”);
var s4 = document.getElementById(“MSO_ContentTable”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
s4.style.marginLeft = “0px”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
s4.style.marginLeft = “155px”;
text.innerHTML = “hide”;
}
}
</script>
<a id=”displayText” href=”javascript:toggle();”>Show</a> <== Click Here

Now you have two easy options for temporarily or permanently hiding the left navigation in SharePoint 2010.

There are a number of enhancements to this code that can be made to make it even more useful. The first is the bug that requires 2 clicks to get it working and the second would be setting the user’s selected preference in a cookie so that it always remembers the state that it was in the last time the user logged in. I may work on these in the future but feel free to post that code in the comments section or contact me directly and I will post an update or link to your blog!

Tim Ferro