RSS LOGORss   Welcome Guest  Login Register
Welcome to our Blogs
Back Back
Subject


mag
2008/09/22 01:46PM
How to change SharePoint's menu into a Sliding menu      Number of views: 3159

Hi, it has been a while since my last entry, I was so busy, and actually, I'm still as well, I wanted to write many entries for SharePoint, .NET and ASP.NET, I'll try to write more very soon.

Today, I'll describe how to change the master look of SharePoint's menu into a sliding menu, I'm using an easy technique, but effective, which is

 

document.getElementById('someID').style.display = 'block'  // or 'none';

 

Menu sample

 

Anyway, it was tricky thing to do, first, I had to do some research in order to get an idea how to implement this, I have used IE Developer's tool bar, it's one of the greatest tools for web developers, but, it's not enough :), I'm using other tools beside this one. so, I have used this tool to discover anything about the menu, I found that the Header is rendered as a Table, as well as the Sub-menu, so, my next step is to see how to I'm going to play with each Header Menu and Sub-menu, and it was clear thing, the attribute 'class' was the solution as you can see below a sample for a header and Sub-menu :).

 

 
 ms-navheader zz2_QuickLaunchMenu
 ms-navSubMenu2 zz2_QuickLaunchMenu_8

 Then, I have used some techniques to

  1. Add an Id to each menu and sub-menu for example ('HeaderMenu1', 'HeaderMenu2',...) and for sub-menu ('HeaderMenu1_1', 'HeaderMenu2_1',....) in order to easily identify them.

  2. Add an 'onclick' event to each header to capture the on click event for showing and hiding the corresponding menu.

  3. Inject my custom 'onload' function to window.onload event to trigger my code and do the magic.

 

Notes:

 1. Inject the below code in the master page 'default.master' or your own custom page using: SharePoint Designer.

 2. Remove the links from each Header menu with this javascript  javascript:void(0);  it's important for disabling those links.

 

Now, I'll leave you with the code.

<script defer="defer" language="javascript" type="text/javascript">
//Public variable is used for looping through named objects
var HeadersCount = 0 ;
//Please, refer to a previous blog (JavaScript Section) for more information
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
//This is the function which do the hiding and showing control
//as you can see it takes the Header which was triggered.
function ShowHideMenu(Header)
{
//I'm looping through each Submenu to hide it.
 for(i=1;i<=HeadersCount;i++)
 {
  document.getElementById('HeaderMenu' + i + '_1').style.display='none';
 }
 //Here, I only show what I want to show,
 //Check out the "Header.id + '_1'" to get the id of the
 //Submenu.
 document.getElementById(Header.id + '_1').style.display='block';
}
//this function has the magic, first, it loops through all the tables in the page
//then Thanks to JavaScript dynamics, I do assign a custom 'id' for each header and
//Submenu as well, after that, adding onclick event to each Header menu with my own
//custom function and passing the Header element to it.
//finally, I just show the first menu :)
function SetMenu()
{
 var elems = document.getElementsByTagName("table");
 for (i = 0; i < elems.length; i++)
 {
    
     if(elems[i].className.indexOf('ms-navheader')>=0)
     {
      HeadersCount ++;
      elems[i].id= 'HeaderMenu' + HeadersCount;
      elems[i].onclick= function () {ShowHideMenu(this)};
     }
     if(elems[i].className.indexOf('ms-navSubMenu2')>=0)
     {
      elems[i].id= 'HeaderMenu' + HeadersCount + '_1';
     }
 }
 if(HeadersCount>0) ShowHideMenu(document.getElementById('HeaderMenu1')); 
}

//This to add a function to "load" event of the document, and start doing the job :)
addLoadEvent( function () {SetMenu();});
</script>

 If you have any questions, Kindly < Register >, then use Reply on this Page,

 

Best of luck,

 

Microsoftawy.

 

Feedbacks
 
mag How to change SharePoint's menu into a Sliding menu 14/10/2008 06:05 AM

Hi, I have an update for the code, with more enhancement, first, I had to make the menu 
selection consistent, I mean, if you choose a link from the menu, the same menu block should be selected and remain selected.

The code also solves the issue if you are browsing a Document Library, so, you want the same block 
selected while you are browsing different folders inside it.

 

I'll leave you with the code now.

 

 

 

<script defer="defer" language="javascript" type="text/javascript">
//Public variable is used for looping through named objects
var HeadersCount = 0 ;
var LinksCount = 0;

//Please, refer to a previous blog (JavaScript Section) for more information
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

//This is the function which do the hiding and showing control
//as you can see it takes the Header which was triggered.
function ShowHideMenu(Header) {
    //I'm looping through each Submenu to hide it.
    for (i = 1; i <= HeadersCount; i++) {
        if (document.getElementById('HeaderMenu' + i + '_1') != null) document.getElementById('HeaderMenu' + i + '_1').style.display = 'none';
    }
    //Here, I only show what I want to show, 
    //Check out the "Header.id + '_1'" to get the id of the
    //Submenu.
    if (document.getElementById(Header.id + '_1') != null) document.getElementById(Header.id + '_1').style.display = 'block';
}


//this function has the magic, first, it loops through all the tables in the page
//then Thanks to JavaScript dynamics, I do assign a custom 'id' for each header and
//Submenu as well, after that, adding onclick event to each Header menu with my own 
//custom function and passing the Header element to it.
//finally, I just show the first menu :)

function SetMenu()
{

	var URL = document.location.toString();
	
	if(URL.indexOf('?')>=0)
		URL = URL.substring(0, URL.indexOf('?'));
	
	var elems = document.getElementsByTagName("table");
		
	for (i = 0; i < elems.length; i++)
	{
	    
	    if(elems[i].className.indexOf('ms-navheader')>=0)
	    {
	    	HeadersCount ++;
	    	elems[i].id= 'HeaderMenu' + HeadersCount;
	    	elems[i].onclick= function () {ShowHideMenu(this)};
	    }
	    if(elems[i].className.indexOf('ms-navSubMenu2')>=0)
	    {
	    	elems[i].id= 'HeaderMenu' + HeadersCount + '_1';
	    }
	}
	
	 elems = document.getElementsByTagName("a");
		
	var elemsss='';
	var SelectedLocation='';
	for (i = 0; i < elems.length; i++)
	{
	    if(elems[i].className.indexOf('QuickLaunchMenu')>=0 && elems[i].href.replace(' ','').toLowerCase().indexOf('void(0)')==-1)
	    {
	elems[i].ParentName = elems[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id;
         elems[i].id="LinkCounter_" + (++LinksCount);
	if(elems[i].href.toString().toLowerCase()== URL.toLowerCase())
	SelectedLocation = elems[i].ParentName ;
	    }
	}
	
	
	if(HeadersCount>0)	
	{
		if(SelectedLocation!='')
		{
			SelectedLocation = SelectedLocation.substring(0, SelectedLocation.indexOf('_'));
			ShowHideMenu(document.getElementById(SelectedLocation));
			}
		else
		{
			ShowHideMenu(document.getElementById('HeaderMenu1'));
			}
	}

}


//This to add a function to "load" event of the document, and start doing the job :)
addLoadEvent( function () {SetMenu();});

Best of luck,

Microsoftawy